第31章 项目实战-PC端固定布局[1]

2017年10月5日07:00:38 发表评论

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

一.准备工作

1.为了达到最低效果,第一个项目将采用 1440 x 900 的分辨率录制;因为,1024 根本无法容纳最低宽度的页面;页面采用 1280 的最低宽度设计,去掉滚动条为 1263 像素。

2.第一个项目是 PC 端的固定布局,会采用像素(px)单位。

3.项目素材图片,是课外独立设计好的,课程不会去设计,至于怎么设计的,我会简单的说明一下,让不懂美工的程序员,能设计出还能看的格调。

4.目前互联网大部分还是 PC 端页面为主,后面两个项目,会根据这个 PC 端改成流体移动端和响应式兼容模式。

二.创建项目

1.创建 index.html 文件,添加 html5 基本格式;

2.创建 img 和 css 两个目录;

3.创建 style.css 文件,存放在 css 目录,并在 html5 引入 css;

三.网站结构

在没有任何思路的情况下,可以参考大量同类型的网站,了解一下大致结构。我们将要做的网站是一个旅行社的企业网站。 经过大量参考, 首页上, 我们选择了最基本的四个模块。

//四个基本模块:nav 导航、header 头部、section 首页主体、footer 尾部

<nav></nav>
<header></header>
<section></section>
<footer></footer>

四.CSS 选择器

当四个模块建立起来,我们首先考虑的是应该选用哪种选择器。选择器有很多种方式,核心分为三种:1.元素选择器;2.id 选择器;3.class 选择器。我们分别具体分析一下。

当四个模块建立起来,我们首先考虑的是应该选用哪种选择器。选择器有很多种方式,核心分为三种:1.元素选择器;2.id 选择器;3.class 选择器。我们分别具体分析一下。

1.元素选择器

元素选择器一般用于通用的 CSS 定义,在局部或某个单一样式不适用。除非你的网站非常小,小到整个页面的元素标签不超过 5 个,那倒是可以使用的。

//元素定义型

body {}

2.id 定义型

id 定义型的特点,就是表明这个元素是唯一性的,不能再当前页面的其它元素再定义相同的 id。对于中小型网站,一般是单人设计制作,元素标签不太多,可以在布局元素上使用 id 定义型。比如<nav>、<header>、<section>、<footer>的顶层元素上。

//id 定义型

#nav {}

3.class 定义型

class 定义型的特点,就是可以定义多个实现相同的效果。而实际应用中,比较适合大中型 Web 项目。首先在多人维护的项目中,使用 class 也避免定义冲突;其次在一个元素需要多个样式切换或同时使用时,也只有 class 才能实现。再此项目偏大时,使用 class也避免多个模块切换的冲突。

//class 定义型

.center {}

通过上面的简单分析: 我们这个旅行社的网站属于中小型网站, 通用样式采用元素定义型;顶层的布局元素可以使用 id 定义型;其他标签一律 class 定义型。

五.完成导航

项目的第一节课,我们先完成如下的导航,LOGO 已经提供。

第31章 项目实战-PC端固定布局[1]

//最终完成版本的 html,期间可能会有几次转换过程

<nav id="nav">
    <section class="center">
        <h1 class="logo">瓢城旅行社</h1>
        <ul class="link">
            <li class="active"><a href="###">首页</a></li>
            <li><a href="###">旅游资讯</a></li>
            <li><a href="###">机票订购</a></li>
            <li><a href="###">风景欣赏</a></li>
            <li><a href="###">公司简介</a></li>
        </ul>
    </section>
</nav>

//最终版本的 CSS 部分,期间可能会有几次转换过程

body,h1,ul {
    margin: 0;
    padding: 0;
}
body {
    background-color: #fff;
}
ul {
    list-style: outside none none;
}
a {
    text-decoration: none;
}
#nav {
    width: 100%;
    height: 70px;
    background: #333;
}
#nav .center {
    width: 1263px;
    margin: 0 auto;
}
#nav .logo {
    width: 240px;
    height: 70px;
    background-image: url(../img/logo.png);
    text-indent: -9999px;
    float: left;
}
#nav .link {
    width: 650px;
    height: 70px;
    line-height: 70px;
    font-size: 18px;
    float: right;
}
#nav .link li {
    width: 120px;
    height: 70px;
    text-align: center;
    float: left;
}
#nav .link a {
    display: block;
    color: #eee;
}
#nav .active a,
#nav .link a:hover {
    background-color: #000;
}

备注:LOGO 采用的是 h1 标签,一般为了让搜索引擎更好的抓取关键字,我们建议一个页面只有一个 h1,而且是最重要的关键词放在里面。在首页上,最重要的关键词就是旅行社的名称。当然,如果在其他页面,比如新闻网站的单个新闻,最重要的应该是新闻标题,网站的名称就其次了。

注:本章为第41课。本次教程共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: