合浦县城乡规划建设局网站,网站怎样建设才叫人性化,响应式网站的优点,网站怎么弄缩略图上传前言 扁平化概念的核心意义 去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素#xff0c;这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上#xff0c;则强调了抽象、极简和符号化。 示例 视频效果…前言 扁平化概念的核心意义 去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出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 langen 3 head 4 meta charsetUTF-8 5 titleHTML5和CSS3扁平化风格博客/title 6 link relstylesheet typetext/css hrefindex.css/ 7 link relstylesheet typetext/css hrefnormalize.css/ 8 /head 9 body 10 div idmain_wrapper 11 header 12 nav 13 div classlogoa href张小窝/a/div 14 ul 15 lia href链接1/a/li 16 lia href链接2/a/li 17 lia href链接3/a/li 18 lia href链接4/a/li 19 /ul 20 /nav 21 div idbanner 22 div classinner 23 div classhr/div 24 h1张小窝/h1 25 div classhr/div 26 pwelcome to my blog/p 27 button了解我/button 28 div classmore更多/div 29 br/ 30 img srcimages/arrow.png/ 31 /div 32 /div 33 /header 34 div idcontent classclearfix 35 section classgreen_section 36 div classwrapper 37 div 38 h2标题1/h2 39 h3标题2/h3 40 div classhr/div 41 p欢迎来到我的博客欢迎来到我的博客欢迎来到我的博客欢 42 迎来到我的博客欢迎来到我的博客欢迎来到我的博客/p 43 /div 44 /div 45 div classicon_group 46 span classicon 47 items 48 /span 49 span classiconitem2/span 50 span classiconitem3/span 51 /div 52 /section 53 section classgray_section 54 div classarticle_preview 55 div classimage_section 56 img srcimages/pic01.jpg alt图片1 57 /div 58 div classtext_section 59 h2又一个标题/h2 60 p classp又一个子标题/p 61 p这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容/p 62 /div 63 /div 64 65 div classarticle_preview 66 div classtext_section 67 h2又一个标题/h2 68 p classp又一个子标题/p 69 p这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容/p 70 /div 71 div classimage_section 72 img srcimages/pic02.jpg alt图片2 73 /div 74 /div 75 76 div classarticle_preview 77 div classimage_section 78 img srcimages/pic03.jpg alt图片3 79 /div 80 div classtext_section 81 h2又一个标题/h2 82 p classp又一个子标题/p 83 p这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容/p 84 /div 85 /div 86 /section 87 section classpurple_section clearfix 88 div classwrapper 89 div classheading_wrapper 90 h2又一个标题/h2 91 div classhr/div 92 div classsub_heading 93 p这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容 94 这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容 95 /p 96 /div 97 /div 98 div classcard_ground 99 clearfix 100 div classcard 101 h3这是标题/h3 102 p这是内容/p 103 /div 104 div classcard 105 h3这是标题/h3 106 p这是内容/p/div 107 div classcard 108 h3这是标题/h3 109 p这是内容/p 110 /div 111 div classcard 112 h3这是标题/h3 113 p这是内容/p/div 114 div classcard 115 h3这是标题/h3 116 p这是内容/p 117 /div 118 div classcard 119 h3这是标题/h3 120 p这是内容/p/div 121 /div 122 123 /div 124 /section 125 126 /div 127 footer 128 div idfooter 129 div classlinespan/span 130 div classauthor/div 131 /div 132 133 section classinfo clearfix 134 p 135 吾生也有涯br/ 136 而知也无涯 137 /p 138 /section 139 140 div classicon_link 141 a href target_blank titlegithub classicon_github img srcimages/github.png //a 142 a href target_blank titleemail classicon_email img srcimages/email.png //a 143 /div 144 p classcopy 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 [typebutton], /* 1 */ [typereset], [typesubmit] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [typebutton]::-moz-focus-inner, [typereset]::-moz-focus-inner, [typesubmit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [typebutton]:-moz-focusring, [typereset]:-moz-focusring, [typesubmit]:-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-. */ [typecheckbox], [typeradio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [typenumber]::-webkit-inner-spin-button, [typenumber]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [typesearch] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [typesearch]::-webkit-search-cancel-button, [typesearch]::-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