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();
|
||||
m.remove();
|
||||
},300);
|
||||
message.alertCode = '';
|
||||
});
|
||||
})();
|
||||
|
||||
var message = new function () {
|
||||
this.alertCode = '';
|
||||
this.alert = function (header, content) {
|
||||
if(message.alertCode){
|
||||
console.warn('存在未关闭的提示框');
|
||||
return;
|
||||
}
|
||||
|
||||
var id = uuid();
|
||||
var html =
|
||||
'<div class="msg-container" id="mc-' + id + '">' +
|
||||
'<div class="msg-header" id="mh-'+id+'">' +
|
||||
header +
|
||||
(header || '提示框') +
|
||||
'</div>' +
|
||||
'<div class="msg-content">' +
|
||||
content +
|
||||
(content || '提示内容') +
|
||||
'</div>' +
|
||||
'<div class="msg-footer">'+
|
||||
'<span>关闭</span>'+
|
||||
@ -47,9 +54,9 @@ var message = new function () {
|
||||
'</div>' +
|
||||
'<div class="mask"></div>';
|
||||
$(document.body).append(html);
|
||||
$('.mask').show().css('animation','fadeIn .2s forwards');
|
||||
$('.mask').css('animation','fadeIn .2s forwards');
|
||||
$('#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);
|
||||
Ry = event.pageY - (parseInt(target.css("top")) || 0);
|
||||
M = true;
|
||||
scaleChanged = false;
|
||||
})
|
||||
.mouseup(function (event) {
|
||||
M = false;
|
||||
@ -23,7 +22,6 @@
|
||||
left: event.pageX - Rx
|
||||
});
|
||||
}
|
||||
scaleChanged = true;
|
||||
});
|
||||
}
|
||||
})(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
|
||||
}
|
||||
}
|
||||
25
index.html
25
index.html
@ -7,10 +7,14 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<link rel="stylesheet" href="myui.css">
|
||||
<link rel="stylesheet" href="highlight.css">
|
||||
<title>LAOZHONGYI BLOG</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
|
||||
<div id="blog-title">AHPU 老中医的博客</div>
|
||||
<input type="checkbox" id="menu-control">
|
||||
<div class="menu-container">
|
||||
@ -31,7 +35,7 @@
|
||||
|
||||
<div class="content-border">
|
||||
<div class="content">
|
||||
<span>笔记1</span>
|
||||
<span>笔记1：首字下沉的技巧</span>
|
||||
<p>在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那？下面小编给大家分享一下CSS如何实现首字下沉效果</p>
|
||||
<p>首先准备一个HTML文档，然后在文档中准备好一段文字，如下图所示</p>
|
||||
<img src="images/note1/1.jpg" alt="截图1">
|
||||
@ -42,8 +46,11 @@
|
||||
<p>综上所述，实现首字下沉效果主要运用了CSS的first-letter选择器，给其添加样式即可</p>
|
||||
</div>
|
||||
<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 class="content">
|
||||
<span>笔记3</span>
|
||||
@ -53,8 +60,18 @@
|
||||
<span>笔记4</span>
|
||||
|
||||
</div>
|
||||
<div class="sidebar-border">
|
||||
<div class="sidebar">
|
||||
<div>
|
||||
往期回顾
|
||||
</div>
|
||||
<div>
|
||||
content 2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="mask"></div> -->
|
||||
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="drag.js"></script>
|
||||
|
||||
48
myui.css
48
myui.css
@ -8,15 +8,17 @@ body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden
|
||||
/* height: 100%; */
|
||||
/* overflow: hidden */
|
||||
}
|
||||
|
||||
body {
|
||||
background: black url(bg.jpg) repeat-y center;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
z-index: 0
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
display: block
|
||||
}
|
||||
|
||||
#menu-control {
|
||||
@ -39,8 +41,8 @@ body {
|
||||
|
||||
.menu-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
position: fixed;
|
||||
/* float: left; */
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
@ -113,7 +115,7 @@ body {
|
||||
|
||||
[for=menu-control].content-mask {
|
||||
display: block;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
@ -137,7 +139,7 @@ body {
|
||||
position: relative;
|
||||
margin: 5px 0 0 3px;
|
||||
cursor: pointer;
|
||||
transition: all .5s ease;
|
||||
transition: all .2s ease;
|
||||
left:0px;
|
||||
top:0px
|
||||
}
|
||||
@ -164,16 +166,18 @@ body {
|
||||
|
||||
.content-border {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* height: 100%; */
|
||||
position: absolute;
|
||||
padding: 50px 50px 25px;
|
||||
padding: 50px 20px 25px;
|
||||
overflow-y: scroll;
|
||||
transition: padding .5s ease
|
||||
transition: padding .5s ease;
|
||||
left: 50%;
|
||||
transform:translateX(-50%)
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 200px;
|
||||
max-width: 800px;
|
||||
max-width: 1000px;
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
border-radius: 15px;
|
||||
opacity: 1;
|
||||
@ -201,18 +205,18 @@ body {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.content span {
|
||||
.content>span {
|
||||
font-size: 24px;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.content span+p:first-letter {
|
||||
.content>span+p:first-letter {
|
||||
float: left;
|
||||
font-size: 36px;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.content p~p {
|
||||
.content>p~p {
|
||||
text-indent: 36px;
|
||||
}
|
||||
|
||||
@ -241,7 +245,7 @@ body {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
min-height: 40px;
|
||||
background-color: rgb(40, 40, 40);
|
||||
cursor: move;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
@ -294,13 +298,15 @@ body {
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
display: none;
|
||||
position: fixed;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(95, 95, 95, 0.7);
|
||||
z-index: 998;
|
||||
opacity: 0;
|
||||
top:0px;
|
||||
left: 0px
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
@ -336,10 +342,10 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input#menu-control:checked~label.content-mask {
|
||||
/* input#menu-control:checked~label.content-mask {
|
||||
opacity: 0;
|
||||
visibility: hidden
|
||||
}
|
||||
} */
|
||||
|
||||
div.content-border {
|
||||
padding: 50px 5px 25px;
|
||||
@ -357,6 +363,10 @@ body {
|
||||
margin-right: auto
|
||||
}
|
||||
|
||||
.content-border{
|
||||
padding-left: 260px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width:480px) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user