一.分离 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;
}