效果图
1.html部分
index
2.css部分
/*basic*/
@import "https://fonts.googleapis.com/css?family=Raleway:200,500,700,800";
@font-face {
font-family:icomoon;
src:url(../fonts/icomoon.eot?rretjt);
src:url(../fonts/icomoon.eot?#iefixrretjt) format('embedded-opentype'),
url(../fonts/icomoon.woff?rretjt) format('woff'),
url(../fonts/icomoon.ttf?rretjt) format('truetype'),
url(../fonts/icomoon.svg?rretjt#icomoon) format('svg');
font-weight:400;
font-style:normal
}
[class^=icon-],[class*=" icon-"] {
font-family:icomoon;
speak:none;
font-style:normal;
font-weight:400;
font-variant:normal;
text-transform:none;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
body,html {
font-size:100%;
padding:0;
margin:0
}
*,*:after,*:before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.clearfix:before,.clearfix:after {
content:" ";
display:table
}
.clearfix:after {
clear:both
}
body {
background:#f9f7f6;
color:#404d5b;
font-weight:500;
font-size:1.05em;
font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif
}
a {
color:#2fa0ec;
text-decoration:none;
outline:none
}
a:hover,a:focus {
color:#74777b
}
.htmleaf-container {
margin:0 auto;
text-align:center;
overflow:hidden
}
.htmleaf-content {
font-size:150%;
padding:1em 0
}
.htmleaf-content h2 {
margin:0 0 2em;
opacity:.1
}
.htmleaf-content p {
margin:1em 0;
padding:5em 0 0;
font-size:.65em
}
.bgcolor-1 {
background:#f0efee
}
.bgcolor-2 {
background:#f9f9f9
}
.bgcolor-3 {
background:#e8e8e8
}
.bgcolor-4 {
background:#2f3238;
color:#fff
}
.bgcolor-5 {
background:#df6659;
color:#521e18
}
.bgcolor-6 {
background:#2fa8ec
}
.bgcolor-7 {
background:#d0d6d6
}
.bgcolor-8 {
background:#3d4444;
color:#fff
}
.bgcolor-9 {
background:#ef3f52;
color:#fff
}
.bgcolor-10 {
background:#64448f;
color:#fff
}
最低0.47元/天 解锁文章
844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
