标签：
学习要点：
1.准备工作
2.创建项目
3.网站结构
4.CSS选择器
5.完成导航
主讲教师：李炎恢
本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端 固定布局来实现。
一．准备工作
1.为了达到最低效果，第一个项目将采用1440x900的分辨率录制；因为，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: outsidenonenone; } a { text-decoration: none; } #nav { width: 100%; height: 70px; background: #333; } #nav .center { width: 1263px; margin: 0auto; } #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 { }
备注：LOGO采用的是h1标签，一般为了让搜索引擎更好的抓取关键字，我们建议一个 页面只有一个h1，而且是最重要的关键词放在里面。在首页上，最重要的关键词就是旅行 社的名称。当然，如果在其他页面，比如新闻网站的单个新闻，最重要的应该是新闻标题， 网站的名称就其次了。
标签：
原文地址：http://www.cnblogs.com/zfc2201/p/5518397.html
