页头、banner、正文、页脚的宏观布局
1.布局顺序的重要性：
由大到小，着眼最大的部分，慢慢细分。
<body>
<header><!-- 页头开始 --> <nav></nav> <div id="banner"></div> </header><!-- 页头结束 --> <div class="content"><!-- 内容开始 --> </div><!-- 内容结束 --> <footer><!-- 页脚开始 --> </footer><!-- 页脚结束 --></body>
2.css用外部文件方式引入
一个页面写多个css完全不必要，浏览器都是直接首位相接解析，分多个文件和1个文件效果是相同的。
2个之内最好。
注：分成太多css文件，会加大服务器请求数，请求数越多，响应就会越慢。
3.加入css，进行初始布局
nav{
background: #ccc; height: 50px;}#banner{ background: #777; height: 700px;}4.设计nav，加上css效果。此时不进行阴影之类的细节处理，先完成下面的布局。
<nav>
<ul> <li class="logo"><a href="#">leo</a></li> <li><a href="#">简历</a></li> <li><a href="#">作品</a></li> <li><a href="#">文章</a></li> <li><a href="#">首页</a></li> </ul> </nav>css代码：
nav ul{
list-style: none; margin: 0;}nav ul li{ display: inline-block; line-height: 50px; float: right; margin-right: 20px;}nav ul li a{ line-height: 50px; text-decoration: none; display: inline-block; height: inherit;}
nav ul li.logo{ float: left;}5.设计banner，给页面所以button设定统一样式，然后给banner页面定制特定的按钮，不深入细节，继续往下布局。
<div id="banner">
<div class="inner"> <h1>leo</h1> <p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor iididunt ut labore et dolore magna aliqua. Ut enim ad min.</p> <button>养我</button> <div class="more"> 更多 </div> </div> </div>css代码：
#banner .inner{
max-width: 300px; text-align: center; margin: 0 auto; position: relative; top: 160px;}#banner .inner h1{ margin: 0;}button{ border: none; background-color: #333; color: #eee; padding: 10px;}#banner button{ padding: 14px 40px;}#banner .inner .more{ margin-top: 245px;}.sub-heading{ line-height: 30px; margin: 20px;}6.回头查看header，进行优化，优化了nav下的logo展示
header完整HTML代码：
<header><!-- 页头开始 -->
<nav> <div class="logo"><a href="#">leo</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>leo</h1> <p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor iididunt.</p> <button>点我</button> <div class="more"> 更多 </div> </div> </div> </header><!-- 页头结束 -->header完整CSS代码：
nav{
background: #ccc; height: 50px;}#banner{ background: #777; height: 700px;}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: 50px; text-decoration: none; display: inline-block; height: inherit; color: #fff;}nav ul li.logo{ float: left;}#banner .inner{ max-width: 300px; text-align: center; margin: 0 auto; position: relative; top: 160px;}#banner .inner h1{ margin: 0;}button{ border: none; background-color: #333; color: #eee; padding: 10px;}#banner button{ padding: 14px 40px;}#banner .inner .more{ margin-top: 280px;}.sub-heading{ line-height: 30px; margin: 20px;}.logo{ font-size: 20px; font-weight: 700; letter-spacing: 1px;}.logo a{ color: #fff; text-decoration: none; padding: 10px;}