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 <htmllang="en">
3 <head>
4     <metacharset="UTF-8">
5     <title>HTML5和CSS3扁平化风格博客</title>
6     <linkrel="stylesheet"type="text/css"href="index.css"/>
7     <linkrel="stylesheet"type="text/css"href="normalize.css"/>
8 </head>
9 <body>
10 <divid="main_wrapper">
11 <header>
12     <nav>
13         <divclass="logo"><ahref="">张小窝</a></div>
14         <ul>
15             <li><ahref="">链接1</a></li>
16             <li><ahref="">链接2</a></li>
17             <li><ahref="">链接3</a></li>
18             <li><ahref="">链接4</a></li>
19         </ul>
20     </nav>
21     <divid="banner">
22         <divclass="inner">
23             <divclass="hr"></div>
24             <h1>张小窝</h1>
25             <divclass="hr"></div>
26             <p>welcome to my blog</p>
27             <button>了解我</button>
28             <divclass="more">更多</div>
29             <br/>
30             <imgsrc="images/arrow.png"/>
31         </div>
32     </div>
33 </header>
34 <divid="content"class="clearfix">
35     <sectionclass="green_section">
36         <divclass="wrapper">
37             <div>
38                 <h2>标题1</h2>
39                 <h3>标题2</h3>
40                 <divclass="hr"></div>
41                 <p>欢迎来到我的博客欢迎来到我的博客欢迎来到我的博客欢42                     迎来到我的博客欢迎来到我的博客欢迎来到我的博客</p>
43             </div>
44         </div>
45         <divclass="icon_group">
46             <spanclass="icon">
47 items48             </span>
49             <spanclass="icon">item2</span>
50             <spanclass="icon">item3</span>
51         </div>
52     </section>
53     <sectionclass="gray_section">
54         <divclass="article_preview">
55             <divclass="image_section">
56                 <imgsrc="images/pic01.jpg"alt="图片1">
57             </div>
58             <divclass="text_section">
59                 <h2>又一个标题</h2>
60                 <pclass="p">又一个子标题</p>
61                 <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容</p>
62             </div>
63         </div>
64
65         <divclass="article_preview">
66             <divclass="text_section">
67                 <h2>又一个标题</h2>
68                 <pclass="p">又一个子标题</p>
69                 <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容</p>
70             </div>
71             <divclass="image_section">
72                 <imgsrc="images/pic02.jpg"alt="图片2">
73             </div>
74         </div>
75
76         <divclass="article_preview">
77             <divclass="image_section">
78                 <imgsrc="images/pic03.jpg"alt="图片3">
79             </div>
80             <divclass="text_section">
81                 <h2>又一个标题</h2>
82                 <pclass="p">又一个子标题</p>
83                 <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容</p>
84             </div>
85         </div>
86     </section>
87     <sectionclass="purple_section clearfix">
88         <divclass="wrapper">
89             <divclass="heading_wrapper">
90                 <h2>又一个标题</h2>
91                 <divclass="hr"></div>
92                 <divclass="sub_heading">
93                    <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容94 这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容95                    </p>
96                 </div>
97             </div>
98             <divclass="card_ground99 clearfix" >
100                 <divclass="card">
101                     <h3>这是标题</h3>
102                     <p>这是内容</p>
103                 </div>
104                 <divclass="card">
105                     <h3>这是标题</h3>
106                     <p>这是内容</p></div>
107                 <divclass="card">
108                     <h3>这是标题</h3>
109                     <p>这是内容</p>
110                 </div>
111                 <divclass="card">
112                     <h3>这是标题</h3>
113                     <p>这是内容</p></div>
114                 <divclass="card">
115                     <h3>这是标题</h3>
116                     <p>这是内容</p>
117                 </div>
118                 <divclass="card">
119                     <h3>这是标题</h3>
120                     <p>这是内容</p></div>
121             </div>
122
123         </div>
124     </section>
125
126 </div>
127 <footer>
128         <divid="footer">
129             <divclass="line"><span></span>
130                 <divclass="author"></div>
131             </div>
132
133         <sectionclass="info clearfix">
134             <p>
135                 吾生也有涯<br/>
136 而知也无涯137             </p>
138         </section>
139
140     <divclass="icon_link">
141         <ahref=""target="_blank"title="github"class="icon_github"> <imgsrc="images/github.png" /></a>
142         <ahref=""target="_blank"title="email"class="icon_email"> <imgsrc="images/email.png" /></a>
143     </div>
144             <pclass="copy">
145 张小窝  ©2017-2020146             </p>
147         </div>
148 </footer>
149 </div>
150 </body>
151 </html>

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 .hr39 {
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 }

css代码

附加：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;
}

normalize

2.项目中所有引用的图片有8张，地址为：图片1，图片2，图片3，图片4，图片5，图片6，图片7，图片8

Html5和Css3扁平化风格网页相关推荐

html按钮扁平化,HTML5和CSS3扁平化风格博客教程的资源分享
本课程通过CSS3扁平化风格博客的实例详细讲解,让大家更容易理解常规网页的组成部分,灵活的使用不同部分WEB组件,理解它的构成思想,以及网页灵活的布局和设计.我们也可以由宏观到微观去掌握整体的布局. ...
HTML5和CSS3扁平化风格
做一个整体的网页,先入手的应该是整体的布局而不是去扣细节,只有大体构架明晰,才能不慌不乱. 1.页头.内容.页脚: <!DOCTYPE html> <html><head ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
css3实现扁平化风格APP应用图标时钟动画
今天无聊写了一个扁平化风格APP时钟动态图标.其外观(表盘.刻度.指针)都使用css来绘制,然后再通过javascript来获取当前时间并且让时钟动起来.有了这个优美的动态时钟,我再也不要看手表了,哈 ...
扁平化风格博客——后续
之前Po出的扁平化风格源码,只用了HTML5+CSS3(具体详见http://blog.csdn.net/ansheng02/article/details/78618750),这次的后续将会添加上侧 ...
达人酷 psd转html,所有Apple设备PSD模型素材（扁平化风格）
所有Apple设备PSD模型素材(扁平化风格) 1月 8, 2014 评论 (1) Sponsor 最近不少用户叫我收集mock up模型和UI KIT素材,其实我们已经分享过很多,大家可以在设计达人 ...
【干货分享】使用Inno Setup设计扁平化风格的安装包
前言: 本文将提供一个通用的扁平化风格安装包模板.模板参考有道云设计,兼容win10.win7等操作系统. 模板及相关软件学习资料下载路径: 链接:https://pan.baidu.com/s/1u ...
android4.4风格,Android 4.4消息汇总扁平化风格来袭
1.奇巧(KitKat)味儿的Android 4.4 Android 4.4标志着谷歌首次在Android的代号上和食品商展开合作.双方也联合展开了一场规模盛大的营销活动:据称有5000万盒Andro ...
Ubuntu设置扁平化风格桌面
ubuntu上比较好的一款扁平化风格的主题是.Flatabulous是针对Ubuntu和其他基于Linux.debian的Flat主题,Flatabulous是基于Ultra-Flat主题,一个扁平化 ...

Html5和Css3扁平化风格网页

前言

示例

正文

1.代码部分

Html5和Css3扁平化风格网页相关推荐

最新文章

热门文章