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 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{ .sidebar-border{
position: absolute; position: absolute;
left:0px; left:0px;

4
index.html
View File

@ -12,9 +12,7 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container clearfix">
<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">

50
myui.css
View File

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