From 1f76b7768411927e1d003815ef39a1b08732b54d Mon Sep 17 00:00:00 2001 From: wolegca <2738076308@qq.com> Date: Sun, 15 Sep 2019 15:02:30 +0800 Subject: [PATCH] update layout --- index.css | 20 ++++++++++++++++++++ index.html | 4 +--- myui.css | 50 +++++++++++++++++++++++++++++++++----------------- 3 files changed, 54 insertions(+), 20 deletions(-) diff --git a/index.css b/index.css index f22f6d0..2255c33 100644 --- a/index.css +++ b/index.css @@ -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; diff --git a/index.html b/index.html index 1d5cd52..e86df22 100644 --- a/index.html +++ b/index.html @@ -12,9 +12,7 @@ -
- - +
AHPU 老中医的博客
diff --git a/myui.css b/myui.css index 747a1cc..1c76a42 100644 --- a/myui.css +++ b/myui.css @@ -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; } -} -@media screen and (min-width:700px) { - input#menu-control:checked+div.menu-container { - width: 350px; - left: 0 + .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 } - div.content { - margin-left: auto; - margin-right: auto + .msg-footer span:active{ + background-color:rgba(255,255,255,0.5) } - - .content-border{ - padding-left: 260px; - } - } @media screen and (max-width:480px) {