HTML5和CSS3扁平化风格博客

效果:

员工经过长期磨合与沉淀，具备了协作精神，得以通过团队的力量开发出优质的产品。成都创新互联公司坚持“专注、创新、易用”的产品理念，因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供成都网站建设、做网站、微信公众号开发、电商网站开发，微信平台小程序开发，软件按需网站设计等一站式互联网企业服务。

代码:

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 h2{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 h3{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;}

分享题目：HTML5和CSS3扁平化风格博客
标题路径：http://bjjierui.cn/article/goecsh.html