Html5和Css3扁平化风格网页
前言
扁平化概念的核心意义
去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。
示例
视频效果：http://files.cnblogs.com/files/abao0/webPage.swf
截图效果：http://images.cnblogs.com/cnblogs_com/abao0/975461/o_webpage2.gif
正文
1.代码部分
html代码
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>HTML5和CSS3扁平化风格博客title>
6 <link rel="stylesheet" type="text/css" href="index.css"/>
7 <link rel="stylesheet" type="text/css" href="normalize.css"/>
8 head>
9 <body>
10 <div id="main_wrapper">
11 <header>
12 <nav>
13 <div class="logo"><a href="">张小窝a>div>
14 <ul>
15 <li><a href="">链接1a>li>
16 <li><a href="">链接2a>li>
17 <li><a href="">链接3a>li>
18 <li><a href="">链接4a>li>
19 ul>
20 nav>
21 <div id="banner">
22 <div class="inner">
23 <div class="hr">div>
24 <h1>张小窝h1>
25 <div class="hr">div>
26 <p>welcome to my blogp>
27 <button>了解我button>
28 <div class="more">更多div>
29 <br/>
30 <img src="images/arrow.png"/>
31 div>
32 div>
33 header>
34 <div id="content" class="clearfix">
35 <section class="green_section">
36 <div class="wrapper">
37 <div>
38 <h2>标题1h2>
39 <h3>标题2h3>
40 <div class="hr">div>
41 <p>欢迎来到我的博客欢迎来到我的博客欢迎来到我的博客欢
42 迎来到我的博客欢迎来到我的博客欢迎来到我的博客p>
43 div>
44 div>
45 <div class="icon_group">
46 <span class="icon">
47 items
48 span>
49 <span class="icon">item2span>
50 <span class="icon">item3span>
51 div>
52 section>
53 <section class="gray_section">
54 <div class="article_preview">
55 <div class="image_section">
56 <img src="images/pic01.jpg" alt="图片1">
57 div>
58 <div class="text_section">
59 <h2>又一个标题h2>
60 <p class="p">又一个子标题p>
61 <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容p>
62 div>
63 div>
64
65 <div class="article_preview">
66 <div class="text_section">
67 <h2>又一个标题h2>
68 <p class="p">又一个子标题p>
69 <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容p>
70 div>
71 <div class="image_section">
72 <img src="images/pic02.jpg" alt="图片2">
73 div>
74 div>
75
76 <div class="article_preview">
77 <div class="image_section">
78 <img src="images/pic03.jpg" alt="图片3">
79 div>
80 <div class="text_section">
81 <h2>又一个标题h2>
82 <p class="p">又一个子标题p>
83 <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容p>
84 div>
85 div>
86 section>
87 <section class="purple_section clearfix">
88 <div class="wrapper">
89 <div class="heading_wrapper">
90 <h2>又一个标题h2>
91 <div class="hr">div>
92 <div class="sub_heading">
93 <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
94 这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
95 p>
96 div>
97 div>
98 <div class="card_ground
99 clearfix" >
100 <div class="card">
101 <h3>这是标题h3>
102 <p>这是内容p>
103 div>
104 <div class="card">
105 <h3>这是标题h3>
106 <p>这是内容p>div>
107 <div class="card">
108 <h3>这是标题h3>
109 <p>这是内容p>
110 div>
111 <div class="card">
112 <h3>这是标题h3>
113 <p>这是内容p>div>
114 <div class="card">
115 <h3>这是标题h3>
116 <p>这是内容p>
117 div>
118 <div class="card">
119 <h3>这是标题h3>
120 <p>这是内容p>div>
121 div>
122
123 div>
124 section>
125
126 div>
127 <footer>
128 <div id="footer">
129 <div class="line"><span>span>
130 <div class="author">div>
131 div>
132
133 <section class="info clearfix">
134 <p >
135 吾生也有涯<br/>
136 而知也无涯
137 p>
138 section>
139
140 <div class="icon_link">
141 <a href="" target="_blank" title="github" class="icon_github"> <img src="images/github.png" />a>
142 <a href="" target="_blank" title="email" class="icon_email"> <img src="images/email.png" />a>
143 div>
144 <p class="copy">
145 张小窝 ©2017-2020
146 p>
147 div>
148 footer>
149 div>
150 body>
151 html>css代码
1 /*清除浮动*/
2 .clearfix:after{
3 content: "";
4 display: block;
5 clear: both;
6 }
7 body{
8 margin: 0px;
9 }
10 ul{
11 margin: 0;
12 }
13 nav{
14 background:#303843;
15 height: 50px;
16 }
17 p{ margin: 0px;
18 font-size: 16px;
19 letter-spacing: 1px;
20 }
21 button{
22 border: none;
23 background: #E03838;
24 padding: 10px 20px;
25 border-radius: 5px;
26 }
27 header{
28 background: rgba(0,0,0,0.3);
29 }
30 #main_wrapper{
31 magin:0;padding:0;
32 background: url("images/banner.jpg");
33 background-attachment: fixed ;
34 background-repeat: no-repeat;
35 background-size: cover;
36 background-position: center center;
37 }
38 #banner .inner .hr
39 {
40 margin:0 auto;
41 border-top:2px solid #fff;
42 width:50%;
43
44 }
45 #banner{
46 height: 600px;
47 }
48 nav ul{
49 list-style: none;
50 margin: 0px;
51 float: right;
52
53 }
54 nav ul li,nav .logo{
55 display: inline-block;
56 line-height: 50px;
57 margin-right: 20px;
58
59 }
60 nav ul li a{
61 display: inline-block;
62 line-height: 50px;
63 text-decoration: none;
64 display: inline-block;
65 height: inherit;
66 color: #fff;
67 }
68
69 nav .logo{
70 float: left;
71 margin-left: 20px;
72 }
73 nav .logo a{
74 font-size: 18px;
75 font-weight: 600;
76 text-decoration: none;
77 letter-spacing: 2px;
78 color: #fff;
79 }
80 #banner .inner h1{
81 margin: 15px;
82 color: #fff;
83 }
84 #banner .inner p,#banner .inner button,#banner .inner .more{
85 color: #fff;
86 }
87 #banner .inner{
88 line-height: 30px;
89 width: 400px;
90 margin: 0 auto;
91 text-align: center;
92 position: relative;
93 top:170px;
94 }
95
96 #banner .inner .more{
97 margin-top: 170px;
98 }
99 /*绿色section的开始*/
100 .green_section{
101 text-align: center;
102 background-color: #2EC2A5;
103 padding: 80px;
104 color: #fff;
105 }
106 .wrapper{
107 width: 600px;
108 height: 200px;
109 margin: 0 auto;
110 }
111 .green_section .hr{
112 background: #25AF95;
113 width: 40%;
114 margin: 0 auto;
115 }
116 .green_section p{
117 line-height: 30px;
118 letter-spacing: 2px;
119 }
120 .hr{
121
122 height: 2px;
123 width: 100%;
124 margin: 0 auto;
125 margin: 20px 0px;
126 }
127 .green_section .icon_group .icon{
128 display: inline-block;
129 width: 70px;
130 height: 70px;
131 border:2px solid #1FB194;
132 transform: rotate(45deg);
133 margin: 20px;
134
135 }
136 /*灰色section的开始*/
137 .gray_section .image_section{
138 width:45%;
139
140 }
141 .image_section img{
142 width: 100%;
143 }
144
145 .article_preview > div{
146 float: left;
147 font-size: 0px;
148 }
149 .gray_section{
150 background: #252A34;
151 color: #fff;
152 }
153 .gray_section .text_section{
154 width:55%;
155 }
156
157 .article_preview:after{
158 content: "";
159 display: block;
160 clear: both;
161 }
162 .text_section{
163 position: relative;
164 top:150px;
165 left: 100px;
166 }
167 .text_section >*{
168 max-width: 90%;
169 }
170 .text_section h2{
171 margin-top: 0;
172 font-size: 24px;
173 line-height: 10px;
174 }
175 .text_section .p{
176 font-size: 20px;
177 }
178 .text_section p{
179 font-size: 16px;
180 letter-spacing: 1px;
181 line-height: 20px;
182 }
183 .article_preview:nth-child(odd){
184 background: rgba(255,255,255,0.02);
185 }
186 /*紫色section的开始*/
187 .purple_section{
188 background: #524E92;
189 color: #fff;
190 padding: 80px;
191
192 }
193 .heading_wrapper >div{
194 font-size: 0px ;
195 }
196 .purple_section h2{
197 font-size: 22px;
198 margin-top: 0px;
199 }
200 .purple_section .hr{
201 background: #4C4889;
202 width: 20%;
203 margin: 0 auto;
204 }
205
206 .card_ground .card h3{
207 font-size: 17px;
208 line-height: 10px;
209 }
210 .heading_wrapper{
211 text-align: center;
212 }
213 .card{
214 float: left;
215 width:50%;
216 min-height: 250px;
217 padding: 50px;
218 -webkit-box-sizing: border-box;
219 -moz-box-sizing: border-box;
220 box-sizing: border-box;
221 /*border: 1px solid black;*/
222 }
223 .card:first-child{
224 background: rgba(0,0,0,0.02);
225 }
226 .card:nth-child(2){
227 background: rgba(0,0,0,0.04);
228 }
229
230 .card:nth-child(3){
231 background: rgba(0,0,0,0.06);
232 }
233
234 .card:nth-child(4){
235 background: rgba(0,0,0,0.08);
236 }
237
238 .card:nth-child(5){
239 background: rgba(0,0,0,0.10);
240 }
241
242 .card:last-child{
243 background: rgba(0,0,0,0.11);
244 }
245
246 /*页脚*/
247
248
249 footer {
250 margin-top: 0em;
251 background: #1F1F1F;
252 padding: 0 2% .5em;
253 padding-bottom: 0px;
254
255 }
256 #footer {
257 width: 95%;
258 margin: 0 auto;
259 position: relative;
260 }
261 #footer .line {
262 width: 10em;
263 float: left;
264 position: relative;
265 height: 14em;
266 margin: 0 auto;
267 }
268 #footer .line span {
269 position: absolute;
270 left: 3em;
271 margin: 0 0 1.5em;
272 display: block;
273 width: .5em;
274 height: 6.25em;
275 border-right: .125em solid #fff;
276 margin: 0 auto;
277 }
278
279 .author {
280 position: absolute;
281 top: 6em;
282 margin: 0 0 1.5em;
283 width: 6.875em;
284 height: 6.875em;
285 margin: 0 auto;
286 background: url("images/momo.jpg") left top no-repeat;
287 -webkit-background-size: 6.875em 6.875em;
288 -moz-background-size: 6.875em 6.875em;
289 background-size: 6.875em 6.875em;
290 -webkit-border-radius: 3.4375em;
291 border-radius: 3.4375em;
292 -webkit-transition: -webkit-transform 0.2s ease-out;
293 -moz-transition: -moz-transform 0.2s ease-out;
294 -o-transition: -o-transform 0.2s ease-out;
295 -ms-transition: -ms-transform 0.2s ease-out;
296
297 }
298 .author:hover{
299 -webkit-transform: rotateZ(720deg);
300 -moz-transform: rotateZ(720deg);
301 -o-transform: rotateZ(720deg);
302 -ms-transform: rotateZ(720deg);
303 transform: rotateZ(720deg);
304 }
305 #footer .line{
306 width: 10em;
307 float: left;
308 position: relative;
309 }
310 .info{
311 width:900px;
312 height: 200px;
313 margin: 0 auto;
314 }
315 .info p{
316 margin-top: 110px;
317 color: #fff;
318 display: inline-block;
319 font-family: 华文行楷;
320 font-size: 40px;
321 letter-spacing: 2px;
322 }
323 .icon_link{
324 width: 15em;
325 position: absolute;
326 right: -2em;
327 top: 4em;
328 letter-spacing: 25px;
329 }
330 .copy{
331 width: inherit;
332 text-align: center;
333 color: #fff;
334 display: inline-block;
335 font-size: 16px;
336 font-family: 方正舒体;
337 letter-spacing: 2px;
338 position: relative;
339 padding-bottom: 10px;
340 }附加：1.我在项目里引入了一个正常化样式：http://necolas.github.io/normalize.css/。需要的可以去官网下载，或者直接创建一个CSS,复制下面代码进去。
normalize.css
/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8 and Safari 8 .
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
margin: 0;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}2.项目中所有引用的图片有8张，地址为：图片1，图片2，图片3，图片4，图片5，图片6，图片7，图片8