[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;
    float: right;
}