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

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尾部

四．CSS选择器

当四个模块建立起来，我们首先考虑的是应该选用哪种选择器。选择器有很多种方式，

核心分为三种：1.元素选择器；2.id选择器；3.class选择器。我们分别具体分析一下。

1.元素选择器

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

//元素定义型

body {}

2.id定义型

id定义型的特点，就是表明这个元素是唯一性的，不能再当前页面的其它元素再定义

相同的id。对于中小型网站，一般是单人设计制作，元素标签不太多，可以在布局元素上 使用id定义型。比如