网页设计与制作教程思维导图模板_ProcessOn思维导图、流程图

第一章 网页基础知识

1.1 认识网页和网站

1.1.1 网页、网站及常用术语

网页是网站的基本组成单元，是由HTML、CSS、JavaScript等编写的单个页面

常用术语：Internet，www，浏览器，URL，IP，域名，HTTP，发图片，站点，发布，超链接，导航条，客户机和服务器等。

1.1.2 静态网页和动态网页

静态网页通常由纯粹的HTML/CSS 语言编写。

动态网页技术包括JavaScript，ActiveX和Flash等。

1.2 网页的基本构成元素

1.2.1 文本

网页中最主要的信息载体。

1.2.2 图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息

1.2.3 超链接

超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等

超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。

1.2.4音频视频

常用的音频格式有mid 和mp3

1.2.5 交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。

1.2.6 其他常见元素

悬停按钮、JavaScript与ActiveX等各种特效

1.3 页面布局结构

1.3.1 网页页面布局

1.国字型

国字型是最常见的一种布局方式其上方为网站标题和广告条，中间为正文，左右分列两栏，用于放置导航和工具栏等，下方是站点信息。

2. 厂字型

与“国字型”相似，上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文下面为站点信息。

3.海报型

这种结构的布局方式比较简单主要用于突出需要表达的重点通常最上方为通栏的标题和导航条，下方是正文部分。

4. Flash型

常用于显示宣传网站首页，常以精美大幅图像为主题，设计方式多为Flash动画。

1.3.2 网页色彩搭配

1.网页安全色

网页安全色是红色、绿和蓝色。

2)网页中色彩的表达

颜色值最常见的表达方式是十六进制

颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”

3)常见的色彩搭配

采用相近色配色

采用近似色配色

1.4 Web前端技术简介

1.4.1 初识WEB前端

Web前端即指平时上网浏览的网页，如上网浏览新闻，查询快递信息，淘宝购物等都是在浏览页面。

1.4.2 Web前端开发的三大核心技术

1.HTML

2. CSS 语言

3.JavaScript 语言

1.4.3 前端开发工具

浏览器：谷歌浏览器 GoogleChrome

编辑器：HBilderX

1.5 HTML语法基础

1.HTML 文档标签<html>……</html>

<hml>处于文档的最前面，表示 HTML文档的开始，即浏览器从<html>开始解释，直遇到</html>

2.HTML 文档头标签<head>…</head>

HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为<head>头部的内容</head> 文档头部内容在开始标签<html>和结東标签</html>

3.文档编码

文档编码格式如下: <mela charset=" uU-8"/>

4.HTML 文档主体标签<body>·…</body>

<body>网页的内容</body>主体位于头部以后，以<body>为开始标签，</body>为结束标签。

1.6 创建HTML文档

1.打开文本编辑器。

2.输入HTML的基本结构代码。一个基本的HTML文档通常包括以下元素： <!DOCTYPE html>：声明文档类型和HTML版本。 <html>：根元素，包含整个HTML文档。 <head>：头部信息，包含文档的元数据，如标题、字符编码等。 <title>：定义网页的标题。 <body>：包含可见的页面内容，比如文本、图片、链接等.

3.将文件保存时，选择“所有文件”，文件名后缀为.html

4.使用浏览器打开这个HTML文件。双击文件或者在浏览器中选择“文件”>“打开文件”，然后选择刚才保存的.html 文件即可看到你的网页内容

1.7 网页头部标签

1.7.1 <title>标签

1.7.2 <meta>标签

name属性主要用于描述网页摘要信息，与之对应的属性值为content

1.7.2.1 keywords

keywords用来告诉搜索引擎网页使用的关键字。

1.7.2.2 description

description 用来告诉搜索引擎网站主要的内容

1.7.3 <link>标签

用于连接外部资源和当前HTML文档，只在首部标签<head>和<head>中

格式为<link rel="stylesheet"href="外部样式表文件名.css"type="text/css”/>

1.7.4 <script>标签

<scriptype="tex/ ess" src="脚本文件名 n.js"></scripl>

1.8  HTML5文档注释和特殊符号

注释标签以“<！--”开 头，以“-->”结束

第二章网页制作的排版方法

2.1 文字与段落排版

2.1.1 段落标签

属性align：设置段落文字在网页上的对齐方式，包括left（左对齐）、center（居中）和right（右对齐），默认为left。

文字

2.1.2 标题标签

标题使用<h1>至<h6>标签进行定义

<h1>定义最大的标题，<h6>定义最小的标题

2.1.3 换行标签

标签将打断HTML文档中正常段落的行间距和换行

放在任意一行中都会使该行换行

2.1.4 水平线标签

<hr/>水平线，size:横线粗细，width:横线长度，color:横线颜色

2.1.5 预格式化标签

<pre>标签可定义预格式化的文本

<pre>可以让tab键，换行键，空格键全部有效

2.1.6 缩排标签

缩排标签的语法为: <blockquote>文本</blockquote>

<blockquote>标签可定义一个块引用

<blockquote>与</ blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

2.2 超链接

2.1.1.1 超链接的定义

所谓超链接就是页面与页面之间的跳转

2.2.1.2 超链接的分类

根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接等;根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等。

2.2.1.3 路径

1)绝对路径

2)根目录相对路径。

3)文档目录相对路径。

2.2.2 超链接的应用

2.2.2.1 锚点标签<a>···</a >

使用<a>标签来建立一个链接，通常<a>标签又称为锚。建立超链接的标签以<a>开始，以</a >结束

建立超链接时，href属性定义了这个超链接所指的目标地址，也就是路径。如果要创建 个不链接到其他位置的空超链接，可用“#”代替URL。

属性target：设定链接被单击后所要开始窗口的方式有以下4种： （1）blank。在新窗口中打开被链接的文档。 （2）self。默认值。在相同的框架中打开被链接的文档。 （3）parent。在父框架集中打开被链接的文档。 （4）top。在整个窗口中打开被链接的文档。

2.2.2.2 指向其他页面的超链接

在当前页面与其他页面建立超链接，根据目标文件和当前文件的目录关系有4种写法（采用相对路径）

1.链接到同一目录：<a href="目标文件名.html">热点文本</a> 2.链接到下一级目录：<a href="子目录名/目标文件名.html">热点文本</a> 3.链接到上一级目录：<a href="../目标文件名.html">热点文本</a> 4.链接到同级目录：<a href="../子目录名/目标文件名.html">热点文本</a>

2.2.2.3 指向书签的超链接

用<a>标签对网页元素做一个记号，类似于用于固定船的锚，所以书签也叫锚记或锚点。在<a>标签的name属性中定义：<a name="记号名">目标为文本附近的内容</a>

先打标签，设置标签名——》    <a name="p"></a> 在跳转标签——》<a href="#p">段落</a> 点击段落就可以跳转到标签处

1.指向页面内容书签的超链接。需要定义两个标签：一个超链接标签，一个书签标签

超链接标签格式： <a href="记号名">热点文本</a>

2.指向其他页面书签。需要定义两个标签：一个是当前页面超链接书签，一个是跳转页面的书签标签

当前页面超链接书签：<a href="目标文件名.html#记号名">热点文本</a>

2.2.2.4 指向下载文件的超链接

2.2.2.5 指向电子邮件的超链接

2.3 图像

2.3.1 网页图像的格式及使用要点

2.3.1.1 常见的网页图像格式

GIF

JPEG

PNG

2.3.1.2 使用网页图像的要点

高质量的图像因其图像体积过大，不太适合网络传输。

网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力。

.如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。相对路径是相对于文件而言的，从相对文件所在目录依次往下直到文件所在的位置。

2.3.2图像标签

2.3.3图像超链接

2.3.4设置网页背景图像

背景属性将被背景设置作为图像，属性值为图像的URL，格式：<boby background="背景图像路径">

2.3.5图文混排

图文混排技术是指设置图像与同一行中的文本、图像、插件或其他元素的对齐方式。在制作网页时往往要在网页中的某个位置插入一个图像，使文本环绕在图像的周围。img常签的align 属性用来指定图像与周围元素的对齐方式，实现图文混排效果。

2.4 列表

2.4.1无序排列

当创建一个无序列表时，主要使用HTML的<ul>标签和<li>标签来标记

<ul>标学标识一个无序列表的开始；<li>标签标识一个无序列表项

type 取值可以为disc（实心圆）、circle（空心圆）、squam(方框）,img src=""(图片）

<ul type="符号类型"> <li type="符号类型 1">第一个列表项</li> <li type="符号类型2">第二个列表项</li> </ul>

2.4.2有序列表

使用<ol>标签可以建立有序列表，表项的标签仍为<li>。格式: <ol type=”符号类型”> <li type=”符号类型1”>表项1 <li type=”符号类型 2”>表项2 </ol>

<oltype="1">        序号为数字 <oltype="A">       序号为大写英文字母 <oltype ="a">      序号为小写英文字母 <olype="I">         序号为大写罗马字母 <oltype="i">        序号为小写罗马字母

2.4.3定义列表

定义列表不是带有前导字符的列项目，而是一实物以及与其相关的解释。当创建一个定义列表时，主要用到3个 HTML标签：<dl>标签<dt>和<dd>标签。可以使用dl创建自定义列表，使用dt和dd定义列表中具体的数据项.一般情况下使用dt定义列表的二级列表项，也可以认为是dd的一个概要信息，使用dd来定义最底层的列表项

格式：<dl>       <dt>……第一个标题项……</dt>      <dd>……对第一个标题项的解释文字……</dd>      <dd>……第二个标题项的……</dt>      ……      <dd>……对第二个标题项的解释文字……</dd>

2.4.4嵌套列表

所谓嵌套列表，就是无序列表与有序列表出嵌套混合使用

第三章表格布局与表单交互

3.1 表格概述

3.1.1 表格的结构

3.1.2 表格的基本语法

3.2表格属性设置

3.2.1 表格边框属性

语法：<table border="" bordercolor="" bordercolorlight=""bordercolordark="">··.</table>

3.2.2 表格的宽度和高度属性

语法： <table width=" height="">…</table>

3.2.3 表格背景颜色与表格图像属性

语法： <table bgcolor="" background="">...</table>

3.2.4 表格边框样式属性

语法： <table frame=""rules="">......内容.....</table>

3.2.5 表格单元格间距、单元格边距属性

语法： <table cellspacing="" cellpadding="" </table>

1.cellspacing：值的单位为像素或百分比，默认值为2px。 2.cellpadding：值的单位为像素或百分比。

3.2.6 表格水平对齐属性

语法： <table align="left I center | right"></table>

3.2.7 设置表格的（tr）标记行的属性

语法： <table align="center"> <tr align="left | center | right" valign="top I|middle | bottom"> <td>...</td> </tr> ... </table>

3.2.8 设置单元格的属性

3.2.9 表格单元格跨行、跨列属性

3.2.9.1 单元格跨行

使用单元格td标记的rowspan属性可以设置单元格跨行合并。 <td rowspan="行数">….</td>

3.2.9.2.单元格跨列

使用单元格td标记的colspan属性可以设置单元格跨列合并。 语法： <td colspan="列数">·...</td>

3.3 表格嵌套

语法： <table>    <tr> .... </tr> <tr>    <td>                 <table> <tr>    ..... </tr>    </table>     </td>      </tr>     <tr>     ......        </tr>      </table>

3.4 表单

3.4.1 表单标记

语法： <form method="post" action =""> <input type="text" name=""/> <textarea name ="" rows="" cols=">......<textarea> <select name=""> <option value="" selected></option> <option value=""></option> </ select></form>

3.4.2 定义域和域标题

语法： <form> <fieldset> <legend alig="left I center | right">域标题内容</legend> </fieldset> </form>

3.4.3 表单信息输入

语法： <input name="" type=""/>

1.单行文本输入框

语法： <input name="" type="text" maxlength="" size="" value="" readonly/>

说明：单行文本输入框的主要属性有 name，maxlength,size,value和readonly

2.密码输入框

说明：密码输入框的主要属性有 name，maxlenth和size，取值及说明与单行文本输入框相同

3.复选框

语法： <imput name="" type=" checkbox" value=" "checked/>

说明：复选框的主要属性有 name，value 和checked，其中 checked属性用于设置初饰选项

4.单选按钮

语法： <input name="" type="radio" value="" checked/>

单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值应该不同。

5.图像按钮

语法： <input name="" type="image" src="" width="" height=""/>

6.提交按钮

语法： <input name="" type="submit"value="提交"/>

一定要给value 属性赋值。

7.重置按钮

语法： <input name=" "type="reset" value =""/>

说明：重置按钮的属性主要有name和value，其属性、取值及说明与提交按钮的相同。

8.普通按钮

语法： <input name="" type="button" value="" onclick=""/>

9.文件选择框

语法： <input name=""type="file" value=""/>

10.隐藏框

语法： <input name="" type="hidden" value=""/>

3.4.4 多行文本输入框

<textarea name=""rows=”"cols=""wrap=""/>初始信息内容</textarea>

说明：多行文本输入框 textarea标记是成对标记，其主要属性有name，rows，cols和wrap等

3.4.5 下拉列表框

语法： <select name="" size="" multiple> <option value=""selected>文字信息1</ option> <option value="">文字信息2</option> </select>

说明：select 标记是成对标记，option标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有name，size和multiple 等属性。option 标记有value和lselected 等属性。select 标记与option标记必须配合使用。每一选项必须指定一个显示的文本和一个value值，显示文本通常附在option 标记后面。

第四章 CSS样式基础

4.1 CSS概述

4.1.1.CSS的基本概念

以HTML为基础，设置网页的外观显示样式，采用css技术可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制。

4.1.2传统HTML的缺点

1.维护困难：为了修改某个特殊标记格式需要很多时间，对于整个网站而言后期修护和维护的成本很高。 2.标记不足：HTML自身的标记并不丰富，很多标记都是为网页内容服务的，而关于美工的标记，例如文字间距、段落缩进等，这些HTML中都很难找到。 3.网页过“胖”：由于对各种风格样式没有统一进行控制，用HTML编写的页面往往是体积过大，占用了很多宝贵的带宽。 4.定位困难：在整体页面布局时，HTML对于各个模块的位置调整很困难。

4.1.3.CSS的特点和优势

特点： (1）页面的字体变得更漂亮，更容易编排。 (2）可以轻松控制页面的布局。 (3）可以在大多数浏览器上使用。 (4）以前一些必须通过图像转换才能实现的功能，现在只要用CSS就可以轻松实现，页面下载更快 (5）可以使用一个CSS文件控制整个网站的显示风格。只要修改该CSS文件中相应的行就可以改变整个网站上页面的显示样式。

4.1.3.1.表现和内容分离

CSS通过定义HTML标记如何显示控制网页的格式，使得页面内容和表现分离，简化了 网页格式设计，也使得对网页格式的修改更方便。

4.1.3.2.增强了网页的表现力

CSS样式属性提供了比HTML更多的格式设计功能。例如，可以通过CSS样式去掉网页 中超链接的下划线，甚至可以为文字添加阴影效果等。

4.1.3.3.使整个网站显示风格趋于统一

将CSS样式定义到样式表文件中，然后在多个网页中同时应用样式表文件中的样式就可以确保多个网页具有一致的格式，并且可以随时更新样式表文件，实现自动更新多个网页的格式功能，从而大大降低网站的开发与维护的成本。

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

存放CSS样式文件的目录一般命名为style或css

4.1.4.2.样式文件的命名规则

在项目初期，会把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，为了网站性能上的考虑，会将不同的CSS文件整合到一个CSS文件中，这个文件一般命名为style.css或css.css。

4.1.4.3.选择器的命名规则

所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。

4.1.4.4.CSS代码注释

css以“/*”开始，“*/”结束，注释可以是单行也可以是多行。

4.1.4.5.CSS代码缩进

代码缩进可以保证CSS代码的清晰可读。在实际应用中，可以按一次Tab键来缩进选择器，按两次Tab键来缩进声明和结束大括号。这样的排版规则便于查询，避免代码混乱。

4.2 CSS语法基础

4.2.1css基本语法

4.2.1.1.基本语法

selector{ property1: value1; property2:value2; property3: value3;...} 选择器（属性1：属性值1；属性2：属性值2；属性3：属性值3；)

4.2.1.2.语法说明

（1）选择器：选择器可以是HTML标记名称或者属性的值，也可以是自定义的标识符。          (2）属性/属性值对。“属性：属性值”必须一一对应，属性与属性值之间必须用“：“连接，每个属性/属性值对之间用分号（；）隔开。 （3）属性：在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号（一）分隔，例如背景颜色属是background-color；而在脚本语言中，对象属性则连写成 backgroundColoro在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。                                  (4)复合属性：在css中有些属性可以表示多个属性的值。 （5）多个属性指：在css中有些属性可以设置多个属性的值。

4.2.2.CSS选择器类型

4.2.2.1.标记选择器

标记选择器也可以叫元素选择器即直接使用HTML标记名称作为选择器，它定义的样式作用于页面之中所有与选择器同名的标记

4.2.2.2.class选择器

class选择器也叫"类"选择器，可以给指定标签设置一个class属性和class值如何通过class选择器找到对应的标签，设置class值，即添加css样式。

4.2.2.3.ID选择器

用于对某个单一元素的样式，ID选择器在HTML中使用一次，针对性更强，定义ID选择器时需要在id名称前加一个#。

4.2.2.4.伪类选择器

特别注意：a：hover 必须位于a：link和a：visited之后，才有效；a：active 必须位于a:hover 之后才有效

4.2.3.CSS选择器声明

4.2.3.1.集体生明

集体声明代码如下: h3 .h4,h5,p{ color:red ; font-size: 18px; }

4.2.3.2.全局声明

对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望通过逐个加入集体声明列表的方式。这时可以利用全局声明符号“*”，代码如下. *{ color: red; font-size:18px; }

4.2.3.3派生选择器（上下文选择器）

根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器允许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使CSS代码变得更加整洁。例如，要让列表项<li>中的标记变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： li strong { font-style ; italic;font-weight; normal;} strong { font-weight:bold;}

4.3 CSS引入方式

4.3.1.内联样式表（行内样式表）

4.3.1.1.基本语法

<标记 style=“属性1：属性值 1;属性 2：属性值2；…">修饰的内容</标记>

4.3.1.2.语法说明

(1)标记是指HTML标记，如p，hl和body等标记; (2)标记的style定义的声明只对自身起作用； (3)style 属性的值可以包含多个声明，每一声明之间用“；”分隔; (4标记自身定义的style样式优先于其他所有样式定义。

4.3.2.内部样式表

4.3.2.1.基本语法

4.3.2.2.语法说明

style 标记是成对标记，有1个type 属性是指style元素以CSS的语法定义。 选择器1,选择器n，可以定义n个选择器，再定义声明部分。 属性和属性值之间用冒号连接，“属性/属性值”对之间用分号分隔。

4.3.3.外部样式表

4.3.3.1.链接外部样式表

链接式是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表中，通过网页的<head></head标签中使用<link>标记将外部样式表文件链接到HTML文档中。 （1）基本语法： <link type="text/css" rel="stylesheet" href="外部样式表名.css"

4.3.3.2.导入外部样式表

导入式是将一个独立的CSS文件导入HTML文档中，其是在FTME，文档《hes中应用 style>标签，并在<style>标签中的开头处用@import语句，即可导入外部样式表文件。 （1）基本语法： <style type=" text/css"> @import url("CSS文件路径"); /*此处还可以存放其他CSS样式* </style>

4.4 CSS的属性单位

4.4.1.长度、百分比单位

4.4.1.1.相对类型

其指以该属性的前一个属性的单位值为基础来完成目前的设置，在浏览器内常用且支持的两种长度单位是以相对类型出现的。如用cm（当前字母中，字母的宽度）作为属性单位时，将会依据父元素的font-size 属性，如果没有父元素，则参考浏览器的默认值字号。

4.4.1.2.绝对类型

4.4.2.色彩单位

4.4.2.1.用十六进制数方式表示色彩值

div{ color:#FF0000; }

4.4.2.2.用色彩名称方式表示色彩值

4.4.2.3.使用RGB（x,y,z）函数表示

x,y,z分别是红,绿,蓝的值x，y，z属于[0,255],也可以用百分比表示。

4.5.CSS继承与层叠

CSS继承即子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不影响父标记，值得注意的是，并不是所有的属性都会自动传给子元素，有的属性不会继承父标记的属性值

CSS的全称是“层叠样式表”，层叠特性和“继承”不一样，可以把层叠特性理解成“冲突”的解决方案，即对同一内容设置了多个不同类型样式产生冲突时的处理，CSS规定如下优先级为：行内样式>id样式>class样式>标记样式。

样式表的层叠性就是继承性，样式表的继承规则是：外部的元素样式会保留下来，由各元素所包含的其他元素继承；所有在元素中嵌套的元素都会继承外层元素指定的属性，有时会把多层底套的样式叠加在一起，除非进行更改；遇到冲突的地方，以最后定义为准。

4.6 元素类型

4.6.1.块级元素(display:block)

display属性设置为block将显示块级元素，块级元素的宽度为100%，而且后面隐藏附带有换行符，使块级元素始终占据一行，如<div>常常被称为块级元素，这意味着这些元素显示为一块内容，标题、段落、列表、表格、分区 div 和 body 等元素都是块级元素

4.6.2.行级元素(display:inline)

行级元素也称内联元素，display属性设置为inline将显示行级元素，元素前后没有换行符，行级元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小超链接、图像、范围(span)、表单元素等都是行级元素。

4.6.3.列表项元素(display:list-item)

list-item 属性值表示列表项目，其实质上也是块状显示，是一种特殊的块状类型，它加了缩进和项目符号。

4.6.4.隐藏元素(display:inline)

none 属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过把display设置为none，该元素及其所有内容就不再显示，也不占用文档中的空间

第五章CSS盒模型

5.1盒模型的定义

盒模型是在CSS中用来描述和控制一个元素在页面中所占空间的一种模型。在盒模型中，每个元素被看作一个矩形的盒子，其大小由四个边界确定：上边界（top）、下边界（bottom）、左边界（left）和右边界（right）。这些边界围成一个矩形，决定了元素的尺寸和位置。

5.2 CSS元素的高度和宽度

5.2.1 盒模型的宽度

盒模型的宽度=左外边距(margin-left)+左边框(border-left)+左内边距(padding-left)+内容宽度(width)+右内边距(padding-right)+右边框(border-right)+右外边距(margin-right)。

5.2.2 盒模型的高度

盒模型的高度=上外边距(margin-top)+上边框(border-top)+上内边距(padding-top)+内容高度(height)+下内边距(padding-bottom)+下边框(border-bottom)+下外边距(margin-bottom)

5.3 边距设置和边框设置

5.3.1 外边距设置

5.3.1.1 上外边距

margin-top:length|percent|auto

参数：length包括长度值和长度单位，包括绝对单位和相对单位。percent 是基于父对等的高度。auto值为自动提取边距值，是默认值。 说明：设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元的height属性或width属性，或者设定position 属性为absolute。

5.3.1.2 右外边距

margin-right：length | percent | auto

5.3.1.3 下外边距

margin-bottom：length | percent |auto

5.3.1.4 左外边距

margin-left:length | percent | auto

5.3.1.5 外边距

margin-left:length | percent | auto

5.3.2 外边距的合并

5.3.2.1 行级元素外边距合并

行级元素的盒子相遇，盒子和盒子之间的距离等于两个盒子外边距的总和。

5.3.2.2 块级元素外边距合并

块级元素的盒子相遇，盒子和盒子之间的距离等于两个盒子中外边距的较大者

5.3.3 内边距设置

元素的内边距用来控制边框和内容区之间的空白距离，并非实体，用padding 属性麦示，类似于HTML中表格单元格的填充属性。内边距（padding)和外边距（margin）很格似，都是透明不可见的，只是内边距和外边距之问还有边框。从语法和用法上来说，内边要的属性与外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性，paddig属性接受length值或percent值，区别于外边距，内边距不可使用负值。

5.3.4 边框设置

5.3.4.1上边框

border-top:border-style | border-width | border-color

5.3.4.2右边框

border-right:border-style | border-width | border-color

5.3.4.3下边框

border-bottom：border-style | border-width | border-color

5.3.4.4 左边框

border-left：border-style | border-width | border-color

5.3.4.5 边框样式

5.3.4.6 边框宽度

5.3.4.7 边框颜色

在CSS中，边框颜色是通过border-color 属性来设置的，该属性可以使用色值，包括用颜色命名的值、十六进制参数或RGB值。但是如果对象的boder。none 或者border-width设置为0，本属性将失去作用。

5.3.5 新增边框属性

5.3.5.1圆角边框

/* 圆角边框 */ border-radius: 25px;

5.3.5.2阴影边框

/*阴影边框右偏移下偏移量宽度颜色*/ box-shadow: -20px 10px 30px #ffff00;

5.3.5.3图片绘制边框

/* 图片绘制边框 */ } img{ width: 40px; height: 30px; }

5.4 CSS元素的定位

定位（position）的思想是，它允许你定义元素框相对于其正常位置应该出现的位置 或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 position属性值有4个。 position: static | relative | absolute | fixed 参数：static 是默认值，默认没有定位，或者用于取消特殊定位的继承，恢复默认，又称静态定位。relatives是相对定位，生成相对定位的元素，相对于其正常位置进行定位。#solute 是绝对定位，相对于父元素或者浏览器窗口进行定位，需要top、right、bottom 和陆属性辅助完成。fixed 是固定定位，相对于浏览器窗口进行定位，需要 top、right、botom和left 属性辅助完成。

5.4.1 static 定位

static 是HTML元素的默认值，不受top、right、bottom和left属性影响，元素出现在正 常的文档流中

5.4.2 relative定位

relative 不脱离文档流的布局，需要参照父元素的四条边（不是浏览器），设置自身岗top、right、bottom和 left 属性的参数，从盒子中独立出来浮在上面。相对定位只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置

5.4.3 absolute定位

absolute 脱离原来文档流的布局，浮在其他盒子上面，独立出来。子盒子原来位置的空间由后面的盒子填充。绝对定位的起始位置为最近已定位的父盒子，如果父盒子没有定位，那么子盒子的起始位置为浏览器，并随着滚动条的移动而改变位置。

相对浏览器绝对定位

相对父盒子绝对定位

5.4.4 fixed定位

/* 5.4.4 fixed定位 */ position: fixed; bottom: 10px; right: 30px;}

5.5 CSS元素的浮动

5.5.1 盒子的浮动添加

任何元素都可以浮动，浮动元素会变成一个块状元素，元素的水平浮动就是通过其fat属性的设置，使元素向其父元素的左侧或右侧靠拢，间接设置一个元素的文本环绕方式，从而改变原来的竖直排列方式。此时元素的宽度不再延伸，大小将由其内容的宽度而定。 语法： float: left | right | none 参数：left 元素浮动到左边，即向左侧靠拢，则右边可以有文字环绕；right元素浮动到右边，即向右侧靠拢，左边可以有文字环绕；默认值 none就是标准流通常的显示状态

5.5.2 盒子的浮动清除

元素浮动后，下面的元素内容会自动上移，结果就会受到上面浮动元素的影响，如果想 要清除这种影响，需要使用clear属性完成。 由于浮动元素可以清除，是相对定位属性的优势，因而浮动属性成为控制分栏布局的最 好工具。 语法： clear: left | right | both | none 参数：left 清除左边浮动元素，即不允许左边有浮动对象；right清除右边浮动元素，即允许右边有浮动对象；Both同时清除左右两边的浮动元素，即不允许左右两边有浮动对默认值none。

第六章元素应用CSS

6.1 使用CSS设置字体样式

6.1.1.字体类型

格式如下： fonl-family:字体名称； 参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。 说明：用 font-family 属性可控制显示字体。不同的操作系统，其字体名是不同的。对于 Windows 系统，其字体名就如 Word中的“字体”列表中所列出的字体名称。

6.1.2.字体大小

在设计页面时，通常使用不同大小的字体来突出要表现的主题，在css样式中使用font-size 属性设置字体的大小，其值可以是绝对值也可以是相对值。常见的有“px”（绝对位)、“pt”（绝对单位)，“em”（相对单位）和“%”（相对单位）等。 语法： font-size:绝对尺寸|相对尺寸； 参数：绝对字体尺寸是根据对象字体进行调节的，包括xx-mall、x-small，small，me-dium, large, x-large 和xx-large的7种字体尺寸，这些尺寸都没有精确定义，只有相对而言的，在不同的设备下，这些关键字可能会显示不同的字号。 相对尺寸是利用百分比或者em以相对父元素大小的方式来设置字体尺寸。

6.1.3.字体粗细

CSS样式中使用 font-weight属性设置字体的粗细，它包含 normal, bald,bidee ghter、100、200、300、400、500、600、700、800和900多个属性值。                                   语法： font-weight:bold | number | normal | lighter/100-900; 参数：normal 表示默认字体，bold 表示粗体，bolder 表示粗体再加粗，ligiter表示比赛 字体还细，100~900共分为9个层次（100、200、…·、900，数字越小字体越细、数字越 字体越粗，数字值400相当于关键字 normal，700等价于bold)。 说明：设置文本字体的粗细。

6.1.4.字体倾斜

CSS 中的 font-style属性用来设置字体的倾斜。                                                                              语法： font-style:normal | litalic | oblique; 参数：nommal为“正常”（默认值)，italic为“斜体”，oblique 为“倾斜体”。 说明：设置文本字体的倾斜。

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

使用 text-align属性可以设置元素中文本的水平对齐方式。                                                             语法： tert-align:left | right | center | justify; 参数：left 为左对齐，right为右对齐，center为居中，justify 为两端对 说明：设置对象中文本的对齐方式。

6.2.2.行高

段落中两行文本之间垂直的距离称为行高。在HTML中是无法控制行高的，在CSS样 中，使用line-beight属性控制行与行之间的垂直间距。                                                                   语法： line-height:lengh | normal; 频:length 为由百分比数字或由数值、单位标识符组成的长度值，允许为负值。其? 真值是基于字体的高度尺寸。normal为默认行高。 说用：设置对象的行高。

6.2.3.文本的修饰

使用CSS样式可以对文本进行简单的修饰，lext属性所提供的text-decoration属性，主 实现文本加下划线、顶线、删除线及文本闪烁等效果。                                                                   语法： text-decoration:underline | blink | overline | line-through | none; 参数：underline 为下划线，blink 为闪烁，overline 为上划线，line-through为贯穿线， e为无装饰。 说明：设置对象中文本的修饰。对象a、u、ins的文本修饰默认值为underline。对象 strike、s、del的默认值是 line-through。如果应用的对象不是文本，则此属性不起作用。

6.2.4.段落首行缩进

首行缩进是指段落的第一行从左向右缩进一定的距离，而首行以外的其他行保持不 其目的是便于阅读和区分文章整体结构。 在Web页面中，将段落的第一行进行缩进，同样是一种最常用的文本格式化效果，在CSS样式中text-indent属性可以方便地实现文本缩进。可以为所有块级元素应用text-indent，但不能应用于行级元素。如果想把一个行级元素的第一行缩进，可以用左内边距或外边距创造这种效果。               语法： text-indent:length; 参数：length 为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。 说明：设置对象中的文本段落的缩进。本属应用于整块的内容。

6.2.5.首字下沉

在许多文档的排版中经常出现首字下沉的效果，所谓首字下沉是指设置段落的第一行第个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。 在CSS样式中伪对象“：first-letter”可以实现对象内第一个字符的样式控制。

6.2.6.字符间距

letter-spacing 为字符间距属性，可以设置字符与字符间的距离。                                                  语法： letar-spacing:length I normal; 参数：normal为默认值，定义字符间的标准间距。length 表示由浮点数字和单位标识组成的长度值，允许为负值。

说明：该属性定义元素中字符之间插人多少空白符。如果指定为长度值，会调整字符间的标准间距，允许指定负长度值，这会让字符之间变得更拥挤。

6.2.7.文本的截断

在CSS样式中 text-overflow 属性可以实现文本的截断效果，该属性包含clip和ellipsis两个属性值。前者表示简单的裁切，不显示省略标记（…·)；后者表示当文本溢出时显示省略标记（…）。        语法： text-overflow:clip I ellipsis; 参数：clip定义简单的裁切，不显示省略标记。ellipsis 定义当文本溢出时显示省路标记。 说明：设置文本的截断。要实现溢出文本显示省略号的效果，除了使用 text-overflow眉性以外，还必须配合 white-space:nowrap(强制文本在一行内显示)和 overflow:hidde（溢出内容为隐藏）同时使用才能实现。

6.2.8.文本的颜色

在CSS样式中，对文本增加颜色修饰十分简单，只需添加 color属性即可。color属性的 语法： color:颜色值；

6.2.9.文本的背景颜色

在HTML中，可以使用标签的bgcolor属性设置网页的背景颜色。而在CSS里，不仅可以用background- color属性来设置网页背景颜色，还可以设置文本的背景颜色。                                 语法： background-color：color | transparent 参数：color用于指定颜色。transparent表示透明的意思，也是浏览器的默认值。 说明：background-color不能继承，默认值是 transparent。如果一个元素没有指定背景 色，那么背景就是透明的，这样其父元素的背景才能看见。

6.3 使用CSS设置图像样式

6.3.1.设置图像边框

图像的边框就是利用 border属性作用于图像元素而呈现的效果。在HTML中可以直 通过<img>标记的 border属性值为图像添加边框，属性值为边框的粗细，以像素为单位，从 而控制边框的粗细。当设置 border 属性值为0时，则显示为没有边框。

6.3.2.图像缩放

使用CSS样式控制图像的大小，可以通过width和height两个属性来实现。需要注意的是，当 width 和height两个属性的取值使用百分比数值时，它是相对于父元素而言的，如果将这两个属性设置为相对于body的宽度或高度，就可以实现当浏览器窗口改变时，图像大小也发生相应变化的效果。

6.3.3.设置背景图像

在网页设计中，无论是单一的纯色背景，还是加载的背景图片，都能够给整个页面滑来丰富的视觉效果。CSS 除了可以设置背景颜色，还可以用 background-image来设置背景用像。                      语法： background-image:url(url) | none; 参数：url表示要插入背景图像的路径。nome表示不加载图像。 说明：设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到<baby>标签中。

6.3.4设置背景重复

背景重复（background-repeat)属性的主要作用是设置背景图片以何种方式在网页中示。通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节大小。 在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只者沿着一个方向平铺，可以使用 background-repeat属性来控制。                                                                          语法： background-repeat:repeat | no-repeat | repeat-x | repeat-y; 参数：repeat表示背景图像在水平和垂直方向平铺，是默认值；repeat-x表示背景图在水平方向平铺；repeal-y表示背景图像在垂直方向平铺；no-repeat表示背景图像不平铺。 说明：设置对象的背景图像是否平铺及如何平铺，必须先指定对象的背景图像。

6.3.5.背景图像定位

语法： background-position:length | length; background-position:positional | position;

参数：length为百分比或者由数字和单位标识符组成的长度值，position 可取top，center、bottom、left、right之一。

说明：利用百分比和长度来设置图像位置时，都要指定两个值，并且这两个值都要用格隔开，一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，要直位置的参考点是网页页面的上边。关键字在水平方向的主要有left、center、right，关键在垂直方向的主要有top，center、bottom。水平方向和垂直方向相互搭配使用。

6.3.5.1.使用关键字进行背景定位

关键字参数的取值及含义如下： top：将背景图像同元素的顶部对齐。 bottom：将背景图像同元素的底部对齐。 left：将背景图像同元素的左边对齐。 right：将背景图像同元素的右边对齐。 center：将背景图像相对于元素水平居中或垂直居中。

6.3.5.2.使用长度进行背景定位

/* 6.3.5.2.使用长度进行背景定位 */ background-position: 20px 50px;

6.3.5.3.使用百分比进行背景定位

使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比值置 对齐。

6.4 使用CSS设置表单样式

6.4.1.使用CSS修饰常用的表单元素

6.4.1.1.修饰文本域

文本域主要用于采集用户在其中编辑的文字信息，通过CSS样式可以对文本域内的字体，颜色以及背景图像加以控制。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本域修饰</title> <style type="text/css"> .text1{ border: 1px solid #f60; color: #03c; } .text2{ border: 1px solid #c3c; height: 20px; background: #fff url(img/password_bg.JPG)left center no-repeat; padding-left: 20px; } .area{ border: 1px solid #00f; overflow: auto; width: 99%; height: 100px; } </style> </head> <body> <input type="text" name="nornal"/> 默认样式的文本域 <input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1"/> 改变边框颜色和文字颜色的文本域，看起来更加醒目。 <input name="pass" type="password" class="text2"/> 增加了背景图片的文本域，看起来更加形象直观。 <textarea name="cha" cols="45" rows="5" class="area"> 改变边框颜色的多行文本域 </textarea> </body> </html>

6.4.1.2.修饰按钮

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>按钮修饰</title> </head> <style type="text/css"> .btn01{ background: url(img/btn_bg02.jpg)repeat-x; border: 1px solid #f00; height: 32px; font-weight: bold; padding-top: 2px; cursor: pointer; font-size: 14px; color: #fff; } .btn02{ background: url(img/btn_bg03.jpg) 0 0 no-repeat; width: 107px; height: 37px; border: none; font-size: 14px; font-weight: bold; color: #d84700; cursor: pointer; } </style> <body> <input name="button" type="submit" value="提交"/> 默认风格的“提交”按钮 <input name="button01" type="submit" class="btn01" id="button" value="自适应宽度按钮"/> 自适应宽度按钮 <input name="button02" type="submit" class="btn02" id="button2" value="免费注册"/> 固定背景图片的按钮 </body> </html>

6.4.1.3.制作登录表单

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>制作登陆表单</title> <style type="text/css"> .login{ margin: 0 auto; width: 280px; padding: 14px; border: dashed 2px #b7ddf2; background: #ebf4fb; } .login *{ margin: 0; padding: 0; font-family: 宋体; font-size: 12px; line-height: 1.5em; } .login h2{ text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px; padding-bottom: 5px; border-bottom: solid 1px #b7ddf2; } .login.content{ padding: 5px; } .login.frm_cont{ margin-bottom: 8px; } .login.username input,.login.password input{ width: 180px; height: 18px; padding: 2px 0px 2px 18px; border: solid 1px #aacfe4; } .username input{ background: #fff url(img/username.JPG) no-repeat left center; } .password input{ background:#fff url(img/lock.JPG) no-repeat left center; } .login.btns{ text-align: center; } </style> </head> <body> <div class="login"> <h2>用户登录</h2> <div class="content"> <form action="" method="post"> <div class="frm_cont username">用户名 <label for="username"></label> <input type="text" name="username" id="username"/> </div> <div class="frm_cont password">密&nbsp;&nbsp;码 <label for="password"></label> <input type="password" name="password" id="password"/> </div> <div class="btns"> <input type="submit" name="button1" id="button1" value="登录"/> <input type="button" name="button2" id="button2" value="注册"/> </div> </form> </div> </div> </body> </html>

第七章利用CSS和多媒体美化页面

7.1 CSS链接的美化

7.1.1.文字链接的美化

设计者为了改变这种最基本的超链接样式，利用前面章节所讲的伪类选择器，按照 a： link→a: visited→a: hover→a:active→”的顺序，设置不同的链接访问状态效果。

7.1.2.按钮链接的美化

为了让链接外观看起来像按钮的特效，设计者会为链接加上不同的边框阴影和相同的背景颜色加以实

7.1.3背景链接的美化

除了文字链接和按钮链接，设置者还会为链接设置不同的背景颜色或背景图片，实现背景链接。

7.2 CSS列表的美化

子主题

7.2.1.列表项类型（list-style-type）

子主题

7.2.2.列表项图像（list-style-image）

子主题

7.2.3.列表项位置（list-style-position）

子主题

7.2.4.复合列表样式（list-style）

这个属性是设定列表项样式的一个快捷的综合写法。用这个属性可以同时设置列表型属性（list一style-type），列表项图片属性（list-style-image）和列表项位置属性（list-style-position）。 语法: list-style: list-style-type | list-style-position | list-style-image

7.2.5.利用背景图像实现列表项标记

虽然使用list-style-image 属性很容易实现设置列表项图像的目的，但这个属性不能够精确控制图像替换的项目符号距离文字的位置。因此，可以利用 background-image 加以实现。

7.3 CSS表格的美化

子主题

7.3.1.border-collapse

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是按照标准的HTML中那样分开显示。 语法： border-collapse: separate | collapse | inherit 参数：separate 是默认值，边框分开不合并，不会忽略 border-spacing 和 empty-cells属 性。collapse 边框合并，如果相邻，则共用一个边框，会忽略 border-spacing 和 empty-cells 属性。Inherit 是从父元素继承值。

7.3.2..border-spacing

border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时（border-collapse 属性等于separate），相邻单元格边框之间的横向和纵向的间距。 语法: border-spacing: length 参数：length由数字和单位组成的长度值，不允许负值。如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。如果只提供一个length值时，这个值将同时作用于横向和纵向上的间距。

7.3.3.caption-side

caption-side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption标签同时使用。 语法： caption-side: top | right I bottom | left 参数：top是默认值，指定标题在表格上边。right指定标题在表格右边。bottom指定标 题在表格下边。left指定标题在表格左边。

7.3.4.empty-cells

empty-cells 属性设置或检索当表格的单元格无内容时，是否显示该单元格的边框。只有 当表格边框独立时（即 border-collapse 属性等于separate）此属性才起作用。 语法: empty-cells: show | hide 参数：show是默认值，指定当表格的单元格无内容时，显示该单元格的边框。hide指 定当表格的单元格无内容时，隐藏该单元格的边框

7.4 多媒体的添加与美化

7.4.1.<embed>标签的使用

利用<embed>标签可以在网页中插人各种类型的多媒体文件，如WMV、MP3、AVI，MP4、SWF、MOV、RMVB等。但是在使用<embed>标签之前，需要安装相应的插件，否则多媒体文件不能正常播放。

7.4.2.<bgsound>标签的使用

<bgsound>是正浏览器中设置网页背景音乐的元素，利用它可以将音乐文件嵌入到网页中又不占页面空间，可以播放的声音文件格式包括WAV、AU、MIDI、MP3等。

7.4.3.HTML5新增的多媒体标签

以前大多数音频、视频是通过插件（例如Flash）来播放的，然而并非所有的浏览器都拥有同样的插件。 HTML5 新增了audio和video元素，分别用来插入声音和视频。至于格式，只要使用支持HTML5的浏览器就可以了，不需要使用其他的任何插件。<audio>和<video>标签的属性大致相同。

7.4.3.1.<audio>标签

<audio>标签定义声音，比如音乐或其他音频流，此标签默认是隐藏的。 <audio>标签允许包含多个<source>标签，<source>标签可以链接不同的音频文件，浏览 器将使用第一个可识别的格式。

<audio controls="controls"> <source src="media/Easy. ogg" type="audio/ogg" ></source> <source src="media/铃铛.mp3" type="audio/mp3"></source> 您的浏览器不支持audio元素。                                                                 </audio>

7.4.3.2.<video>标签

<video>标签定义视频，例如电影片段或其他视频流。<video>标签在页面中嵌入视频的 代码格式和<audio>标签的使用相似。

第8章利用CSS制作导航菜单

8.1 水平顶部导航栏

8.1.1 简单水平导航栏的设计与实现

8.1.1.1导航栏的创建

<nav>标签是HTML5新增的文档结构标签，用于标即导航栏，以便后续与网站的其他其内容整合，使用常用<nav>标签在页面上创建导航栏菜单区域。

8.1.1.2 列表样式的设计

可以利用CSS在<head>标签中进行声明，对列表样式进行改变。

8.1.1.3 超链接样式的设计

利用CSS为超链接重新设置样式，例如对a：link，a：visited进行设置，表示链接未被访问和已被访问的状态。

8.1.1.4 鼠标事件

利用CSS为a：hover，a：active进行样式设计，表示鼠标悬停和活动链接状态的样式变化。

8.1.2 下拉子菜单导航栏的设计与实现

8.1.2.1导航栏的创建

仍然是在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有 列表<ol>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接 地址当前设置为空链接。

8.1.2.2 列表样式的设计

此时会带有<ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用CSS在<head> 签中进行声明，对列表样式进行改变。 同样，使用 list-style-type属性去掉默认标记，设置margin和padding 属性为0，为<li> 袜选项定义浮动效果，设置 text-decoration属性 none。这里使用通配符“*”整体设置。

8.1.2.3 二级菜单的隐藏和显示设计

为了使有序列表的二级菜单隐藏起来，需要设置display 属性为 none。 为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为block。 为了二级菜单能在从属的一级菜单正下方显示，需要设置二级菜单的绝对定位及一级菜 单的相对定位。

8.1.2.4 DIV样式的设计

对内容所处的div进行样式设置。

8.1.2.5 超链接样式的设计

利用CSS为超链接重新设置样式，例如对a：link，a：visited进行设置，表示链接未被访问和已被访问的状态。将display属性设置成block，使超链接成为块级元素。

8.1.2.6 鼠标事件

利用CSS为无序列表项li：hover和有a:hover进行样式设计，表示鼠标悬停状态的样式变化。

8.2 纵向侧边导航栏

8.2.1 简单纵向导航栏的设计与实现

8.2.1.1导航栏的创建

普通的纵向导航同样可以使用超链接和列表元素来实现，只需要将文字链接设置成块级素。区别于水平导航栏，纵向导航栏不需要设置列表选项<li>的浮动属性。 在<nav>的首尾标签之间使用<div>标签创建菜单范围，结合无序列表<ul>标签和列表选项>标签创建菜单选项。

8.2.1.2 DIV样式的设计

对导航栏所处的div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS进行设置，包括高度、行高、颜色和对齐方式。

8.2.1.3 列表样式的设计

此时列表选项还带有<ul>元素的默认实心圆点样式，需要使用 ist-style-type属性去掉默认标记，设置 margin 和 padding的属性值。并同时给列表选项添加背景颜色，使大小标题容易区分。

8.2.1.4 超链接样式的设计

利用CSS为超链接重新设置样式，对超链接的a： link和a：visited进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a：hover和a：active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置。

8.2.2 出式子菜单导航栏的设计与实现

8.2.2.1 导航栏的创建

在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有序列表<li>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。

8.2.2.2 DIV样式的设计

对导航栏所处的div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS进行设置，包括高度、行高、颜色和对齐方式。

8.2.2.3 二级菜单的隐藏和显示设计

为了使有序列表的二级菜单隐藏起来，需要设置display属性为 none。 为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为block。 为了二级菜单能在从属的一级菜单正右方显示，需要设置二级菜单的绝对定位及一级菜单的相对定位。

8.2.2.4 列表样式的设计

此时列表选项还带有<ul>元素的实心圆点样式，及<ol>元素的阿拉伯序号，需要使用list-style-type属性去掉默认标记，设置margin 和 padding的属性值。并同时给列表选项添加背景颜色，使大小标题容易区分。

8.2.2.5 超链接样式的设计

利用CSS为超链接重新设置样式，对超链接的a； ink和a：visited进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a: hover和a:active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置。

8.3 底部固定导航栏

8.3.1 导航栏的创建

在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>配合列表选项<li>标签创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。

8.3.2 列表样式的设计

此时列表选项还带有<ul>元素的默认实心圆点样式，需要使用 ist-style-type属性去掉默认标记，同时设置 margin 和 padding的属性值。列表选项设置float属性，让列表属性在同一行现实。

8.3.3 菜单固定底部的设计

为了美化文字内容的外观，可以设置div高度，宽度，背景，边框和文本对齐方式，为了使导航菜单始终处于最上层，需要设置z-index属性的优先值，为了使导航菜单固定于页面底部，需要设置位置属性position和各个方向的位置值。

8.3.4 超链接样式的设计

利用CSS为超链接重新设置样式，对超链接的a； ink和a：visited进行设置，表示超链接未被访问和已访问状态，然后将display属性设置为block，使得超链接成为块级元素。

8.3.5 鼠标事件

利用CSS为a: hover和a:active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

第九章DIV+CSS布局

9.1 DIV+CSS概述

9.1.1 认识DIV

div标签在Web标准的网页中使用非常频繁，属于块状元素。div标签是双标签，即以<div></div>的形式存在，中间可以放置任何内容，包括其他的div标签。 但是在没有CSS的影响下，每个div标签只占据一行，即一行只能容纳一个div标签。

9.1.2 DIV的宽高设置

9.1.2.1 宽高属性

宽度：width 高度：height

9.1.2.2 div标签内直接设置宽高

width: 300px; height: 100px;

9.1.2.3 div使用选择器设置宽高

width: 300px; height: 100px;

9.1.2.4 div高度的百分比设置问题

如果把div的宽度设置了百分比，则相对其父元素相应改变宽度，但是div的高度则无法根据百分比相应改变

9.2 DIV+CSS的应用

9.2.1 DIV元素的布局技巧

由于用户的计算机显示屏分辨率不同，因此在布局页面时，要充分考虑页面内容的布局宽度情况，并保证页面整体内容在页面居中。一旦内容宽度超过显示宽度，页面将出现水平滚动条。应尽量保证网页只有垂直滚动条，才符合用户的习惯，所以高度不需要考虑，一般都是由页面内容决定网页高度即可。 又因为浏览器的兼容情况，所以在布局页面前，设计者一定要把页面的默认边距清除。传统的表格布局时，可以使用属性“align：center；”设置表格居中问题，但是DIV的居中是没有属性可以设置的，只能通过CSS样式控制其位置。使div元素水平居中的方法有多种，常用的方法是用CSS设置div的左右边距

9.2.2 DIV元素的宽度自适应

有时会用到浮动效果，实现 DIV元素的宽度自适应。宽度自适应是指两个并排的div，其中左边的div为固定宽度，右边div则根据浏览器的宽度自动调整，这种用法常用于文章列表和文章内容的页面布局。

9.2.3 DIV内容的居中

平时说的div内容居中，只是保持div内容的水平居中。但是很多网站需要用到的是水平和垂直居中。这里用行高（line-height）属性来实现，当行高的值等于容器的高度值，内容便垂直居中。

9.2.4 DIV元素的嵌套

传统的表格布局中，搜索引擎如果遇到多层表格嵌套时，可能抓取不到3层以上的内容，或者会跳过嵌套的内容直接放弃整个页面。 而DIV+CSS 布局则不会存在这样的问题，为了实现复杂的布局结构，div元素也需要互相嵌套。但在布局页面时尽量少嵌套，否则将影响浏览器对代码的解析速度。

9.3 DIV+CSS的典型布局

9.3.1 左中右布局

左中右布局在网页设计时最为常用，即div-left是导航菜单，div-main是视觉集中点，放置主要内容，div-right是表单或链接等。而左中右三个区域一并被包含在一个大的div-all中。

9.3.2 上中下布局

上中下布局符合许多网站共同的特点，即div-top是导航或者横幅广告，diw-main是视觉集中点，放置主要内容，div-footer是版权信息等。而上中下三个区域一并被包含在一个大的div-all中。

9.3.3 混合布局

在了解左中右和上中下布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局。混合布局可以在一列或一行布局的基础之上，分为多列或多行布局。网页布局的结构普遍都是三列布局，或者可以根据实际需求，对网页再进行划分。

第十章JavaScript的应用

10.1 JavaScript概述

10.1.1 JavaScript简介

JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言，能够与HTML（超文本标记语言）、Java语言一起在 Web 页面中与Web 客户交互，它无须经过先将数据传给服务器端（Server）、再传回来的过程，而直接可以由客户端（Client）的应用程序处理，从而可以开发客户端的应用程序等。JavaScript是通过嵌入或调入在标准的HTML语言中实现的，弥补了HTML语言的缺陷，是Java与HTML折中的选择，通常具有以下特点。

10.1.1.1 简单性

JavaScript是一种脚本语言，采用小程序段的方式实现编程。像其他脚本语言一样，JavaScript同样是一种解释性语言，提供了一个简易的开发过程。

10.1.1.2 动态性

JavaScript是动态的，可以直接响应用户或客户的输入，无须经过Web服务程序，通过事动来响应用户的请求。

10.1.1.3 跨平台性

JavaScrip依赖浏览器，与操作环境无关，只要能运行浏览器的计算机、支持 JavaSeript的浏览器就可以正确执行。

10.1.1.4 安全性

JavaScript是一种安全性语言，不允许访问本地的硬盘，并不能将数据存入到服务器上不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，可有效地防止数据的丢失。

10.1.1.5 基于对象的语言

JavaScript是一种基于对象的语言，同时可以看作是一种面向对象的语言。这意味着它能将特定功能封装在对象中。

10.1.2 JavaScript入门案例

script标记是成对标记，以<script>开始，以</script>结束。type 属性说明脚本的类型，属性值“text/javascnipt”意思是使用Javascript编写的程序是文本文件。script标记既可以放在HIML的头部，也可以放在HTML的主体部分，只是装载的时间不同。

10.1.3 JavaScript放置的位置

JavaScript代码一般放置在页面的head或body部分。当页面载入时，会自动执行位于body部分的JavaScnipt；而位于head部分的 JavaScript只有被显式调用时才会被执行。

10.1.3.1 head标记中的脚本

script标记放在头部head标记中，通JavaScript代码必须定义成函数形式，并在主体body标记内调用或通过事件触发。放在head标记内的脚本在页面装载时同时载入，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。

function functionname(参数1，参数2，.…，参数n）{ 函数体语句； }

JavaScript 自定义函数必须以 function 关键字开始，然后给自定义函数命名，函数命名时一定遵守标识符命名规范。函数名称后面一定要有一对括号“（）”，括号内可以有参数，也可以无参数，多个参数之间用逗号“，”分隔。函数体语句必须放在大括号“（）”内。

10.1.3.2 body标记中的脚本

scnipt标记放在主体body标记中，JavaScript代码可以定义成函数形式，在主体body标记内调用或通过事件触发。也可以在script标记内直接编写脚本语句，在页面装载时同时执行相关代码，这些代码执行的结果直接构成网页的内容，在浏览器中可以查看。

10.1.3.3 外部js文件中的脚本

除了将 JavaScript代码写在 head和body部分以外，也可将 JavaScript函数单独写成个js文件，在HTML文档中引用该js文件。

10.1.3.4 事件处理代码中的脚本

JavaScript代码除了上述三种放置位置外，还可直接写在事件处理代码中。

10.2 JavaScript语法

10.2.1 语法基础

10.2.1.1 区分大小写

在 JavaScript 语言中，对大小写是敏感的，这在现在的很多开发语言中都是如此，所以读者要养成一种良好的习惯，这样就可以避免调试程序时遇到这些低级错误。

10.2.1.2 变量不区分类型

avacript中变量声明，采用其弱类型，即变量在使用前无须进行变量数据类型声明，而由解释器在运行时检查其数据类型，例如： x=1234； y="1234" 根据JavaScript变量的申明方式，可知前者说明x为数值型变量，而后者说明y为字符串型变量。

10.2.1.3 每行代码结尾可以省略分号

在JavaScript 里面每条语句结尾的分号“；”不是必要的，如果多个语句写在一行上，那么语句之间的分号“；”才是必需的，最后一条语句的分号“；”可以省略。为了养成良好的编程习惯，建议还是在每条语句后面加上分号。

10.2.1.4 注释与C、C++、Java等语言相同

注释就是对代码的解释和说明，目的是为了让别人和自己容易读懂程序。JavaSeript的 注释形式与C、C++、Java等语言相同，格式如下： //单行注释 /* 多行注释 */

10.2.2 标识符和常用变量

10.2.2.1 标识符

标识符是计算机语言中用来表示变量名、函数名等的有效字符序列，简单来说，标识符就是一个名字，JavaScript关于标识符的规定如下： （1）必须使用英文字母或者下划线开头。   (2)必须使用英文字母、数字、下划线组成，不能出现空格或制表符。 （3）不能使用JavaScript关键字与JavaScript保留字。   (4)不能使用JavaScript语言内部的单词，比如 Infinity,NaN，undefined等 （5）大小写敏感，如name和Name 是不同的两个标识符。 合法的标识符：Hello、_12th、sum、Dog23等。 不合法的标识符：if、3com、case、switch等。

10.2.2.2 变量声明

var count;                                        //单个声明 var count,amount,level;                  //用单个var关键字声明的多个变量 var count =0,amount=100;              //一条语句中的变量声明和初始化

10.2.2.3 变量类型

JavaScript有6种数据类型，主要的类型有 Number 数值型、String字符型、Object对象以Boolean 布尔型，其他两种类型为Null 和Undefined  (1） Number 数值型。JavaScript支持整数和浮点数。整数可以为正数。0或负数：浮点食包含小数点，例如3.53、-534.87等都是浮点数。浮点数还可以采用科学计数法进行表、如3.5EI5表示3.5×10”。 （2）String字符型。字符型数据又称为字符串型，由若干个字符组成，并且用单引号或双引号封装起来，例如：”你好！" " this is string" "学习语言”。         在使用字符串的过程中，有时会遇到一种情况：在一个字符串中需要使用单引号或双引号。正确的方法是在由双引号标记的字符串中引用字符时使用单引号，在由单引号标记的字符串中引用字符时使用双引号，即单引号、双引号必须成对使用相互包含，但不能交叉。 例如： "热烈欢迎参加'JavaScript技术'研讨的专家"；         //正确的用法 "学习不是一件容易”的事件"；                                //错误的用法 （3） Boolean 布尔型。Boolean 值有 true 和false，这是两个特殊值，可以将他们转操为其他类型的数据，例如可将值为true 的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整0。但不能用tne 表示1或false 表示0。 （4）Undefined数据类型。JavaScript会对未赋值变量赋值为 undefined。 （5）Null 数据类型。这是一个对象，但是为空。因为是对象，所以 typed mIl 返"Objce!"，注意null 是Javascript 保留关键字。 （6）Object类型。除了上面提到的各种常用类型外，对象类型也是JavaSpe中的重要的组成部分。

10.2.3 运算符与表达式

10.2.3.2 关系运算符和表达式

子主题

10.2.3.3 逻辑运算符和表达式

子主题

10.2.3.4 赋值运算符和表达式

赋值运算符是JavaScript中使用频率最高的运算符之一。赋值运算符要求其左操作数是个变量、数组元素或对象属性，右操作数是一个任意类型的值，可以为常量、变量、数组元家或对象属性。赋值运算符的作用就是将右操作数的值赋给左操作数。用赋值运算符和操作数迩接起来符合规则的式子，称为赋值表达式。

10.2.3.5 条件运算符和表达式

条件运算符是一个三元运算符，条件表达式由条件运算符和三个操作数构成。 语法： 变量=表达式1？表达式2：表达式3 说明： 该条件表达式表示，如果表达式1的结果为真（true)，则将表达式2的值赋给变量， 否则将表达式3的值赋给变量。例如，变量 mumber 1、number2比较大小，将较大的数赋值 给变量max，代码如下： var max=(numberl>number2)? numberl :number2;

10.2.3.6 逗号运算符和表达式

逗号运算符是一个二元运算符，逗号运算符的优先级最低，由逗号运算符和操作数连接 起来符合规则的式子，称为逗号表达式，其运算规则是先计算第一个表达式的值，再计算第 二个表达式的值，依次类推，计算完所有表达式的值，运算结果为最后一个表达式的值。 例如： var rs=(3+5，10*6)；/*先计算第一个表达式3+5的值为8，再计算第二个表达式10*6的值为60、 最后将第二个表达式的值60赋给变量rs*/

10.2.4 程序设计

10.2.4.1 条件分支语句

{         /*条件为真执行的语句*/ } else {         /*条件为假执行的语句*/ }

switch(表达式) { case case1:执行语句1;break; case case2:执行语句2;break; case case3:执行语句3;break; default:默认执行语句;

10.2.4.2 循环语句

for(变量=开始值；变量<=结束值；变量=变量+步进值） { / *循环体语句 */ }

white（条件）{ /*循环体语句*/ }

do { /*循环体语句*/ }

10.2.5 函数

由事件驱动或当它被调用时执行的可重复使用的代码块称为函数，将脚本编写为函数,这样就可以实现按需调用相应的代码函数。         函数在页面起始位置定义，即网页的<head>部分或定义在外部1S文件里面，然后进行外部调用。

10.2.5.1 定义函数

function 函数名(varl，var2，var3) { /*函数代码*/ }

10.2.5.2 函数返回值

需要返回某个值的函数必须使用 retum语句。                                                                                  例如： function sum(a,b) {     x=a+b；     return x； }

10.2.5.3 函数调用

函数的调用很简单，可以通过其名字加上括号中的参数进行调用。如调用上面的sum函数，可以这样写：sum（5，8）。

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

JavaScript 编程是使用“面向对象”的概念，也称为“对象化编程”。JavaScript“面向对象编程”的意思就是把 JavaScript能涉及的范围划分成大大小小的对象，对象下面还继续划分对象，所有的编程都以对象为出发点，基于对象，小到一个变量，大到网页文档、窗口甚至屏幕，都是对象。         在JavaScript里面可以创建自己的对象，但在创建用户自定义对象前，需要先学习创建的JavaScript对象，以及如何使用它们。本节后续开始将具体地依次讲解JavaScript的内建对象。         在JavaScript里面创建一个新的空对象，例如： var o= new object();

10.3.1.2 属性

JavaScript 内建对象的属性可以参阅相关的技术文档，当然在Visual Studio平台中由于有智能感应功能，就可以很方便地访问对象的属性。

10.3.1.3 方法

方法指对象可以执行的行为（或可以完成的功能），与属性相同，JavaScript内建对象本就自带了很多功能强大的方法，可以直接调用来完成某些特定的功能

10.3.2 常用对象

10.3.2.1 window对象

window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript中，window对象是全 局对象，所有的表达式都在当前的环境中计算。

10.3.2.2 document对象

document本身是一个对象，但又是JavaScript中 window对象和 frames 对象的一个属性， 其描述当前窗口或指定窗口对象的文档。它包含文档从<head>标签到</body>标签的全部内容。 用法为document或<窗口对象>.document，其中 document表示当前窗口的文档，<窗口对象>.document表示指定窗口的文档。

10.3.2.3 location对象

location 对象用于获取或设置窗体的URL，并且可以用于解析URL，是JavaScript中最重 要的对象之一，location 的中文意思是“位置”。location既是 window对象的属性又是 document 对象的属性，即“window.location== document. location;”。

10.3.2.4 navigator对象

navigator对象的中文意思为“导航器”，通常用于检测浏览器与操作系统的版本，也是 window 对象的属性。

10.3.2.5 screen对象

screen 对象用于获取用户的屏幕信息，是window对象的属性。 每个window 对象的screen属性都引用一个screen对象。可以通过 screen对象获取一些 屏幕的信息，如宽度、高度、像素等，而这些信息对于设置图片和页面在浏览器中显示 肤小都是非常有用的。screen对象的属性应用和浏览器的关系比较密切，所以在应用这些 胜时，一定要注意浏览器之间的兼容性。

10.4 JavaScript事件

10.4.1 事件及事件处理

指定事件处理程序有三种方法：         （1）直接在HTML标记指定。         （2）编写特定对象特定事件的JavaScript。         一般形式：<script language="JavaScript" for="对象" event="事件">          （3）在JavaScript中说明。         一般形式：<主角事件-对象>.<事件>=<事件处理程序>;

10.4.2 常用事件

子主题

10.4.3 事件应用举例

事件的应用常见于下面几种场景：鼠标单击某一元素、页面或图像载入、鼠标悬浮于页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键等。下面通过几个示例来学习事件的具体应用。