HTML5和CSS3扁平化风格博客-优快云博客

本文通过一个实战案例展示了如何使用HTML和CSS实现一个完整的网页布局，包括页头、内容区域和页脚，并对各个部分进行了详细的样式设置。通过不同的颜色方案和布局技巧，实现了丰富的视觉效果。

效果:

代码:

html结果

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

</p>

</div>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</div>

</section>

</div>

<p>Lorem roident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<p>Lorem roident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</div>

</div>

<p>Lorem roident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</section>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</section>

</div>

</ul>

</footer>

</div>

</body>

</html>

css样式

/*页头style S*/

nav{background:transparent;height: 50px}

#banner{background: transparent;height: 500px}

nav ul{list-style: none;margin: 0;float: right;}

nav ul li,nav .logo{display: inline-block;line-height: 50px;margin-right: 20px;}

nav ul li a,nav .logo a{line-height: inherit;text-decoration: none; display: inline-block;height: inherit;color: #fff}

nav .logo{float: left;font-size: 20px;font-weight: bold;letter-spacing: 2px;}

#banner .inner{max-width: 300px;text-align: center;margin: 0 auto;position: relative;top: 80px}

#banner .inner h1{margin:0;}

button{border: none;background:#333;color: #eee;padding: 10px}

#banner .inner .more{margin-top: 80px}

/*页头style E*/

/*内容style S*/

.green-section{text-align: center;background:#089DB0;color: #fff;padding: 100px 0;}

.wrapper{max-width: 1080px;margin: 0 auto;}

.hr{width: 100%;height: 2px; margin:20px auto;}

.green-section .hr{background: #078494;width: 50%;}

.icon-group{margin-top: 40px;}

.green-section .icon-group .icon{display: inline-block;width: 80px;height: 80px;background: #0D6F7C;transform:rotate(45deg);margin:20px;}

.gray-section{background:#252f34;color: #fff}

.gray-section .img-section {width: 40%;}

.img-section img{width: 100%}

.gray-section .text-section{width: 60%;}

.article-preview > div{float: left;font-size: 0px}

.article-preview:nth-child(odd){background-color: rgba(255,255,255,0.05);}

.article-preview:after{content: '';clear: both;display: block;}

.text-section{position: relative;top: 60px;left: 50px;}

.text-section h2{margin-bottom: 20px;}

.text-section .sub-heading{font-size: 22px;margin-top: 0px}

.text-section p{font-size: 18px;letter-spacing: 1px;}

.text-section > *{max-width: 90%;}

.purple-section{background:#3f3965;color: #fff;padding: 80px;}

.purple-section .heading-wrapper{text-align: center;}

.heading-wrapper .hr{background:#373259;width: 50%}

.card{float: left;width: 50%;min-height: 300px;padding: 50px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;/*border: 1px solid white*/}

.clearfix:after{content: '';clear: both;display: block;}

.card p{font-size: 18px;letter-spacing: 1px;}

.card:first-child{background:rgba(0,0,0,0.05);}

.card:nth-child(2){background:rgba(0,0,0,0.09);}

.card:nth-child(3){background:rgba(0,0,0,0.14);}

.card:nth-child(4){background:rgba(0,0,0,0.18);}

/*内容style E*/

/*页脚style S*/

footer{background:#333;color: #fff;min-height: 200px;text-align: center;}

ul.share-group{display: block;width: 1080px;margin: 0 auto;padding: 30px}

.share-group li{display: inline-block;padding: 10px}

.copy{padding: 20px}

/*页脚style E*/

.main-wrapper{background:#444 url(imgs/cwz3.jpg);background-attachment: fixed;background-repeat: no-repeat;background-size: cover;background-position: center;}

本文转自素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1829121