console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="main-wrapper">
<header>
<nav>
</nav>
<div id="banner">
<div class="inner">
<h1>个人博客网站</h1>
<p class="sub-heading">围观其实也是一种态度，你觉得呢？</p >
<button class="main-btn">了解我</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">我的电影院</p >
</div>
<div class="icon-group">
<span class="icon">item1</span>
<span class="icon">item2</span>
<span class="icon">item3</span>
</div>
</div>
</section>
<section class="gray-section">
<div class="article-preview">
<div class="img-section">
< img src="img/icon1.png" alt=""></div>
<div class="text-section">
<h2>我的豆瓣</h2>
<a href="http://jsrun.net/QJfKp">
<div class="sub-heading">叫我胜哥</div>
<p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p >
</div>
</div>
<div class="article-preview">
<div class="text-section">
<h2>我的兴趣爱好</h2>
<div class="sub-heading">你好</div>
<p>篮球，音乐，游戏等等...</p >
</div>
<div class="img-section">
< img src="img/icon2.png" alt="">
</div>
</div>
<div class="text-section">
<h2>我的空间</h2>
<div class="sub-heading">你好</div>
<p><nav>
<h3>My 博客</h3>
<ul>
<li><a href="#">我的喜欢</a>
<li><a href="#">我的音乐</a>
<li><a href="#">我的电影</a>
<li><a href="#">我的空间</a>
</nav></p >
</div>
</div>
</section>
<section class="purple-section">
</div>
</div>
</section>
</div>
<footer>
<ul class="share-group">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<div class="copy">
© 李胜——2020.06.28
</div>
</footer>
</div>
</body>
</html>
.clearfix:after
{
content: '';
display: block;
clear: both;
}
ul
{
margin: 0;
}
header
{
background: rgba(0,0,0,0.4);
}
nav{
background: transparent;
height: 50px;
}
#banner{
background: transparent;
height: 700px;
}
nav ul{
list-style: none;
margin: 0;
float: right;
}
nav ul li, nav .logo
{
display: inline-block;
line-height: 50px;
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: #089DB0;
color: #eee;
}
#banner button
{
padding: 14px 60px;
}
#banner .inner .more
{
margin-top: 280px;
color: #fff;
}
.sub-heading
{
line-height: 30px;
margin: 30px 0;
color: #fff;
}
.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;
}
.hr
{
width: 100%;
height: 2px;
margin: 0 auto;
margin: 20px auto;
}
.sub-heading
{
font-size: 18px;
}
#main-btn
{
padding: 14px 28px;
font-size: 20px;
letter-spacing: 4px;
border-collapse: 6px;
background: #18a;
}
.green-section
{
background: #089DB0;
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: #252F34;
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: #444 url(img/icon04.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}