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

update layout

Browse Source
This commit is contained in:
wolegca 2019-09-15 15:02:30 +08:00
parent c45d42996a
commit 1f76b77684
3 changed files with 54 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.css
View File

@ -5,6 +5,26 @@
position: relative
}
.container:before{
content:'';
display: block;
position:fixed;
top:0px;
left:0px;
height:100%;
width:100%;
background: black url(bg.jpg) no-repeat center;
background-size: cover
}
.clearfix:after{
content:'';
display: block;
height:0px;
clear: both;
visibility: hidden
}
.sidebar-border{
position: absolute;
left:0px;

4
index.html
View File

@ -12,9 +12,7 @@
</head>
<body>
<div class="container">
<div class="container clearfix">
<div id="blog-title">AHPU 老中医的博客</div>
<input type="checkbox" id="menu-control">
<div class="menu-container">

52
myui.css
View File

@ -13,8 +13,6 @@ html {
}
body {
background: black url(bg.jpg) repeat-y center;
background-size: cover;
width: 100%;
z-index: 0;
position: relative;
@ -123,7 +121,9 @@ body {
z-index: 1;
transition: all .2s ease;
opacity: 0;
visibility: hidden
visibility: hidden;
top:0px;
left:0px
}
#menu-control:checked~label.content-mask {
@ -167,7 +167,7 @@ body {
.content-border {
width: 100%;
/* height: 100%; */
position: absolute;
position: relative;
padding: 50px 20px 25px;
overflow-y: scroll;
transition: padding .5s ease;
@ -329,6 +329,23 @@ body {
}
}
@media screen and (min-width:700px) {
input#menu-control:checked+div.menu-container {
width: 350px;
left: 0
}
div.content {
margin-left: auto;
margin-right: auto
}
.content-border{
padding-left: 260px;
}
}
@media screen and (max-width:700px) {
body {
width: 100%
@ -350,23 +367,22 @@ body {
div.content-border {
padding: 50px 5px 25px;
}
.msg-footer span{
display:block;
position: absolute;
height:100%;
width:100%;
top:0px;
left:0px;
text-align: center;
padding-top:10px;
border-radius: 0 0 15px 15px
}
@media screen and (min-width:700px) {
input#menu-control:checked+div.menu-container {
width: 350px;
left: 0
.msg-footer span:active{
background-color:rgba(255,255,255,0.5)
}
div.content {
margin-left: auto;
margin-right: auto
}
.content-border{
padding-left: 260px;
}
}
@media screen and (max-width:480px) {