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-12 13:37:38 +08:00
parent 3d00141cd0
commit 95bc1fc2e2
2 changed files with 56 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
index.css
View File

@ -9,7 +9,8 @@ html {
body {
background: url(star-catcher-astronaut-catching-stars-for-research-astronaut.jpg) no-repeat center;
background-size: cover;
width: 200%
width: 200%;
z-index:0
}
input#menu-control {
@ -27,7 +28,9 @@ div.menu-container {
box-sizing: border-box;
padding-top: 50px;
transition: all .5s ease;
overflow: hidden
overflow: hidden;
background-color:rgba(255, 255, 255, 0.5);
z-index:1
}
div.menu-container ul {
@ -55,7 +58,7 @@ div.menu-container ul li a {
}
div.menu-container ul li a:hover {
background-color: rgba(255, 0, 0, .5)
background-color: rgba(0, 0, 0, .5)
}
div.menu-container ul>li+li:before {
@ -65,14 +68,28 @@ div.menu-container ul>li+li:before {
margin: 2px 2px
}
label[for=menu-control] {
label[for=menu-control].menu-button-container {
display: block;
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 30px;
cursor: pointer
cursor: pointer;
z-index:3
}
label[for=menu-control].content-mask{
display: block;
position: relative;
width:50%;
height:100%;
background-color:rgba(25, 25, 25,.9);
float: left;
z-index: 1;
transition:all .5s ease;
opacity: 0;
visibility: hidden
}
div.menu-button span {
@ -85,9 +102,10 @@ div.menu-button span {
div.content-border {
width: 50%;
width: 100%;
height: 100%;
float: left;
/*float: left;*/
position: absolute;
box-sizing: border-box;
padding: 50px 50px 25px;
overflow-y: scroll
@ -102,13 +120,22 @@ div.content {
transition: opacity .5s ease,transform .5s ease;
cursor: pointer;
padding: 15px;
margin-bottom: 25px
margin-bottom: 25px;
text-overflow:ellipsis;
font-size: 24px;
font-weight: bold;
z-index: 1
}
div.content:hover {
opacity: 1;
}
input#menu-control:checked~label.content-mask{
opacity: 1;
visibility: visible
}
@media screen and (max-width:700px) {
input#menu-control:checked+div.menu-container {
width: 50%;
@ -135,3 +162,16 @@ div.content:hover {
*{
-webkit-tap-highlight-color: transparent
}
#blog-title{
color:white;
white-space: nowrap;
position: fixed;
top:0px;
left:0px;
text-align: center;
font-size: 24px;
background-color:rgba(25, 25, 25,.9);
width:100%;
z-index:2
}

12
index.html
View File

@ -11,6 +11,7 @@
</head>
<body>
<div id="blog-title">AHPU 老中医的博客</div>
<input type="checkbox" id="menu-control">
<div class="menu-container">
<ul>
@ -18,7 +19,8 @@
<li><a href="javascript:void(0);">关于</a></li>
</ul>
</div>
<label for="menu-control">
<label for="menu-control" class="content-mask"></label>
<label for="menu-control" class="menu-button-container">
<div class="menu-button">
<span></span>
<span></span>
@ -28,16 +30,16 @@
<div class="content-border">
<div class="content">
你就是个垃圾
笔记1
</div>
<div class="content">
你就是个垃圾
笔记2
</div>
<div class="content">
你就是个垃圾
笔记3
</div>
<div class="content">
你就是个垃圾
笔记4
</div>
</div>