Html5和Css3扁平化风格网页
生活随笔
收集整理的這篇文章主要介紹了
Html5和Css3扁平化风格网页
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前言
扁平化概念的核心意義
去除冗余、厚重和繁雜的裝飾效果。而具體表現(xiàn)在去掉了多余的透視、紋理、漸變以及能做出3D效果的元素，這樣可以讓“信息”本身重新作為核心被凸顯出來(lái)。同時(shí)在設(shè)計(jì)元素上，則強(qiáng)調(diào)了抽象、極簡(jiǎn)和符號(hào)化。
示例
? ?? 視頻效果：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扁平化風(fēng)格博客</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>標(biāo)題1</h2> 39 <h3>標(biāo)題2</h3> 40 <div class="hr"></div> 41 <p>歡迎來(lái)到我的博客歡迎來(lái)到我的博客歡迎來(lái)到我的博客歡 42 迎來(lái)到我的博客歡迎來(lái)到我的博客歡迎來(lái)到我的博客</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>又一個(gè)標(biāo)題</h2> 60 <p class="p">又一個(gè)子標(biāo)題</p> 61 <p>這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容</p> 62 </div> 63 </div> 64 65 <div class="article_preview"> 66 <div class="text_section"> 67 <h2>又一個(gè)標(biāo)題</h2> 68 <p class="p">又一個(gè)子標(biāo)題</p> 69 <p>這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容</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>又一個(gè)標(biāo)題</h2> 82 <p class="p">又一個(gè)子標(biāo)題</p> 83 <p>這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容</p> 84 </div> 85 </div> 86 </section> 87 <section class="purple_section clearfix"> 88 <div class="wrapper"> 89 <div class="heading_wrapper"> 90 <h2>又一個(gè)標(biāo)題</h2> 91 <div class="hr"></div> 92 <div class="sub_heading"> 93 <p>這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容 94 這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容這是一段內(nèi)容 95 </p> 96 </div> 97 </div> 98 <div class="card_ground 99 clearfix" > 100 <div class="card"> 101 <h3>這是標(biāo)題</h3> 102 <p>這是內(nèi)容</p> 103 </div> 104 <div class="card"> 105 <h3>這是標(biāo)題</h3> 106 <p>這是內(nèi)容</p></div> 107 <div class="card"> 108 <h3>這是標(biāo)題</h3> 109 <p>這是內(nèi)容</p> 110 </div> 111 <div class="card"> 112 <h3>這是標(biāo)題</h3> 113 <p>這是內(nèi)容</p></div> 114 <div class="card"> 115 <h3>這是標(biāo)題</h3> 116 <p>這是內(nèi)容</p> 117 </div> 118 <div class="card"> 119 <h3>這是標(biāo)題</h3> 120 <p>這是內(nèi)容</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 而知也無(wú)涯 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 /*清除浮動(dòng)*/ 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的開(kāi)始*/ 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的開(kāi)始*/ 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的開(kāi)始*/ 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 /*頁(yè)腳*/ 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.我在項(xiàng)目里引入了一個(gè)正常化樣式：http://necolas.github.io/normalize.css/。需要的可以去官網(wǎng)下載，或者直接創(chuàng)建一個(gè)CSS,復(fù)制下面代碼進(jìn)去。
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.項(xiàng)目中所有引用的圖片有8張，地址為：圖片1，圖片2，圖片3，圖片4，圖片5，圖片6，圖片7，圖片8
? ? ? ? ? ?
? ? ? ? ?
總結(jié)
以上是生活随笔為你收集整理的Html5和Css3扁平化风格网页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： CSS3 Transform、Trans
- 下一篇： 小程序css