[01]项目实战-PC 端固定布局(1)
一．准备工作
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.元素选择器
元素选择器一般用于通用的 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 已经提供。
//最终完成版本的 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 .activea,#nav .link a:hover {
background-color: #000;
}备注：LOGO 采用的是 h1 标签，一般为了让搜索引擎更好的抓取关键字，我们建议一个页面只有一个 h1，而且是最重要的关键词放在里面。在首页上，最重要的关键词就是旅行社的名称。当然，如果在其他页面，比如新闻网站的单个新闻，最重要的应该是新闻标题，网站的名称就其次了。
