首页 > > 网页制作 > css >

Html5和Css3扁平化风格网页

2018-06-24 01:10:35来源：未知阅读 ()

前言

扁平化概念的核心意义

去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出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="">链接1</a></li>
 16             <li><a href="">链接2</a></li>
 17             <li><a href="">链接3</a></li>
 18             <li><a href="">链接4</a></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 blog</p>
 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>标题1</h2>
 39                 <h3>标题2</h3>
 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">item2</span>
 50             <span class="icon">item3</span>
 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>

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 }

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;
}