diff --git a/css/heepo.css b/css/heepo.css index ef3be5e..e0a6595 100644 --- a/css/heepo.css +++ b/css/heepo.css @@ -1,58 +1,232 @@ .heepo, article, section, header, p{ - margin: 0 ; - padding: 0 ; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + -webkit-webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -.heepo{ position: relative; - overflow: hidden; - font-family: Georgia, "Times New Roman", "Microsoft YaHei", +.heepo { + margin: 0 auto; + text-align: center; + font-family: Georgia, "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif; - } -.about{ - width: 100%; - height: 14px; - font-size: 25px; - color: black; - background-color: white; position: relative; - overflow: hidden; - padding: 18px; +} +.about { + background-color: #C7C2B8; + font-weight: bold; +} +.about .teamName { + width: 6em; + height: 1em; +} +.logo img { + width: 2em; + height: 2em; } -.about .teamName{position: absolute;left: 20px;top: 10px;font-weight: bold;} -.about .logo{position: absolute;right: 57px;top: 12px;} -.about .logo a{text-decoration: none;} - -.under{ - width: 360px; - padding: 20px; - font-size: 20px; +.heepo section{ background-color: #5DB2A2; - border: 1px solid #ccc; - border-radius: 20px; - margin-left: 200px; - margin-top: 70px; - margin-bottom: 20px; - line-height: 1.5em; + width: 75%; + line-height: 2em; + padding: 0.7em; + border-radius: 1.5em; + color: #765555; +} +.under { + margin: 5em 0 0 17%; +} +.under img{ + float: left; + margin: -3.3em 0 0 -4.5em; +} +.clearfix:after { + content:" "; + display:block; + height:0; + visibility:hidden; + clear:both; +} +.clearfix { + *zoom:1; +} +.post { + position: absolute; + right: 17%; + margin-top: 5em; +} +.post img{ + float: right; + margin: -3em -4.5em 0 0; +} +.under img, .post img { + width: 3em; + height: 3em; } -.under img{float: left; margin: -50px 0 0 -100px;} +@media only screen and (min-width: 20em) { +.about .teamName { + margin: 3em 0 1.5em; + width: 18em; + height: 3em; +} +.about { + height: 11em; +} +.heepo section{ + font-size: 1em; + line-height: 2em; + padding: 1.5em 0.7em; + background-color: #77757E; + -webkit-transition: all 1s ease-in-out; + transiton: all 1s ease-in-out; +} +.under { + margin: 2.5em 0 0 55%; + -webkit-transition: all 1s ease-in-out; + transiton: all 1s ease-in-out; +} +.under p, .post p { + opacity: 0; + -webkit-transition: all 1s ease-in-out; + transiton: all 1s ease-in-out; +} +.under img, .post img { + width: 6em; + height: 6em; + -webkit-transition: all 1s ease-in-out; + transiton: all 1s ease-in-out; +} +.under:hover{ + margin: 2.5em 0 0 17%; + background-color: #C7C2B8; + } + +.under:hover p, .post:hover p { + opacity: 1; + } +.under:hover img { + width: 3em; + height: 3em; +} +.post { + margin-top: 2.5em; + right: 52%; +} +.post:hover { + right: 17%; + background-color: #C7C2B8; +} +.post:hover img { + width: 3em; + height: 3em; +} -.post{ - width: 360px; - padding: 20px; - font-size: 20px; - background-color: #5DB2A2; - border: 1px solid #ccc; - border-radius: 20px; - margin-right: 200px; - float: right; - margin-top: 50px; - margin-bottom: 50px; - line-height: 1.5em; } +@media only screen and (min-width: 30em) { + .about { + height: 3em; + } + .about .teamName { + margin: 0; + padding: 0; + width: 12em; + height: 2em; + font-size: 1em; + position: absolute; + left: 1.5em; + top: 0.5em; + } + .about .logo { + position: absolute; + right: 1.5em; + top: 0.6em; + } + .heepo section{ + background-color: #77757E; + font-size: 0.8em; + margin: 3em 0 0 0; + padding: 0; + width: 39%; + position: absolute; + -webkit-transition: all 1s ease-in-out; + transiton: all 1s ease-in-out; + } + .under { + left: 8%; + } + .post { + right: 8%; + } + .under img { + float: none; + margin: 0; + padding: 0; + } + .under:hover, .post:hover { + margin: 5em 0 0 0; + padding: 2em 2em 0 2em; + } + .under:hover { + + } + .post:hover { + right: 8%; + } + .under:hover img{ + margin: 0 0 0 -105%; + width: 2em; + height: 2em; + } + .post img { + float: none; + margin: 0; + padding: 0; + } + .post:hover img{ + margin: 0 -105% 0 0; + width: 2em; + height: 2em; + } + -.post img{float: right; margin: -50px -100px 0 0;} +} + +@media only screen and (min-width: 48em) { + .about { + margin-top: 3em; + height: 3.5em; + } + .about .teamName { + top: 0.8em; + } + .about img { + margin-top: 0.3em; + } + .heepo section{ + top: 8em; + font-size: 1em; + } + .under img, .post img { + width: 7em; + height: 7em; + -webkit-transition: all 1s ease-in-out; + transiton: all 1s ease-in-out; + } + .under:hover, .post:hover { + width: 33%; + + } + .under:hover img, .post:hover img { + width: 2em; + height: 2em; + } +} diff --git a/css/hxl.css b/css/hxl.css index 4288310..3d0318c 100644 --- a/css/hxl.css +++ b/css/hxl.css @@ -8,7 +8,7 @@ a:hover{ text-decoration:underline;} width:410px; position:absolute; left: 210px; - top: 85px; + top: 75px; } .mainbody{ text-align:left; @@ -39,5 +39,5 @@ li span{ display:block; overflow:hidden; position: relative; - left:35px; + left:-55px; } diff --git a/css/main.css b/css/main.css index d8d9c0f..8d60b36 100644 --- a/css/main.css +++ b/css/main.css @@ -95,10 +95,10 @@ ul { background: #992211; } .page4 { - background: #ff00ff; + background: #CED9DB; } .page5 { - background: #00ff00; + background: #77757E; } .page6 { background: #ff00ff; @@ -109,21 +109,22 @@ ul { #navBar { z-index: 3; position: absolute; - top: 10%; - right: 3%; + top: 25%; + right: 2%; } #navBar .active { - background: #ccc; + background: black; } #navBar li { cursor: pointer; - margin-bottom: 10px; - transition: all .7s ease; - border-radius: 50%; - line-height: 40px; - text-align: center; - width: 40px; - height: 40px; + margin: 1.5em 0; + transition: all .7s ease; + background-color: #92918A; + border-radius: 50%; + + text-align: center; + width: 10px; + height: 10px; } .main{ margin: 15% auto; diff --git a/images/Name.jpg b/images/Name.jpg new file mode 100644 index 0000000..0ede743 Binary files /dev/null and b/images/Name.jpg differ diff --git a/images/au.gif b/images/au.gif index 8ad20bb..95ce8b3 100644 Binary files a/images/au.gif and b/images/au.gif differ diff --git a/images/bupt.gif b/images/bupt.gif index 9cc4112..d8ad5e3 100644 Binary files a/images/bupt.gif and b/images/bupt.gif differ diff --git a/index.html b/index.html index 318d754..96f22cc 100644 --- a/index.html +++ b/index.html @@ -73,28 +73,28 @@

My Photo

-

队不队－拉木

+
-
-

那时年少轻狂，总以为可以仗剑肆意他乡

-

殊不知天大地大，浮尘迷乱方向

- +
+

通信小兵，信号处理

+

FPGA/单片机开发，PCB设计制作

+
-

非对错，只知道自己几斤几两

-

掌起舵，不愿再彷徨

- +

CS Rookie， 信安方向

+

热爱Linux/Web等技术，兴趣广泛

+
@@ -120,13 +120,13 @@

结束语