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>
<li class="logo">< a href=" ">黄墨一</ a></li>
<ul>
<li>< a href="#" class="active">首页</ a></li>
<li>< a href="#">精品博客</ a></li>
<li>< a href="#">微博</ a></li>
<li>< a href="#">留言</ a></li>
</ul>
</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>
<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>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 class="img-section">
< img src="img/icon2.png" alt="">
</div>
</div>
<div class="article-preview">
<div class="img-section">
< img src="img/icon3.png" alt="">
</div>
<div class="text-section">
<h2>又一个标题</h2>
<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>
</section>
<section class="purple-section">
<div class="wrapper">
<div class="heading-wrspper">
<h2>又是一个标题</h2>
<div class="hr"></div>
<div class="sub-heading">
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.
</div>
</div>
<div class="card-group
clearfix">
<div class="card">
<h3>标题三</h3>
<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 class="card">
<h3>标题三</h3>
<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="card-group
clearfix">
<div class="card">
<h3>标题三</h3>
<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 class="card">
<h3>标题三</h3>
<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="card-group
clearfix">
<div class="card">
<h3>标题三</h3>
<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 class="card">
<h3>标题三</h3>
<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>
</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">
© 黄墨一-2017
</div>
</footer>
</div>
</body>
</html>
文章最后发布于: 2017-10-13
.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;
}