update the layout
This commit is contained in:
parent
86b7748704
commit
c45d42996a
15
base.js
15
base.js
@ -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
2
drag.js
@ -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
7
highlight.css
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
.css-keyword{
|
||||||
|
color:#ff7800!important
|
||||||
|
}
|
||||||
|
|
||||||
|
.css-value{
|
||||||
|
color:#090!important
|
||||||
|
}
|
||||||
45
index.css
45
index.css
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
91
index.html
91
index.html
@ -7,54 +7,71 @@
|
|||||||
<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 id="blog-title">AHPU 老中医的博客</div>
|
<div class="container">
|
||||||
<input type="checkbox" id="menu-control">
|
|
||||||
<div class="menu-container">
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">首页</a></li>
|
|
||||||
<li><span>关于</span></li>
|
|
||||||
<li><label for="menu-control">返回</label></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<label for="menu-control" class="content-mask"></label>
|
|
||||||
<label for="menu-control" class="menu-button-container">
|
|
||||||
<div class="menu-button">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="content-border">
|
|
||||||
<div class="content">
|
|
||||||
<span>笔记1</span>
|
|
||||||
<p>在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那？下面小编给大家分享一下CSS如何实现首字下沉效果</p>
|
|
||||||
<p>首先准备一个HTML文档，然后在文档中准备好一段文字，如下图所示</p>
|
|
||||||
<img src="images/note1/1.jpg" alt="截图1">
|
|
||||||
<p>接下来就去除浏览器的间隙，将margin以及padding都设置为0。然后设置body的样式，如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了，设置行间距，段落宽度等。然后定位到p元素的first-child，然后找到其第一个字，这里用到的是first-letter，如下图所示
|
|
||||||
</p>
|
|
||||||
<img src="images/note1/2.jpg" alt="截图2">
|
|
||||||
<p>最后我们运行以后，你会看到如下图所示的效果，第一个字是不是下沉了</p>
|
|
||||||
<p>综上所述，实现首字下沉效果主要运用了CSS的first-letter选择器，给其添加样式即可</p>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<span>笔记2</span>
|
|
||||||
|
|
||||||
|
<div id="blog-title">AHPU 老中医的博客</div>
|
||||||
|
<input type="checkbox" id="menu-control">
|
||||||
|
<div class="menu-container">
|
||||||
|
<ul>
|
||||||
|
<li><a href="/">首页</a></li>
|
||||||
|
<li><span>关于</span></li>
|
||||||
|
<li><label for="menu-control">返回</label></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<label for="menu-control" class="content-mask"></label>
|
||||||
<span>笔记3</span>
|
<label for="menu-control" class="menu-button-container">
|
||||||
|
<div class="menu-button">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
</div>
|
<div class="content-border">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<span>笔记4</span>
|
<span>笔记1：首字下沉的技巧</span>
|
||||||
|
<p>在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那？下面小编给大家分享一下CSS如何实现首字下沉效果</p>
|
||||||
|
<p>首先准备一个HTML文档，然后在文档中准备好一段文字，如下图所示</p>
|
||||||
|
<img src="images/note1/1.jpg" alt="截图1">
|
||||||
|
<p>接下来就去除浏览器的间隙，将margin以及padding都设置为0。然后设置body的样式，如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了，设置行间距，段落宽度等。然后定位到p元素的first-child，然后找到其第一个字，这里用到的是first-letter，如下图所示
|
||||||
|
</p>
|
||||||
|
<img src="images/note1/2.jpg" alt="截图2">
|
||||||
|
<p>最后我们运行以后，你会看到如下图所示的效果，第一个字是不是下沉了</p>
|
||||||
|
<p>综上所述，实现首字下沉效果主要运用了CSS的first-letter选择器，给其添加样式即可</p>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<span>笔记2：css选择器</span>
|
||||||
|
<p>有时候我们会想选择众多兄弟元素中特定次序的元素，这个怎么通过css来选中呢？这里有个技巧，就是巧用css的child选择器</p>
|
||||||
|
<p>1、first-child</p>
|
||||||
|
<p>first-child表示选择列表中的第一个标签。代码如下：
|
||||||
|
<pre><code></code></pre>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<span>笔记3</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<span>笔记4</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-border">
|
||||||
|
<div class="sidebar">
|
||||||
|
<div>
|
||||||
|
往期回顾
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
content 2
|
||||||
|
</div>
|
||||||
|
</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
48
myui.css
@ -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) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user