CSS3扁平化风格博客（笔记）
案例
HTML代码
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="D:\CSS\reset.css">
<link rel="stylesheet" href="D:\CSS\bianping.css">
head>
<body>
<div class="main-wrapper">
<header>
<nav>
<div class="logo"><a href="#">张小窝a>div>
<ul>
<li><a href="#" class="active">首页a>li>
<li><a href="#">链接2a>li>
<li><a href="#">链接3a>li>
<li><a href="#">链接4a>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>养我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">item1span>
<span class="icon">item2span>
<span class="icon">item3span>
div>
div>
section>
<section class="gray-section">
<div class="article-preview">
<div class="img-section">
<img src="C:\Users\Administrator\Desktop\I\picture\img\pic01.jpg" alt="">
div>
<div class="text-section">
<h2>又一个标题h2>
<div class="sub-heading">我是副标题你好div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis soluta ex quia cum et facere temporibus similique harum maxime architecto quod reprehenderit veniam, quaerat, minus eveniet eos magnam, corrupti ducimus?p>
div>
div>
<div class="article-preview">
<div class="text-section">
<h2>又一个标题h2>
<div class="sub-heading">我是副标题你好div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis soluta ex quia cum et facere temporibus similique harum maxime architecto quod reprehenderit veniam, quaerat, minus eveniet eos magnam, corrupti ducimus?p>
div>
<div class="img-section">
<img src="C:\Users\Administrator\Desktop\I\picture\img\pic02.jpg" alt="">
div>
div>
<div class="article-preview">
<div class="img-section">
<img src="C:\Users\Administrator\Desktop\I\picture\img\pic03.jpg" alt="">
div>
<div class="text-section">
<h2>又一个标题h2>
<div class="sub-heading">我是副标题你好div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis soluta ex quia cum et facere temporibus similique harum maxime architecto quod reprehenderit veniam, quaerat, minus eveniet eos magnam, corrupti ducimus?p>
div>
div>
section>
<section class="purple-section">
<div class="heading-wrapper">
<h2>又一个标题h2>
<div class="hr">div>
<div class="sub-heading">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora esse, inventore incidunt consequatur magni animi autem veniam neque laudantium quod, nihil illo unde nemo odio sint, itaque quidem ea suscipit.
div>
div>
<div class="card-group clearfix">
<div class="card">
<h3>标题三h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorum praesentium hic nulla velit adipisci ipsum soluta placeat quae, officiis architecto similique eos possimus qui modi? Voluptatum, aliquid hic. Repellat.p>
div>
<div class="card">
<h3>标题三h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorum praesentium hic nulla velit adipisci ipsum soluta placeat quae, officiis architecto similique eos possimus qui modi? Voluptatum, aliquid hic. Repellat.p>
div>
<div class="card">
<h3>标题三h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorum praesentium hic nulla velit adipisci ipsum soluta placeat quae, officiis architecto similique eos possimus qui modi? Voluptatum, aliquid hic. Repellat.p>
div>
<div class="card">
<h3>标题三h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorum praesentium hic nulla velit adipisci ipsum soluta placeat quae, officiis architecto similique eos possimus qui modi? Voluptatum, aliquid hic. Repellat.p>
div>
<div class="card">
<h3>标题三h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorum praesentium hic nulla velit adipisci ipsum soluta placeat quae, officiis architecto similique eos possimus qui modi? Voluptatum, aliquid hic. Repellat.p>
div>
<div class="card">
<h3>标题三h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorum praesentium hic nulla velit adipisci ipsum soluta placeat quae, officiis architecto similique eos possimus qui modi? Voluptatum, aliquid hic. Repellat.p>
div>
div>
section>
div>
<footer>
<ul class="share-group">
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item5li>
ul>
<div class="copy">
© 王小窝
div>
footer>
div>
body>
html>CSS代码
.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: -20px auto;
}
nav ul li a{
line-height: inherit;
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;
}
button{
border: none;
background: #333;
color: #eee;
padding: 10px;
}
#banner button{
padding: 14px 60px;
}
#banner .inner .more{
margin-top: 280px;
}
.sub-heading{
line-height: 30px;
margin: 30px 0;
}
.logo{
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
}
.logo a{
color: #fff;
}
.green-section{
background: #089DB0;
color: #fff;
text-align: center;
padding: 100px 0;
}
.green-section .hr{
background: #078494;
width: 60%;
}
.icon-group{
margin-top: 60px;
}
.wrapper{
max-width: 1080px;
margin: 0 auto;
}
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 0;
}
.sub-heading{
font-size: 18px;
}
.gray-section{
background: #252F34;
color: #fff;
}
.green-section .icon-group .icon{
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid #0D6F7C;
transform:rotate(45deg);
margin: 20px;
}
.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);
}
.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-right: 80px;
background: #3F3965;
color: #fff;
}
.purple-section .heading-wrapper{
text-align: center;
}
.purple-section .hr{
background: #373259;
width: 60%;
}
.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(C:\Users\Administrator\Desktop\I\picture\img\banner.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
background-position: center center;
}