[06]项目实战-PC 端固定布局(6)

一．分离 CSS

本节课，我们将要创建一个新的页面：旅游资讯。那么，现在需要解决的问题是，如果把首页重复的部分移植到新的页面而减少冗余。最恰当的方法就是：将 CSS部分中重复的部分分离出来，单独创建一个 CSS，以便后续的页面重复调用。而首页的 HTML 重复的部分，一般是通过动态网页，比如 PHP 等解决重复问题，这里暂时不用解决。

分离 CSS，引入到新的页面后，还要为子栏目创建一个标头，不能使用首页的 search那么大的了。只能，重新做一个小的，放在标头部分，如下图：

//将重复的 header 和 footer 的 CSS 分离到 basic.css 中
<link rel="stylesheet" href="css/basic.css">
<link rel="stylesheet" href="css/style.css">

二．头部区域

//子栏目头部区域
<div id="headline">
<div class="center">
<hgroup>
<h2>旅游资讯</h2>
<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
</hgroup>
</div>
</div>

//CSS 部分
#headline {
width: 100%;
min-width: 1263px;
height: 300px;
background: linear-gradient(to bottom right, rgba(0,0,0,0.7),
rgba(0,0,0,0.0)), url(../img/headline.jpg) no-repeatcenter ;
}
#headline .center {
width: 1263px;
height: 300px;
margin: 0 auto;
}
#headline hgroup {
padding: 100px 0 0 50px;
}
#headline h2{
color: #eee;
font-size: 36px;
letter-spacing: 1px;
}
#headline h3{
color: #eee;
letter-spacing: 1px;
font-size: 20px;
}

三．内容区域

首先，分为侧栏和主栏。

//侧栏和主栏
<div id="container">
<aside class="sidebar">sidebar</aside>
<div class="list">list</div>
</div>

//CSS 部分
#container {
width: 1263px;
height: 1200px;
margin: 30pxauto;
}
#container .sidebar {
width: 320px;
height: 1200px;
background-color: #eee;
float: left;
}
#container .list {
width: 920px;
height: 1200px;
background-color: #ccc;

3ff0
float: right;
}