console
<body>
<div class="main-wrapper">
<header>
<div id="banner">
<div class="inner">
<h1 id="main">个人博客网站</h1>
<p class="sub-heading"><a href="http://jsrun.net/RcvKp">主动才会有故事，了解一下？</p >
<button class="main-btn"><a href="https://www.baidu.com">更多问题</button>
</div>
</div>
</header>
<div class="content">
<section class="green-section">
<div class="wrapper">
<div>
<h2>我的精彩收藏</h2>
<div class="hr"></div>
<p class="sub-heading"><a href="https://movie.douban.com/">电影作品</p >
</div>
<div class="icon-group">
<span class="icon">模块一</span>
<span class="icon">示例2</span>
<span class="icon">例子3</span>
</div>
</div>
</section>
<section class="purple-section">
</div>
</div>
</section>
</div>
<footer>
<ul class="share-group">
<li>广州东华职业学院</li>
<li>信息工程学院</li>
<li>18级移动一班</li>
</ul>
<div class="copy">
制作时间：2020年2月2号20时22分
</div>
</footer>
</div>
</body>
</html>
body{
margin: 0px;
padding: 0px;
background-color:#d7edf7;
font-family:Arial, Verdana,'Lucida Grande', Helvetica, sans-serif;
text-align: center;
color: #96dd24;
}
.clearfix:after
{
content: '';
display: block;
clear: both;
}
ul
{
margin: 0;
}
header
{
background: rgba(120, 241, 126, 0.767);
}
nav{
background: transparent;
height: 80px;
}
#banner{
background: transparent;
height: 600px;
}
nav ul{
list-style: none;
margin: 0;
float: right;
}
nav ul li, nav .logo
{
display: inline-block;
line-height: 80px;
margin: 5px;
}
nav ul li a{
line-height: 50px;
text-decoration: none;
display: inline-block;
height: inherit;
color: #fff;
}
nav ul li.logo{
float: left;
padding: 10px;
}
#banner .inner
{
max-width: 300px;
text-align: center;
margin: 0 auto;
position: relative;
top: 160px;
}
#banner .inner h1
{
margin: 0;
color: #fff;
}
button
{
border: none;
background: rgb(235, 230, 168);
color: #eee;
}
#banner button
{
padding: 14px 60px;
}
#banner .inner .more
{
margin-top: 280px;
color: #fff;
}
.sub-heading
{
line-height: 30px;
margin: 30px 0;
color: rgb(179, 40, 40);
}
.logo
{
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
}
.logo a
{
color: #fff;
}
h2
{
font-size: 30px;
}
h3
{
font-size: 24px;
}
p
{
font-size: 18px;
letter-spacing: 1px;
}
.sub-heading
{
font-size: 18px;
}
#main-btn
{
padding: 14px 28px;
font-size: 20px;
letter-spacing: 4px;
border-collapse: 6px;
background: #18a;
}
.green-section
{
background: rgba(231, 235, 33, 0.938), 247, 255);
color: #fff;
text-align: center;
padding: 100px 0px;
}
.green-section .hr
{
background: #079494;
width: 60%;
}
.green-section .icon-group .icon
{
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid #0D6F7C;
transform: rotate(45deg);
margin: 30px;
}
.icon-group
{
margin-top: 60px;
}
.wrapper
{
max-width: 1080px;
margin: 0 auto;
}
.gray-section
{
background: rgb(233, 108, 6);
color: #fff;
}
.gray-section .img-section
{
width: 45%;
margin: 0;
}
.img-section img
{
width: 100%
}
.gray-section .text-section
{
width: 55%;
}
.article-preview > div
{
float: left;
font-size: 0;
}
.article-preview:nth-child(odd)
{
background-color: rgba(255,255,255,0.05);
}
.article-preview:after
{
content: '';
display: block;
clear: both;
}
.text-section
{
position: relative;
top: 68px;
left: 50px;
}
.text-section h2
{
margin-bottom: 20px;
}
.text-section .sub-heading
{
font-size: 22px;
margin-top: 0;
}
.text-section p
{
font-size: 18px;
letter-spacing: 1px;
}
.text-section > *{
max-width: 90%;
}
.purple-section
{
padding: 80px;
background: #3F3965;
color: #fff;
}
.purple-section .heading-wrapper
{
text-align: center;
}
.purple-section .hr
{
background: #373259;
width: 100%;
}
.card
{
float: left;
width: 50%;
min-height: 300px;
padding: 50px;
-webkit-box-sizing:border-box;
-mon-box-sizing:border-box;
box-sizing:border-box;
}
.card:first-child
{
background: rgba(0,0,0,0.04);
}
.card:nth-child(2)
{
background: rgba(0,0,0,0.08);
}
.card:nth-child(3)
{
background: rgba(0,0,0,0.12);
}
.card:nth-child(4)
{
background: rgba(0,0,0,0.16);
}
.card:nth-child(5)
{
background: rgba(0,0,0,0.20);
}
.card:nth-child(6)
{
background: rgba(0,0,0,0.24);
}
footer
{
background: #333;
color: #fff;
text-align: center;
min-height: 200px
}
ul.share-group
{
display: block;
width: 1080px;
margin: 0 auto;
padding: 50px;
}
.share-group li
{
display: inline-block;
padding: 10px;
}
.copy
{
padding-bottom: 30px;
}
.main-wrapper
{
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
#main{
height: 30px;
text-align: center;
font-size: 40px;
font-weight: bolder;
text-shadow: 15px 5px 15px;
animation: change 3s linear 0s infinite;
}
@keyframes change {
0% {color:cornsilk}
50% {color: rgb(90, 154, 226);}
100% {color:darkmagenta}
}