wcx/wolegca.github.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update the layout

Browse Source
This commit is contained in:
wolegca 2019-09-15 14:27:21 +08:00
parent 86b7748704
commit c45d42996a
6 changed files with 146 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
base.js
View File

@ -27,19 +27,26 @@ $(function () {
p.remove(); p.remove();
m.remove(); m.remove();
},300); },300);
message.alertCode = '';
}); });
})(); })();
var message = new function () { var message = new function () {
this.alertCode = '';
this.alert = function (header, content) { this.alert = function (header, content) {
if(message.alertCode){
console.warn('存在未关闭的提示框');
return;
}
var id = uuid(); var id = uuid();
var html = var html =
'<div class="msg-container" id="mc-' + id + '">' + '<div class="msg-container" id="mc-' + id + '">' +
'<div class="msg-header" id="mh-'+id+'">' + '<div class="msg-header" id="mh-'+id+'">' +
header + (header || '提示框') +
'</div>' + '</div>' +
'<div class="msg-content">' + '<div class="msg-content">' +
content + (content || '提示内容') +
'</div>' + '</div>' +
'<div class="msg-footer">'+ '<div class="msg-footer">'+
'<span>关闭</span>'+ '<span>关闭</span>'+
@ -47,9 +54,9 @@ var message = new function () {
'</div>' + '</div>' +
'<div class="mask"></div>'; '<div class="mask"></div>';
$(document.body).append(html); $(document.body).append(html);
$('.mask').show().css('animation','fadeIn .2s forwards'); $('.mask').css('animation','fadeIn .2s forwards');
$('#mh-'+id).Drag($('#mc-'+id)); $('#mh-'+id).Drag($('#mc-'+id));
return id; message.alertCode = id;
} }
} }

2
drag.js
View File

@ -10,7 +10,6 @@
Rx = event.pageX - (parseInt(target.css("left")) || 0); Rx = event.pageX - (parseInt(target.css("left")) || 0);
Ry = event.pageY - (parseInt(target.css("top")) || 0); Ry = event.pageY - (parseInt(target.css("top")) || 0);
M = true; M = true;
scaleChanged = false;
}) })
.mouseup(function (event) { .mouseup(function (event) {
M = false; M = false;
@ -23,7 +22,6 @@
left: event.pageX - Rx left: event.pageX - Rx
}); });
} }
scaleChanged = true;
}); });
} }
})(document); })(document);

7
highlight.css Normal file
View File

@ -0,0 +1,7 @@
.css-keyword{
color:#ff7800!important
}
.css-value{
color:#090!important
}

45
index.css
View File

@ -0,0 +1,45 @@
.container{
max-width: 1440px;
/* height: 100%; */
margin:0 auto;
position: relative
}
.sidebar-border{
position: absolute;
left:0px;
top:0px;
display: block;
width:250px;
/* height:100%; */
background-color: transparent;
padding-top:50px;
overflow-x:hidden;
/* border:1px solid white; */
padding-bottom: 10px;
padding-left: 10px
}
.sidebar{
position: relative;
display: block;
width:100%;
/* min-height:100%; */
background-color:rgba(255,255,255,.5);
border-radius: 15px;
padding:15px
}
.sidebar div:first-child{
font-size: 20px;
font-weight: bold
}
@media screen and (max-width:700px){
.sidebar-border{
position: relative;
width:100%;
height:auto;
padding:0px
}
}

25
index.html
View File

@ -7,10 +7,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="myui.css"> <link rel="stylesheet" href="myui.css">
<link rel="stylesheet" href="highlight.css">
<title>LAOZHONGYI BLOG</title> <title>LAOZHONGYI BLOG</title>
</head> </head>
<body> <body>
<div class="container">
<div id="blog-title">AHPU 老中医的博客</div> <div id="blog-title">AHPU 老中医的博客</div>
<input type="checkbox" id="menu-control"> <input type="checkbox" id="menu-control">
<div class="menu-container"> <div class="menu-container">
@ -31,7 +35,7 @@
<div class="content-border"> <div class="content-border">
<div class="content"> <div class="content">
<span>笔记1</span> <span>笔记1：首字下沉的技巧</span>
<p>在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那？下面小编给大家分享一下CSS如何实现首字下沉效果</p> <p>在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那？下面小编给大家分享一下CSS如何实现首字下沉效果</p>
<p>首先准备一个HTML文档，然后在文档中准备好一段文字，如下图所示</p> <p>首先准备一个HTML文档，然后在文档中准备好一段文字，如下图所示</p>
<img src="images/note1/1.jpg" alt="截图1"> <img src="images/note1/1.jpg" alt="截图1">
@ -42,8 +46,11 @@
<p>综上所述，实现首字下沉效果主要运用了CSS的first-letter选择器，给其添加样式即可</p> <p>综上所述，实现首字下沉效果主要运用了CSS的first-letter选择器，给其添加样式即可</p>
</div> </div>
<div class="content"> <div class="content">
<span>笔记2</span> <span>笔记2：css选择器</span>
<p>有时候我们会想选择众多兄弟元素中特定次序的元素，这个怎么通过css来选中呢？这里有个技巧，就是巧用css的child选择器</p>
<p>1、first-child</p>
<p>first-child表示选择列表中的第一个标签。代码如下：
<pre><code></code></pre>
</div> </div>
<div class="content"> <div class="content">
<span>笔记3</span> <span>笔记3</span>
@ -53,8 +60,18 @@
<span>笔记4</span> <span>笔记4</span>
</div> </div>
<div class="sidebar-border">
<div class="sidebar">
<div>
往期回顾
</div>
<div>
content 2
</div>
</div>
</div>
</div>
</div> </div>
<!-- <div class="mask"></div> --> <!-- <div class="mask"></div> -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="drag.js"></script> <script src="drag.js"></script>

48
myui.css
View File

@ -8,15 +8,17 @@ body,
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; /* height: 100%; */
overflow: hidden /* overflow: hidden */
} }
body { body {
background: black url(bg.jpg) repeat-y center; background: black url(bg.jpg) repeat-y center;
background-size: cover; background-size: cover;
width: 100%; width: 100%;
z-index: 0 z-index: 0;
position: relative;
display: block
} }
#menu-control { #menu-control {
@ -39,8 +41,8 @@ body {
.menu-container { .menu-container {
display: block; display: block;
position: relative; position: fixed;
float: left; /* float: left; */
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
@ -113,7 +115,7 @@ body {
[for=menu-control].content-mask { [for=menu-control].content-mask {
display: block; display: block;
position: absolute; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
@ -137,7 +139,7 @@ body {
position: relative; position: relative;
margin: 5px 0 0 3px; margin: 5px 0 0 3px;
cursor: pointer; cursor: pointer;
transition: all .5s ease; transition: all .2s ease;
left:0px; left:0px;
top:0px top:0px
} }
@ -164,16 +166,18 @@ body {
.content-border { .content-border {
width: 100%; width: 100%;
height: 100%; /* height: 100%; */
position: absolute; position: absolute;
padding: 50px 50px 25px; padding: 50px 20px 25px;
overflow-y: scroll; overflow-y: scroll;
transition: padding .5s ease transition: padding .5s ease;
left: 50%;
transform:translateX(-50%)
} }
.content { .content {
min-height: 200px; min-height: 200px;
max-width: 800px; max-width: 1000px;
background-color: rgba(255, 255, 255, .5); background-color: rgba(255, 255, 255, .5);
border-radius: 15px; border-radius: 15px;
opacity: 1; opacity: 1;
@ -201,18 +205,18 @@ body {
text-align: left text-align: left
} }
.content span { .content>span {
font-size: 24px; font-size: 24px;
font-weight: bold font-weight: bold
} }
.content span+p:first-letter { .content>span+p:first-letter {
float: left; float: left;
font-size: 36px; font-size: 36px;
font-weight: bold font-weight: bold
} }
.content p~p { .content>p~p {
text-indent: 36px; text-indent: 36px;
} }
@ -241,7 +245,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 20px; min-height: 40px;
background-color: rgb(40, 40, 40); background-color: rgb(40, 40, 40);
cursor: move; cursor: move;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
@ -294,13 +298,15 @@ body {
} }
.mask { .mask {
position: absolute; position: fixed;
display: none; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(95, 95, 95, 0.7); background-color: rgba(95, 95, 95, 0.7);
z-index: 998; z-index: 998;
opacity: 0; opacity: 0;
top:0px;
left: 0px
} }
@keyframes fadeIn { @keyframes fadeIn {
@ -336,10 +342,10 @@ body {
width: 100%; width: 100%;
} }
input#menu-control:checked~label.content-mask { /* input#menu-control:checked~label.content-mask {
opacity: 0; opacity: 0;
visibility: hidden visibility: hidden
} } */
div.content-border { div.content-border {
padding: 50px 5px 25px; padding: 50px 5px 25px;
@ -357,6 +363,10 @@ body {
margin-right: auto margin-right: auto
} }
.content-border{
padding-left: 260px;
}
} }
@media screen and (max-width:480px) { @media screen and (max-width:480px) {