做一个整体的网页，先入手的应该是整体的布局而不是去扣细节，只有大体构架明晰，才能不慌不乱。
1.页头、内容、页脚：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Document</title></head><body><header> <!-- 页头 --> <nav></nav><div id="banner"></div></header><div class="content"> <!-- 内容 --> </div><footer> <!-- 页脚 --> </footer></body></html>
在web项目中新建一个main.css放在css文件下，设置自己想要的css样式，在主代码中引用：
<head><meta charset="utf-8" /><title>Document</title><link rel="stylesheet" href="css/main.css"><!--引用自己设定的CSS样式--></head>
2.页头结构分析及布局
块级元素nav，如果没有内容撑起nav的高度，默认为0，可以指定高度，指定高度后没内容也可显示。
用CSS实现nav和banner的整体布局：
nav{ background: #ccc;height:50px;}#banner{background: #777;height: 700px;}
导航栏<ul><li>......</li></ul> 不想要前面的默认样式圆点并使其同行排列：
nav ul{list-style: none;<!--列表样式都清空不要-->margin: 0;}nav ul li{display: inline-block;<!--使li里面的元素横向排列-->line-height: 50px;<!--行高-->}nav ul li a{line-height: 50px;text-decoration: none;<!--文字装饰(下划线..)清空不要-->}
在设置了左右浮动分开导航栏时发现文字并不居中了，这时之前设置的line-height是没有意义的， <a> 是行内标签 是无法设置宽高的 包括行高 也就是说一开始写的lh50px 是没有任何作用的 文字居中是受到了<li>下lh50px的影响
<a> 标签在d-b以后是由内容自动撑开高度的，也就是说此处不管设line-height还是height,inherit都是没有意义的
nav ul li{float:right;margin: 20px; display: inline-block;<!--使li里面的元素横向排列-->}nav ul li a{text-decoration: none;<!--文字装饰(下划线..)清空不要-->}nav ul li.logo{float: left;}
div的默认样式就是占母元素宽度的100%
页头的源代码：
<header><!--页头开始--><nav><div class="logo"><a href="#">CBAT</a></div><ul><li><a href="#" class="active">首页</a></li><li><a href="#">图片</a></li><li><a href="#">文章</a></li><li><a href="#">关于我们</a></li></ul></nav><div id="banner"><div class="inner"><h1>小可爱</h1><p class="sub-heading">爱吃零食的孩子都是好孩子</p><button id="main-btn">了解我</button><div class="more">更多</div></div></div></header><!--页头结束-->
页头的CSS样式源代码：
ul{margin: 0;}header{background: rgba(0, 0, 0, 0.4);}nav{height: 50px;background-color: transparent;}#banner{height: 700px;background-color: transparent;}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{line-height: inherit;text-decoration: none;display: inline-block;height: inherit;color: #fff;}nav ul li .logo{float: left;padding: 10px;}#banner .inner{max-width: 300px;text-align: center;margin: 0 auto;position: relative;top: 160px;color: #fff;}#banner .inner h1{margin: 0;}button{border: none;background-color: #333;color: #eee;padding: 10px;}#banner button{padding: 14px 60px;}#banner .inner .more{margin-top: 220px;}.sub-heading{line-height: 30px;margin: 30px 0;}.logo{font-size: 20px;font-weight: 700;letter-spacing: 1px;}.logo a{color: #fff;}
使div小正方形旋转45°成为菱形：transform rotate（45deg）
指定背景固定不移动，实现背景为底页面向上滑动的效果：background-attachment：fixed；
背景不重复：background-repeat：no-repeat； 图片伸展：background-size：cover； 居中background-position：center center；
整体的源代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/main.css"></head><body><div class="main-wrapper"><header><!--页头开始--><nav><div class="logo"><a href="#">CBAT</a></div><ul><li><a href="#" class="active">首页</a></li><li><a href="#">图片</a></li><li><a href="#">文章</a></li><li><a href="#">关于我们</a></li></ul></nav><div id="banner"><div class="inner"><h1>小可爱</h1><p class="sub-heading">爱吃零食的孩子都是好孩子</p><button id="main-btn">了解我</button><div class="more">更多</div></div></div></header><!--页头结束--><div class="content"><!--内容开始--><section class="green-section"><div class="wrapper"><div><h2>爱吃零食的孩子</h2><div class="hr"></div><p class="sub-heading">爱吃零食的孩子都是好孩子 爱吃零食的孩子都是好孩子 爱吃零食的孩子都是好孩子</p></div><div class="icon-group"><span class="icon"><img src="img/item2.jpg"></span><span class="icon"><img src="img/item2.jpg"></span><span class="icon"><img src="img/item2.jpg"></span></div></div></section><section class="gray-section"><div class="article-preview"><div class="img-section"><img src="img/pic1.jpg"></div><div class="text-section"><h2>爱吃零食的孩子都是好孩子</h2><div class="sub-heading">好吃鬼</div><p>爱吃零食的孩子都是好孩子 爱吃零食的孩子都是好孩子 爱吃零食的孩子都是好孩子</p></div></div><div class="article-preview"><div class="text-section"><h2>一袋零食顶两戴</h2><div class="sub-heading">爱吃零食的孩子都是好孩子</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><div class="img-section"><img src="img/pic2.jpg"></div></div><div class="article-preview"><div class="img-section"><img src="img/pic03.jpg"></div><div class="text-section"><h2>冰棒好吃不好吃</h2><div class="sub-heading">爱吃零食的孩子</div><p>Locia deserunt mollit anim id est laborum.Locia deserunt mollit anim id est laborum.Locia deserunt mollit anim id est laborum.</p></div></div></section><section class="purple-section"><div class="wrapper"><div class="heading-wrapper"><h2>爱吃零食的小孩</h2><div class="hr"></div><div class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div><div class="card-group clearfix"><div class="card"><h3>冰冰棒</h3><p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><div class="card"><h3>棒冰冰</h3><p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><div class="card"><h3>可比克</h3><p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><div class="card"><h3>比克比</h3><p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><div class="card"><h3>旺旺雪饼</h3><p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><div class="card"><h3>旺旺仙贝</h3><p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div></div></section></div><!--内容结束--><footer><!--页脚开始--><ul class="share-group"><li>零食</li><li>小孩</li><li>旺旺</li><li>可比克</li><li>冰冰棒</li></ul><div class="copy">© CBAT - </div></footer><!--页脚结束--></div></body></html>
CSS源代码：
.clearfix:after{content: '';display: block;clear: both;}ul{margin: 0;}header{background: rgba(0, 0, 0, 0.4);}nav{height: 50px;background-color: transparent;}#banner{height: 700px;background-color: transparent;}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{line-height: inherit;text-decoration: none;display: inline-block;height: inherit;color: #fff;}nav ul li .logo{float: left;padding: 10px;}#banner .inner{max-width: 300px;text-align: center;margin: 0 auto;position: relative;top: 160px;color: #fff;}#banner .inner h1{margin: 0;}button{border: none;background-color: #333;color: #eee;padding: 10px;}#banner button{padding: 14px 60px;}#banner .inner .more{margin-top: 220px;}.sub-heading{line-height: 30px;margin: 30px 0;}.logo{font-size: 20px;font-weight: 700;letter-spacing: 1px;}.logo a{color: #fff;}.active{border-bottom: 4px solid #fff;}h1{padding: 12px;border-top: 2px solid #fff;border-bottom: 2px solid #fff;}h2{margin-top: 0px;font-size: 30px;}h3{font-size: 24px;}p{font-size: 18px;letter-spacing: 1px;}.hr{width: 100%;height: 2px;margin: 0 auto;margin: 20px auto;}.sub-heading{font-size: 18px;}#main-btn{padding: 14px 28px;font-size: 20px;letter-spacing: 4px;border-radius: 6px;background: #18a;}.green-section{background: #089DB0;color: #fff;text-align: center;padding: 100px 0;}.green-section .hr{background: #098E9F;width: 60%;}.green-section .icon-group .icon{display: inline-block;width: 80px;height: 80px;border: 1px solid #0D6F7C;transform: rotate(45deg); /*旋转45度*/margin: 20px;}.icon-group{margin-top: 60px;}.wrapper{max-width: 1080px;margin: 0 auto;}.gray-section{background: #252F34;color: #fff;}.gray-section .img-section{width: 45%;}.img-section img{width: 100%;}.gray-section .text-section{width: 55%;}.article-preview:nth-child(odd) /*article-preview奇数设置*/{background-color: rgba(255,255,255,0.05);}.article-preview > div{float: left;font-size: 0;}.article-preview:after{content: '';display: block;clear: both;}.text-section{position: relative;top: 68px;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{padding: 80px;background-color: #3F3965;color: #fff;}.purple-section .heading-wrapper{text-align: center;}.purple-section .hr{background-color: #373259;width: 60px;}.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 #fff;*/}.card:first-child{background-color: rgba(0,0,0,0.04);}.card:nth-child(2){background-color: rgba(0,0,0,0.08);}.card:nth-child(3){background-color: rgba(0,0,0,0.12);}.card:nth-child(4){background-color: rgba(0,0,0,0.16);}.card:nth-child(5){background-color: rgba(0,0,0,0.20);}.card:nth-child(6){background-color: rgba(0,0,0,0.24);}footer{background-color: #333;color: #fff;min-height: 200px;text-align: center;}ul.share-group{display: block;width: 1080px;margin: 0 auto;padding: 50px;}.share-group li{display: inline-block;padding: 10px;}.copy{padding-bottom: 20px;}.main-wrapper{background: #444 url(../img/banner.jpg);background-attachment: fixed;background-repeat: no-repeat;background-size: cover;background-position: center center;}
