标签：
页头、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完整class代码：
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;
}
标签：
原文地址：http://www.cnblogs.com/liyo/p/4657863.html
