PC端固定布局[6]

2017年10月12日07:00:49 发表评论

本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现。

一.分离 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-repeat center ;
}
#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: 30px auto;
}
#container .sidebar {
    width: 320px;
    height: 1200px;
    background-color: #eee;
    float: left;
}
#container .list {
    width: 920px;
    height: 1200px;
    background-color: #ccc;
    float: right;
}

注:本章为第46课。本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: