学习笔记——慕课网HTML5+CSS3扁平化风格博客
2017-03-27 本文已影响0人
fatcatcoder
直接贴代码吧，需要的图片另存为下载到自己电脑上，给需要的同学作为参考：
效果图：
2017-03-27_100146_副本.jpg
网页用图：
banner.jpg
pic01.jpg
pic02.jpg
pic03.jpg
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邹小胖的主页</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="main-wrapper">
<header> <!-- 页头开始 -->
<nav>
<div class="logo"><a href="./index.html">邹小胖</a></div>
<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">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<button id="main-btn">了解我</button>
<div class="more">
更多
</div>
</div>
</div>
</header> <!-- 页头结束 -->
<div class="content"> <!-- 内容开始 -->
<section class="green-section">
<div class="wrapper">
<div>
<h2>一个标题</h2>
<div class="hr"></div>
<p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</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 clearfix">
<div class="img-section">
</div>
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">
我是副标题你好
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam commodi nulla, blanditiis itaque veritatis. Voluptas ratione optio sint enim non, sapiente, odio, assumenda porro rerum deserunt a libero officia unde.</p>
</div>
</div>
<div class="article-preview clearfix">
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">
我是副标题你好
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam commodi nulla, blanditiis itaque veritatis. Voluptas ratione optio sint enim non, sapiente, odio, assumenda porro rerum deserunt a libero officia unde.</p>
</div>
<div class="img-section">
</div>
</div>
<div class="article-preview clearfix">
<div class="img-section">
</div>
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">
我是副标题你好
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam commodi nulla, blanditiis itaque veritatis. Voluptas ratione optio sint enim non, sapiente, odio, assumenda porro rerum deserunt a libero officia unde.</p>
</div>
</div>
</section>
<section class="purple-section">
<div class="wrapper">
<div class="heading-wrapper">
<h2>又一个标题</h2>
<div class="hr"></div>
<div class="sub-heading">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quo placeat, magni. Debitis numquam sunt odit nisi quo officiis dolores expedita, distinctio quos neque molestiae ducimus iure commodi optio provident?
</div>
</div>
<div class="card-group clearfix">
<div class="card">
<h3>标题三</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.</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">
© 邹小胖
</div>
</footer>
</div>
</body>
</html>
h1 {
padding: 12px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
h2 {
font-size: 25px;
margin: 0;
}
h3 {
font-size: 22px;
}
p {
font-size: 18px;
letter-spacing: 1px;
}
.hr {
height: 2px;
width: 100%;
margin: 20px auto;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
ul {
margin: 0;
}
header {
background: rgba(0, 0, 0, 0.4);
}
nav {
background: transparent;
height: 50px;
position: fixed;
left:0;
right: 0;
}
nav ul {
list-style: none;
float: right;
margin-right: 30px;
}
nav ul li, nav .logo {
display: inline-block;
line-height: 50px;
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
line-height: 50px;
display: inline-block;
height: inherit;
color: #fff;
}
nav .logo {
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
float: left;
margin-left: 30px;
}
nav .logo a {
color: #fff;
text-decoration: none;
}
.active {
border-bottom: 4px solid #fff;
}
#banner {
background: transparent;
height: 700px;
color: #fff;
}
#banner .inner {
max-width: 300px;
text-align: center;
margin: 0 auto;
position: relative;
top: 160px;
}
#banner .inner h1 {
margin: 0;
}
#banner .inner .more {
margin-top: 230px;
}
.sub-heading {
line-height: 30px;
margin: 30px 0;
}
button {
border: none;
background: #333;
color: #eee;
padding: 10px;
}
#main-btn {
padding: 14px 28px;
font-size: 20px;
letter-spacing: 4px;
border-radius: 6px;
background: #18a;
}
.green-section {
text-align: center;
background: #089080;
color: #fff;
padding: 100px 0;
}
.green-section .hr {
background: #fff;
width: 60%;
}
.green-section .icon-group .icon {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid #0D6F7C;
transform: rotate(45deg);
margin: 20px;
}
.icon-group {
margin-top: 30px;
}
.wrapper {
max-width: 1080px;
margin: 0 auto;
}
.sub-heading {
font-size: 18px;
}
.gray-section {
background: #252F34;
color: #fff;
}
.gray-section .img-section {
width: 45%;
}
.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);
}
.text-section {
position: relative;
top: 68px;
left: 50px;
}
.text-section > * {
max-width: 90%;
}
.text-section h2 {
margin-bottom: 20px;
}
.text-section .sub-heading {
font-size: 20px;
}
.purple-section {
background: #3F3965;
color: #fff;
padding: 80px;
}
.purple-section .heading-wrapper {
text-align: center;
}
.purple-section .hr {
background: #373259;
width: 50%;
}
.card {
float: left;
width: 50%;
min-height: 300px;
padding: 50px;
-webkit-box-sizing: border-box;
-moz-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;
min-height: 200px;
text-align: center;
}
ul.share-group {
display: block;
width: 1080px;
margin: 0 auto;
padding: 50px;
}
.share-group li {
display: inline-block;
padding: 10px;
}
.copy {
padding-bottom: 20px;
}
.main-wrapper {
background: #444 url(../img/banner.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
