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

2018-02-27 11:06:32来源:oschina作者:PengTdy人点击

分享

一.分离 CSS

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


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


//将重复的 header 和 footer 的 CSS 分离到 basic.css 中


二.头部区域
//子栏目头部区域



旅游资讯


介绍各种最新旅游信息、资讯要闻、景点攻略等





//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;
}
三.内容区域

首先,分为侧栏和主栏。


//侧栏和主栏


list


//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;
}

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台