admin 管理员组文章数量: 1184232
2023年12月17日发(作者：c语言inputbox)
第1章 网页设计概述
1.1 Internet 与 WWW
1.1.1 Internet
Internet，译为“因特网”，又叫做“国际互联网”。
Internet 为用户提供了多种服务：
万维网服务（WWW）
电子邮件服务（E-mail ）
远程登录服务（Telnet ）
文件传输服务（FTP）
1.1.2 WWW
WWW，是“World Wide Web”的缩写，简称 Web，译为“万维网”。
WWW 是运行在 Internet 之上的超文本信息浏览系统。
WWW 的核心部分由三个标准构成：HTML / URL / HTTP
1．HTML：超文本标记语言，用于定义超文本文档（网页）的结构。
2．URL：统一资源定位符，用于标识万维网上信息资源的地址（网址）。
3．HTTP：超文本传输协议，是客户端浏览器与 Web 服务器之间的通信协议。
1.1.3 W3C
万维网联盟（World Wide Web Consortium，W3C），又称 W3C 理事会。
W3C 致力于对 web 进行标准化。
W3C 制定了包括 XHTML 和 CSS 等众多影响深远的标准规范。
1.2 网页设计
1.2.1 网页
网页是用超文本标记语言 HTML 书写的一种纯文本文件。
网页需要通过浏览器对其进行解释，才生成包含文字、图像、声音、视频和动画等多媒体信息的页面。
1.2.2 网页的类型
静态网页：网页内容固定不变。文件扩展名是 .htm 或 .html。
动态网页：网页内容由服务器端运行的程序动态生成。文件扩展名是 .aspx、.jsp、.php等。
1.2.3 网页布局设计
按页面大小划分，网页布局分为：
1
固定宽度布局（常见的网页宽度是 780px，或 1000px）
可变宽度布局（常见的网页宽度是屏幕的100%）
按页面版式划分，网页布局分为：
单栏布局
两栏布局
三栏布局
多栏布局
变化布局
1.3 服务器与浏览器
1.3.1 Web 服务器
Web 服务器也称为 WWW 服务器，主要功能是提供超文本信息浏览服务。
Windows 平台上使用 IIS（Internet Information Server）作为Web 服务器软件。
网页被放置在 Web 服务器上。
当 Web 服务器接收到客户端的一个 HTTP 请求，会返回一个网页。
1.3.2 浏览器
浏览器是安装在客户端用于显示网页的软件。常见的浏览器有：
IE
FireFox
1.4 Web 标准的含义
1.4.1 网页制作的历史
1．传统的网页制作方法
单纯使用 HTML 语言制作网页，HTML 负责“结构”与“表现”双重任务。
2．传统网页制作方法的缺点
HTML 标记被滥用，网页失去了语义。
“结构”与“表现”混杂在一起，代码复杂，维护困难。
3．CSS 的引入
1996 年 W3C 正式推出了 CSS1.0。
HTML 负责网页结构，CSS 负责网页表现，实现了“结构”与“表现”相分离。
1.4.2 基于 Web 标准的网页制作
1．描述网页结构的标准语言：XHTML
2．描述网页表现的标准语言：CSS
3．描述网页行为的标准语言：JavaScript
2
第 2 章 认识 Dreamweaver
2.1 Dreamweaver 简介
Dreamweaver 是美国 MacroMedia 公司开发的一款“所见即所得”的网页编辑器。
Adobe Dreamweaver CS3 是 MacroMedia 公司被 Adobe 公司收购后推出的第一个版本。
2.2 创建本地站点
2.2.1 站点的含义
“站点”对应一个文件夹，用来存放一个网站的所有网页文件和其他资源文件。
2.2.2 站点的结构
站点结构的设计原则
将文件分类保存在子文件夹中。
文件夹的层次不要太深，不要超过 3 层。
文件夹、文件都不能使用中文命名。
尽量使用意义明确的名称，以便于识记。
首页命名为 。
2.2.3 在 Dreamweaver 中管理站点
使用“站点 | 新建站点”菜单命令新建站点。
使用“站点 | 管理站点”菜单命令编辑或删除站点。
2.3 编辑文本
2.3.1 分段与换行
分段：Enter
换行：Shift+Enter
2.3.2 标题文本
标题文本的分级：标题1 ~ 标题6。
“标题1 ”是最大的标题，“标题6 ”是最小的标题。
2.3.3 列表
列表的分类：
项目列表
编号列表
定义列表
3
2.3.4 重点、强调
重点（粗体），强调（斜体）。
2.3.5 空格
插入空格的方法：
方法1：按空格键可以在两个字符间可以插入一个半角空格。
方法2：按 Ctrl + Shift + Space 组合键，可以连续插入多个半角空格。
方法3：在 HTML 文档中插入空格的代码 。
2.4 插入图像
在网页中，只允许使用以下格式的图像文件：
1．GIF 格式
无损压缩； 8 位色深（256色）；支持透明；支持动画。
2．JPG 格式
有损压缩； 24 位色深。
3．PNG 格式
无损压缩；具有 8 位、24 位和 32 位三种色深；支持透明和半透明。
2.5 插入 Div 标签
Div 是一个块容器，一般用于划分网页的逻辑结构。
2.6 插入表格
表格由单元格、单元格填充（cellpadding）、单元格间距（cellspacing）、表格边框（border）组成。
2.7 插入表单
表单是收集用户信息的重要工具。表单由两部分组成：
表单对象：收集信息，包括文本框、单选按钮、复选框等对象。
应用程序：处理信息，包括客户端应用程序、服务器端应用程序。
2.8 创建超链接
内部链接： 页面内部的链接
外部链接： 外部网站的链接
E-mail 链接： 邮箱的链接
空链接：
4
第 3 章 XHTML 语言
3.1 XHTML 概述
3.1.1 什么是 XHTML
XHTML 是英文 Extensible HyperText Markup Language 的缩写，中文意思是“可扩展超文本标记语言”。
XHTML 1.0 是以 XML 1.0 的语法规范对 HTML 4.0 的改进 。
3.1.2 XHTML 文档的类型
XHTML 1.0 分为三种文档类型：
1．XHTML 1.0 Transitional（过渡的）
允许使用表现层的标记和属性，但要符合 XHTML 的语法。
2．XHTML 1.0 Strict（严格的）
不允许使用任何表现层的标记和属性。
3．XHTML 1.0 Frameset（框架的）
用于框架结构的网页。
3.1.3 DOCTYPE （文档类型声明）
DOCTYPE 声明是 (X)HTML 文档开头处的一行代码，用于告知浏览器 (X)HTML 是哪个版本。
3.1.4 XHTML 标记分类
1．双标记
语法：<标记>内容
例：
制作网页是我的爱好。
聊城大学
2．单标记
语法：<标记 />
例：
5
3.1.5 XHTML标记属性
标记属性
语法：<标记 属性名1=“属性值” 属性名2=“属性值”…>
例：
3.2 XHTML 标记和属性
3.2.1 文档结构标记
… HTML文档标记
… 文档头部标记 … 文档主体标记例：
欢迎光临我的文学小屋!
3.2.2 头部标记
辅助信息标记
链接外部文件标记
例：
6
3.2.3 文本标记
…
段落标记
换行标记
… 强调标记
… 重点标记
例1：
登鹳雀楼
白日依山尽，
黄河入海流。
欲穷千里目，
更上一层楼。
例2：
《登鹳雀楼》是王之涣的诗。
3.2.4 标题文字标记
…
一级标题…
二级标题…
三级标题…
四级标题…
五级标题…
六级标题3.2.5 特殊文本标记
HTML代码
显示结果
半角空格
7
HTML代码
©
显示结果
©
&
"
&
"
<
>
<
>
3.2.6 项目列表标记
- …
例：
中国城市
- 北京
- 上海
- 广州
3.2.7 编号列表标记
- …
例：
中国城市
- 北京
- 上海
- 广州
3.2.8 图像标记
图像标记
例：
8
3.2.9 超链接标记
… 超链接标记
例：
好站推荐：榕树下
3.2.10 表格标记
例1：
| 1 | 2 | 3 |
| 4 | 5 | 6 |
例2：
| 公司 | 雇员 | 成立于 |
|---|---|---|
| ABC | 1000 | 1974 |
| XYZ | 2000 | 1982 |
3.2.11 表单标记
表单标记用户输入区域
列表/菜单标记
选项标记
文本区域标记
标签标记
例：
3.2.12 块容器标记
div 可以包含任何元素，用于在 HTML 文件中建立逻辑结构。
例：单列布局网页逻辑的结构。
3.2.13 行内容器标记
… 行内容器
span 用来对行内元素进行分组或标识。
例：
11
戴夫在2003年5月创建了他的个人网站。
3.2.14 注释标记
3.3 XHTML 语法
3.3.1 XHTML 的语法要求
标记用两个角括号“<”和“>”括起来， 标记名称与小于号之间不能留有空格。
标记和属性的名称都必须使用小写。
属性值必须使用双引号。
标记被正确的嵌套使用。
关闭所有标记。
属性不能被缩减。
不能使用被排斥的标记和属性，如 、
3.3.2标记名称与小于号之间不能留有空格。
正确：
欢迎光临我的文学小屋！
错误：< p>欢迎光临我的文学小屋！
3.3.3标记和属性的名称都必须使用小写。
正确：
错误：
12
错误：
3.3.4属性值必须使用双引号。
正确：首页
错误：首页
3.3.5 标记被正确的嵌套使用。
正确：
《登鹳雀楼》是唐朝王之涣的诗。
错误：
《登鹳雀楼》是唐朝王之涣
的诗。3.3.6关闭双标记。
正确：
欢迎光临文学小屋！
以下是最新作品。
错误：
欢迎光临文学小屋！
以下是最新作品。
3.3.7关闭单标记。
正确：
错误：
3.3.8属性不能被缩减。
正确：
错误：
13
第 4 章 CSS基础知识
4.1 CSS 简介
CSS 是 Cascading Style Sheets 的缩写，译为“层叠样式表”。
HTML 控制网页的结构，CSS 控制网页的表现。
CSS 实现了网页的结构与表现相分离。
4.2 在网页中应用 CSS
在网页上应用CSS的三种方法：
行内样式
内部样式表
外部样式表
4.2.1 行内样式
行内样式：在 HTML 标记的 style 属性中设置 CSS 样式。
例：
泡泡潜水俱乐部
4.2.2 内部样式表
内部样式表：将 CSS 样式写在 标记之间。
例：
泡泡潜水俱乐部
泡泡潜水俱乐部为你量身打造一流的潜水服务，……
14
4.2.3 外部样式表
外部样式表：将 CSS 样式写在独立的 CSS 文件中，然后将 CSS 文件链接到 HTML 文件上。
例：
泡泡潜水俱乐部
泡泡潜水俱乐部为你量身打造一流的潜水服务，……
思考：在制作大型网站时，行内样式、内部样式表和外部样式表，哪一种CSS应用方式更合适，为什么？
答：应使用外部样式表。多个网页可以共用一个外部样式表文件，提高网站制作和修改的效率。
4.3 CSS 基本语法
4.4 CSS 选择器
CSS 常用选择器的类型：
通配选择器
标记选择器
ID 选择器
后代选择器
类选择器
伪类
群选择器
15
4.4.1 通配选择器
通配选择器：选择所有元素。
* { property: value; }
例：
* {
padding: 0;
margin: 0;
}
4.4.2 标记选择器
标记选择器：选择指定标记的元素。
Tag { property: value; }
例：
body {
font: 0.75em "宋体";
background: #E0E0E0 url(images/);
}
h1 {
font-size: 180%;
}
p {
margin: 0.8em 0;
}
4.4.3 ID 选择器
ID 选择器：选择 id 属性为指定值的元素。
＃ID { property: value; }
例：
#container {
width: 760px;
margin: auto;
}
#header {
height: 120px;
background: url(images/bg_) no-repeat;
}
16
4.4.4 后代选择器
后代选择器：选择指定父元素中包含的指定子孙元素。
selector1 selector2 { property: value }
例：
#content p {
}
text-indent: 2em;
4.4.5 类选择器
类选择器：选择 class 属性为指定值的元素。
.className { property: value; }
使用类选择器需要两个步骤：① 为网页元素添加 class 属性；② 定义样式。
例：
《秋夜》
鲁迅
在我的后园，可以看见墙外有两株树，……
4.4.6 群选择器
群选择器：同时选择多种指定的元素。
selector1，selector2，selector3 { property: value; }
例：
h2, h3 {
margin: 1em 0;
}
td, th {
border: solid 1px #000000;
}
17
padding: 5px;
4.4.7 伪类
伪类：选择处于某种状态下的指定元素。
selector : pseudo-class { property: value }
例：
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
a:active {
color: #FF0000;
text-decoration: underline;
}
注意：一定要按照 link，visited，hover，actived 的顺序书写。
4.5 CSS 的继承性
继承性是指父元素的某个属性对于其子元素也起作用。常用的具有继承性的属性：
font-family font-size font-weight line-height color text-align
text-indent
4.6 层叠和特殊性
选择器的特殊性分成四个等级：
选择器
行内样式
ID选择器
类选择器、伪类选择器
标记选择器
18
特殊性
1000
100
10
1
用行内样式具有最高特殊性。
“ID选择器”比“类选择器”特殊。
“类选择器”比“标记选择器”特殊。
例1：
选择器
style=“ ”
#container #content{ }
#content .center{ }
#content p{ }
#content{ }
{ }
.center{ }
p{ }
例2：判断每一行文字的颜色。
泡泡潜水俱乐部
泡泡潜水俱乐部为您量身打造一流的潜水服务。
三亚大东海旅游区环境优美，气候宜人。
潜水俱乐部提供不同层次的潜水培训。
潜水并不像许多人想像的那么危险。
19
特殊性
1000
200
110
101
100
11
10
1
第 5 章 CSS 盒模型
5.1 盒模型概述
5.1.1 盒模型的概念
CSS 将所有的网页元素都看做是一个矩形框，这个框由元素的内容、填充（padding）、边框（border）和边界（margin）组成。
填充（padding） 是元素的内容与边框之间的空间。
边界（margin） 是一个元素和另一个元素之间的间隔。
5.1.2 盒的类型
CSS 把盒子分为两种基本形态：
1．块状元素：独占一行，默认状态下，宽度为100％。
常用的块状元素：
body
p
h1~h6
ul，ol，li
table
form
div
2．行内元素：在行内流动，没有高度和宽度。
常用的行内元素：
em，strong
img
a
input，button，label
span
20
5.1.3 理解盒模型
padding 区域在边框之内，margin 区域在边框之外。
padding 区域应用背景，margin 区域不应用背景。
元素不设置边框和背景时，不能分辨 padding 与 margin。
5.2 盒的尺寸
5.2.1 元素总宽度
元素的总宽度 = 左边界 + 左边框 + 左填充 + width + 右填充 + 右边框 + 右边界
5.2.2 元素的总高度
元素的总高度 = 上边界 + 上边框 + 上填充 + height + 下填充 + 下边框 + 下边界
21
5.2.3 计算实例
例：
请你算一算我在网页上占据多大空间？
5.3 边框（border）
5.3.1 边框
每个元素可以设置 4 个方向的边框。
border-top
border-right
border-bottom
border-left
5.3.2 边框的属性
每条边框有 3 种属性：
边框宽度 border-width
边框颜色 border-color
边框样式 border-style
5.3.3 边框样式（border-style）
border-style 属性的常用值：
22
solid 实线
dotted 点线
dashed 虚线
double 双线
none 无边框，默认值
5.3.4 边框属性的设置
例：同时设置 4 个边框
border: solid 4px #FF0000;
例：单独设置下边框
border-bottom: double 6px #000000;
5.4 填充（padding）
5.4.1 填充
padding 区域在边框之内。
padding 区域应用背景。
5.4.2 设置填充的值
可以单独设置1个方向的填充。例：
padding-left: 8px;
也可以同时设置 4 个方向的填充。例：
padding: 2px 4px 6px 8px; /*上，右，下，左*/
padding: 2px 4px 6px; /*上，左右，下 */
padding: 2px 4px; /*上下，左右*/
padding: 2px; /*上下左右*/
23
5.4.3 填充的特殊作用
填充常用于创建一个呈现背景的区域。
例：
ul {
background: url(images/) no-repeat center bottom;
padding-bottom: 100px;
}
li {
background: url(images/) no-repeat left top;
padding-left: 20px;
}
5.5 边界（margin）
5.5.1 边界
margin 区域在边框之外。
margin 区域不应用背景。
5.5.2 设置边界的值
可以单独设置1个方向的边界。
margin-bottom: 6px;
也可以同时设置4个方向的边界。
margin: 2px 4px 6px 8px; /*上，右，下，左*/
24
5.5.3 垂直边界重叠
当两个块元素的垂直边界相遇时，它们将发生重叠。
5.5.4 父子垂直边界重叠
当父元素的填充、边框均为 0 时，父元素与子元素的边界重叠。
避免父子垂直边界重叠的方法是，给父元素设置1px填充或边框，将父子元素的边界分隔开。
25
5.6 盒的高度与文本溢出
如果盒子不设置高度，当内容增加时，盒子会自动增加高度以适应内容。
如果盒子设置了高度，当内容增加时，盒子不会增加高度，而是让内容溢出盒子。
但是 IE6 浏览器对盒子的高度作了错误的解析，即使盒子设置了高度，它也让盒子自动增加高度以适应内容。
例：
#box {
width: 300px;
height: 150px;
border: 1px solid #000000;
background: #CCFFCC;
}
标准浏览器“让内容溢出” IE浏览器“自适应”
5.6.4 控制文本溢出方式
对于标准浏览器，可以使用CSS的overflow 属性来控制内容的溢出方式。
overflow: visible 默认值，让溢出的内容显示。
overflow: scroll 添加滚动条。
overflow: auto 在内容溢出的时候添加滚动条。
overflow: hidden 隐藏任何溢出的内容
26
第 6 章 用CSS设置文本和图像样式
6.1 对文字应用样式
6.1.1 文字的属性
属性
font-family
font-size
font-weight
描述
字体
字号
加粗
值
值
normal, bold（粗体）, bolder（特粗）,
lighter（细体）
font-style
font-variant
line-height
text-transform
color
text-decoration
样式
变形
行高
转换
颜色
装饰
normal, italic（斜体）, oblique（倾斜）
normal, small-caps（小型的大写字母）
值
none, capitalize（首字母大写）,
uppercase（大写）, lowercase（小写）
值
none, blink（闪烁）, underline（下划线）,
line-through（穿越线）, overline（上划线）
可用值
6.1.2 文字属性缩写
font: font-style | font-variant | font-weight | font-size | / line-height | font-family
例：
body {
font: italic small-caps bold 0.75em/1.5 Arial, Helvetica, sans-serif;
}
注意：
1．可以省略 font 属性中的一个或多个属性值，如果省略，该属性值将使用浏览器的默认值。但至少要定义 font-size 和 font-family两个值。
27
2．由于font-size和line-height的属性值都是数值型，因此采用如下方式进行区分：如果只有一个数值型的值，则该值表示font-size。如果有两个，则按照font-size/line-height的方式书写，即二者之间用斜杠隔开。例：
body {
font: 0.75em/1.5em “宋体”;
}
6.1.3 字体设置技巧
1．中文网页使用“宋体”。
2．当字体名称中有空格，或由汉字组成时，要使用引号包围该名称。例：
font-family: “宋体”;
font-family: “Times New Roman”, Times, serif;
3．提供首选字体、备用字体和普通字体。例：
font-family: Verdana, Arial, Helvetica, sans-serif;
4．常用的英文普通字体包括：serif、sans-serif、 monospace。
（1）serif是成比例、有衬线的字体。 （2）sans-serif 是成比例、无衬线的字体。
（3）monospace 是等宽的字体。
28
6.1.4 字号设置技巧
1．不应以像素为单位设置字号。为了保证网页文字的大小可调节，应该使用 em 为单位设置字号。默认情况下 1em=16px，则 0.75em=12px。
2．font-size 属性具有继承性，当多层嵌套定义时应谨慎。例：
7．制作网页时，应利用好 font-size 属性的继承性，避免字号的重复定义。如果需要对 h1、h2 等元素的大小进行定义，最好使用百分比为单位。例：
6.1.5 line-height属性
1．浏览器默认的行高为1.2。适当地增加行高，可以提高文字阅读的舒适程度。
2．如果用px作单位设置行高，行高的大小是固定的。例：
body {
font-family: “宋体”;
font-size: 12px;
line-height: 23px;
}
#p2 {
}
#p3 {
}
29
→行高23px
→行高23px
font-size: 14px;
→行高23px
font-size: 16px;
3．如果用em或%作单位设置行高，行高要根据字号进行计算。其子元素会继承这个计算出来的固定值。例：
body {
font-family: “宋体”;
font-size: 12px;
line-height: 1.5em;
}
#p2 {
}
#p3 {
}
4．如果用没有单位的倍数设置行高，行高要根据字号进行计算。但其子元素只继承行高倍数，并用这个倍数根据自身的字号对行高进行重新计算。例：
body {
font-family: “宋体”;
font-size: 12px;
line-height: 1.5;
}
#p2 {
}
#p3 {
}
font-size: 16px;
font-size: 14px;
font-size: 16px;
font-size: 14px;
→行高18px
→行高18px
→行高18px
→行高18px
→行高21px
→行高24px
6.2 对段落应用样式
6.2.1 段落的属性
属性
word-spacing
letter-spacing
描述
单词间距
字母间距
可用值
normal, 值 *对中文无效
normal, 值 *对中文有效
30
行内元素vertical-align 在行内的垂直对齐
text-align 文本的水平对齐
text-indent
white-space
display
首行缩进
空白
显示方式
baseline（基线）, sub（下标）, super（上标）, top（顶部）,
text-top（文本顶部）, middle（中线）, bottom（底部）,
text-bottom（文本底部）
left, right, center, justify（两端对齐）
值
normal, pre（保留空白）, nowrap（不换行）
none（不显示），inline（显示为行内元素），
block（显示为块元素）
6.2.2 text-index属性
1．text-index属性设置为正值，会使首行缩进；设置为负值，会使首行突出。
2．text-index属性值用em和%作单位，效果不同。em是相对于文字的大小，%是相对于父元素的宽度。例：
#p1 {
}
#p2 {
}
#p3 {
}
text-indent: 50%;
text-indent: -2em;
text-indent: 2em;
6.2.3 vertical-align属性
vertical-align 属性只对行内元素有效。
vertical-align : baseline | top | middle | bottom | text- top | text-bottom | sub | super
1．设置行内 与文字的垂直对齐方式。
2．设置
3．设置文字的上标、下标。
6.2.4 white-space属性
white-space属性用来处理元素之内的空白。空白包括空格、制表符或换行符。
31
1．white-space属性值为normal，压缩空白为一个空格，文字自动换行。
2．white-space属性值为nowrap，压缩空白为一个空格，文字不换行。
3．white-space属性值为pre，保留空白并按原格式输出。例：
#p1 {
}
#p2 {
}
#p3 {
}
white-space:pre;
white-space:nowrap;
white-space:normal;
6.3 对列表应用样式
6.3.1 列表的类型
1．项目列表
- 北京
- 上海
2．编号列表
- 北京
- 上海
6.3.2 列表的属性
属性 描述
none
disc（圆点，默认值）
circle（圆圈）
list-style-type 项目符号的样式 square（方块）
decimal（数字）
lower-roman（小写罗马数字）
upper-roman（大写罗马数字）
32
可用值
lower-alpha（小写字母）
upper-alpha（大写字母）
list-style-image
list-style-position
项目符号的图像
项目符号的位置
none, 值
outside（外，默认值）,
inside（内）
6.3.3 列表属性缩写
list-style: list-style-type | list-style-position | list-style-image
6.3.4 列表在不同浏览器中的差异
IE 默认设置
- 具有 margin-left 值。
FF 默认设置
- 具有 padding-left 值。
项目符号的大小与位置也不同。
6.3.5 让列表在不同的浏览器中表现一致
ul {
}
33
margin: 0px;
padding: 0px;
list-style: none;
6.3.6 用背景图像替代项目符号
设置了 list-style:none 后，可以利用背景图像替代项目符号。
ul {
}
li {
background: url(images/) no-repeat left top;
padding-left: 20px;
}
margin: 0px;
padding: 0px;
list-style: none;
6.4 对链接应用样式
6.4.1 简单的链接样式
a {
color: #000000;
}
上面的样式设置网页上超链接的全部状态都为黑色。
6.4.2 使用伪类选择器找到链接的不同状态
a:link, a:visited {
color: #000000;
text-decoration: none;
}
a:hover, a:active {
color: #FF0000;
text-decoration: underline;
}
注意：要按照 a:link, a:visited, a:hover, a:active 的顺序为链接应用样式。
34
6.4.3 使用后代选择器找到特定区域中的链接
#navigation a {
color: #FFFFFF;
}
#navigation a:hover {
color: #FF0000;
}
6.4.4 让链接看起来像按钮：Pixy 方法，消除闪烁
{
}
a: {
color:#FFFFFF;
}
background-position: right top;
color:#000000;
text-decoration:none;
display: block;
width: 150px;
height: 40px;
line-height: 40px;
background: url(images/) no-repeat left top;
padding-left: 50px;
6.5 对图像应用样式
6.5.1 网页中的图像分类
35
1．有意义的图像
网站LOGO
新闻图片
商品图片
广告图片
2．装饰性图像
图案
花边
艺术字
6.5.2 网页中应用的图像的两种方法
1．将“有意义的图像”插入 HTML 文件中
2．将“装饰性图像”写入 CSS 文件中
body {
background: url(images/) no-repeat right bottom;
}
6.5.4 对HTML中的图像应用CSS
1．去掉图像超链接的默认边框
img {
}
2．加边框
.pic {
}
3．图文混排
.fltrt {
}
36
border: none
padding: 10px;
border: solid #999999 1px;
background: #E8E8E8;
float: right;
margin-left: 10px;
第 7 章 用CSS设置网页背景
7.1 CSS 背景属性概述
7.1.1 CSS 背景属性
属性
background-color
background-image
background-repeat
描述
背景颜色
背景图像
重复方式
可用值
transparent, 值
none, 值
repeat, repeat-x, repeat-y,
no-repeat
水平位置：left, center, right, 值
background-position 背景图像的位置
垂直位置：top, center, bottom, 值
scroll（背景图像随网页滚动）
background-attachment 附加方式
fixed（只能用于 body 元素，背景图像在浏览器视口固定不动，）
说明：
1．在 CSS 2.0 中，一个元素只能应用一个背景图像。
2．背景图像应用在元素的“内容”和“填充”区域。
3．如果一个元素同时应用了背景颜色和背景图像，那么背景图像将位于背景颜色之上。
4．子元素的背景位于父元素的背景之上。
5．设置 background-position 属性时，要先设置水平位置，再设置垂直位置。
6．background-attachment: fixed 只能用于 body 元素，作用是使 body 的背景图像以“浏览器视口”定位，且固定不动。
7.1.2 背景属性缩写
background: background-color | background-image | background-repeat
| background-position | background-attachment ;
可以省略 background 属性中的一个或多个属性值，如果省略，该属性值将使用浏览器的默认值。默认值为：
background-color: transparent
background-image: none
background-repeat: repeat
background-position: left top
background-attachment: scroll
37
练习1：请分析下面的代码省略了哪些属性值？
body {
background: url(images/);
}
答：上面的代码相当于
body {
background: transparent url(images/) repeat left top scroll;
}
练习2：请分析下面的代码运行结果是什么？
body {
background: url(images/);
background: #000000;
}
答：上面的代码相当于
body {
background: transparent url(images/) repeat left top scroll;
background: #000000 none repeat left top scroll;
}
因此，以上代码运行后，网页背景色为黑色，无背景图像。
7.1.3 设置背景图像位置的方法
1. 用关键字设置背景图像的位置
使用“对齐规则”，背景图像的 X 边与元素的 X 边对齐。
background: url(images/) no-repeat right bottom;
38
2. 用像素设置背景图像的位置
使用“坐标规则”，坐标原点是元素 padding 区域的左上顶点，坐标的正轴方向指向元素内部。
background: url(images/) no-repeat 20px 20px;
3. 用百分比设置背景图像的位置
使用“对应规则”，背景图像的百分比位置与元素的百分位置相对应。
background: url(images/) no-repeat 20% 20%;
7.2 制作垂直渐变的背景
创建垂直渐变背景的方法是：将渐变图像应用于 body 元素，并让它水平重复（repeat-x）；同时，给网页添加一个背景色，背景色与渐变图像底部的颜色相同。
7.3 用背景图像替换文本
例1：
HTML
css Zen Garden
The Beauty of CSS Design
39
CSS
#header {
}
#header h1, #header h2 {
}
display: none;
height: 300px;
background: url(images/);
例2：
HTML
The Road to Enlightenment
……
CSS
#preamble h3 {
}
height: 40px;
background: url(images/);
text-indent: -9999px;
7.4 制作圆角框
40
HTML
CSS
#box {
}
#box h3 {
}
#box ul {
}
#box li {
}
background: url(images/) no-repeat left top;
padding-left: 20px;
border-bottom: 1px dashed #000000;
margin: 10px 0;
list-style: none;
background: url(images/) repeat-y left top;
padding: 1px 15px;
color:#FFFFFF;
background: url(images/) no-repeat left top;
padding: 5px 15px;
width: 190px;
background: url(images/) no-repeat left bottom;
padding-bottom: 15px;
41
7.5 应用 PNG 图像
IE6 不支持 半透明的 PNG 图像。因此，需要使用过滤器专门设置应用了PNG 背景图像的元素在 IE6 中不显示。
#extraDiv {
}
* html #extraDiv {
display: none;
}
width: 770px;
height: 184px;
background: url(images/) no-repeat top left;
position: fixed;
left: 0;
top: 0;
42
第 8 章 浮动布局
8.1 固定宽度网页布局
1．固定宽度居左
#container {
width: 760px;
}
2．固定宽度居中
#container {
width: 760px;
margin: 0 auto;
}
3．固定宽度居右
#container {
width: 760px;
margin: 0 0 0 auto;
}
8.2 网页元素的三种位置
1．普通流
2．浮动
3．定位
8.3 浮动的概念
8.3.1 浮动（float）
浮动的方式
取值
float : left
float : right
float : none
向左边浮动
向右边浮动
不浮动
说明
8.3.2 清理浮动（clear）
43
清理浮动的方法
取值
clear : both
clear : left
clear : right
说明
为两边的浮动元素让开足够的空间
为左边的浮动元素让开足够的空间
为右边的浮动元素让开足够的空间
8.3.3 认识浮动
1．如果让一个元素浮动，它会向左或者向右浮动直至遇到父元素的边缘。如果向同一方向再浮动一个元素，它会浮动直至遇到前一个浮动元素的边缘。
2．如果向同一方向浮动多个元素，它们将一个挨一个排列，当水平空间无法容纳更多的浮动元素时，浮动元素会换行排列。
3．浮动元素离开了正常的文档流。浮动元素之后的块状元素将忽略它并占据它原来的空间。行内元素（文字）会围绕在浮动元素周围。
4．应该为浮动元素设定宽度。如果不设定宽度，浮动元素有宽度最小化的趋势，在不同的浏览器中会有不同的结果。
5．浮动元素的垂直边距（margin）不会重叠。
6．如果不希望浮动元素对后面的元素产生影响，可以为后面的元素应用“clear”属性。
7．具有“clear”属性的元素不可以和前面的浮动元素重叠。“clear”属性所带来的清理效果是使元素上方产生空白区域，推动元素向下越过浮动元素。
8．如果为清理元素设置“margin-top” 属性，该属性不起作用。因此应避免为清理元素设置 “margin-top” 属性。
9．IE6 对清理元素的“margin-top”属性作出了错误解析。
8.3.4 IE6 浮动元素双倍边界 bug
1．IE6.0 错误地将浮动元素与父元素之间的边界加倍，称为 IE 浮动元素双倍边界 bug。
2．修复 IE 浮动元素双倍边界 bug 的方法是为浮动元素设置display:inline。
8.3.5 浮动元素的垂直位置及影响范围
1．浮动元素的垂直位置由它原来所处文档流的位置决定。浮动元素只能从原来位置水平地向左或向右浮动，不可能斜向上或斜向下浮动。
2．浮动元素不对其前面的元素产生影响，而只对其后面的元素产生影响。
8.3.6 浮动的子元素
1．父元素不能包含浮动的子元素。
2．迫使父元素包含子元素的方法：
方法一：为父元素设置 overflow: hidden。对于 IE6浏览器，需要为父元素设置zoom: 1。
方法二：利用一个子元素清除浮动。
44
8.4 两列浮动布局
两列布局网页的逻辑结构
两列浮动布局－－方法1
#sidebar {
width: 280px;
float: left;
}
#content {
margin-left: 280px;
}
#footer {
clear:both;
}
两列浮动布局－－方法2
#sidebar {
width: 280px;
float: left;
}
#content {
width: 500px;
float: right;
}
45
#footer {
clear: both;
}
8.5 三列浮动布局
三列布局网页的逻辑结构
三列浮动布局－－方法1
#sidebar1 {
float: left;
width: 190px;
}
#content {
float: left;
width: 400px;
}
#sidebar2 {
float: right;
width: 190px;
}
#footer {
clear: both;
}
三列浮动布局－－方法2
#sidebar1 {
46
float: right;
width: 190px;
}
#content {
float: right;
width: 400px;
}
#sidebar2 {
float: left;
width: 190px;
}
#footer {
clear: both;
}
8.6 伪列
创建伪列的方法是在 container 元素上应用一个垂直重复的背景图像。
#container {
background: url(images/) repeat-y;
}
47
第 9 章 定位布局
9.1 定位的概念
9.1.1 定位
定位是指通过选取适合的参照物，并设置 left 或 right、top 或 bottom 属性，来确定元素在网页中的位置。
position: relative | absolute | fixed
属性值
position: relative
position: absolute;
position: fixed;
1．相对定位
position: relative;
相对定位是指元素相对于它的原始位置定位。
相对定位元素仍然保留它在文档流中的原始位置。
如果不设置宽度，相对定位元素的宽度保持原来大小。
含义
相对定位
绝对定位
固定定位
说明
元素相对于它的原始位置定位。
元素相对于已定位的祖先元素定位。
元素相对于浏览器视口定位。
2．绝对定位
position: absolute;
绝对定位是指元素相对于最近的已定位的祖先元素定位。如果不存在已定位的祖先元素，则相对于浏览器视口定位。
绝对定位元素放弃它在文档流中的原始位置。
如果不设置宽度，绝对定位元素的宽度收缩至最小。
3．固定定位
position: fixed;
固定定位是指元素相对于浏览器视口定位。固定定位的元素固定在浏览器视口的某个位置，不随网页滚动。
固定定位元素放弃它在文档流中的原始位置。
如果不设置宽度，固定定位元素的宽度收缩至最小。
IE6 浏览器不支持固定定位。
练习题：三种定位方式的比较
48
9.1.2 定位坐标系
定位坐标系有四种。
坐标系的坐标原点位于参照物元素的 padding 区域外边缘，坐标轴的正值方向指向参照物的内部。
定位元素的定位点位于定位元素的 margin 区域外边缘。
1．left-top 坐标系
当元素使用 left、top 属性定位时，采用 left-top 坐标系。
2．left-bottom 坐标系
当元素使用 left、bottom 属性定位时，采用 left-bottom 坐标系。
49
版权声明：本文标题：网页设计与制作知识点整理总结 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1702772119a430253.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
Win8编程秘技：掌握ApplicationData.current.localsettings.values.conta的核心方法
ApplicationData有一个静态属性——Current，不用多解释，指的自然是 我们当前运行的应用程序。因此，我们就知道，要得到当前应用程序的ApplicationData， 就通过该属性。 好的，第一个
Firenvim高手之路：理解并运用全局配置(globalSettings)与局部调整(localSettings)
Firenvim配置对象深度解析：globalSettings和localSettings的完整用法 Firenvim是一个强大的浏览器插件，它允许你在浏览器中直接使用Neovim编辑器。通过精心配置globalSetting
告别烦恼！这个小技巧帮你锁定IE主页安全
篡改IE默认主页是恶意网站和病毒惯用的手法，目的是为了增加其网站流量，并偷偷安装木马。下面告诉大家一个绝招，即使病毒修改了你的主页也没用，最后讲述清除恶意主页的办法。 首先在我的电脑里定位到IE安装目录：C:Program
让你的电脑成为家庭网络的新宠——简易步骤解析
开启windows 7的隐藏功能：虚拟WiFi和SoftAP（即虚拟无线AP），就可以让变成无线路由器，实现共享上网，节省网费和路由器购买费。 1、以管理员身份运行命令提示符： 快捷键win+R→输入cmd→回车。
轻松几步！让笔记本的WiFi信号也给台式电脑带来网络
问题关键词： Windows 7 无线上网 共享 台式机 设置 问题大致描述： 笔记本现在可以无线上网，怎么设置可以把网络通过网线对连共享给台式机 解决方法： 【Windows XP 设置方法】
轻松上手！Win11系统里玩转IP地址指南
说明：由于项目开发的需要，有时候要更改主机的ip地址来进行测试或进行合作开发，以下是修改主机ip地址的步骤。 1、选择此电脑（我的电脑），右击选择属性，进入如下面板选择网络与Internet，接着点击
Windows XP新手必学：轻松定制你的任务栏外观
1、在XP系统的任务栏属性里，开启显示“快速启动栏”鼠标右击电脑桌面底部的“任务栏”–》属性—》勾选√“显示快速启动” 2、点击桌面左下角的“开始”–》运行–》输入: regsvr32 n i:u shell3
别害怕！只因这个不起眼的“小黑点”，让我们对QQ性能忧心忡忡
正序前一阵子QQ群里流行了一个东西，一段话加上一个黑点（表情），点击之后QQ就会卡死。当时只觉得很好玩，没多久就又见了一次。 既然又看到了就一定要好好看看了。 刚开始遇到这个时第一反应是曾经看过
幕后揭秘：desktop.ini文件如何管理你的桌面图标
0x00 前言 在一次应急响应的过程中发现某恶意脚本使用desktop.ini更改文件夹属性进行隐藏。但是一直在忙于出差没啥时间进行研究，刚好现在稍微有一点时间，于是对desktop.ini进行研究。发现网上没有类似文章，遂特
解锁家庭娱乐新体验：轻松配置路由器与Adobe Flash Player
一、设备：买一个路由器，如TP-LINK（TL-R402M）90元左右，有一个WAN口和四个LAN口，另加上两条的两端都钳有水晶头的网线。 二、接法：把插到台式机的网线水晶头（另一端已接ADSL的）的接到路由器的WAN口上，用
家庭网络新手必读：路由器设置全攻略
一、设备：买一个路由器，如TP-LINK（TL-R402M）90元左右，有一个WAN口和四个LAN口，另加上两条的两端都钳有水晶头的网线。 二、接法：把插到台式机的网线水晶头（另一端已接ADSL的）的接到路由器的WAN口上，用
从Flash到Adobe Flash Player：SWF文件的新起点
制面板大全在程序运行过程中启动控制面板的各个设置功能：var x:cardinal;begin{启动控制面板}x:=winexec('rundll32.exe shell32.dll,Con
VSCode用户必学：自定义快捷键，实现新建文件夹的智能操作
实现目标在获取左侧项目栏文件夹焦点情况下 添加新建文件夹的快捷键 Shift + A 我本来是个atom忠实粉丝, 但是atom使用window10自带输入法在书写汉字时总是会出现首字母缺失的情况, 查了好久没
宽带连接遇651，这不是世界末日，这里有解决办法！
我们日常使用网络的过程中有时候如果出现提示宽带连接错误651的提示，那么这个是什么原因你，其实宽带连接错误651为调制解调器（modem）发出的错误报告，一般情况下是未找到指定的端口。接下来我们来看看如何解决：
笔记本无线网连接故障？快速修复指南助你一臂之力！
笔记本无线网络连接不上的解决方法 第一步：应检查无线网卡的驱动是否安装正确。右键点击“我的电脑”-属性-硬件-设备管理器，查看是否存在标有问号或叹号的网络设备，如果有，则说明无线网卡驱动安装不正确。使用金山卫士的“硬件检测”功
IE主页被SWF破坏？恢复教程，快来看看！
假如你的首页被修改后是1.打开internet属性，把首页改回。2.右键点击快速启动栏上的IE图标，选择 属性，将"C:Program FilesInternet Exploreriexplore.e
安静！500错误，Adobe Flash Player在幕后悄悄闹别扭！
网页无法显示 您要访问的网页存在问题，因此无法显示。 ---------------------------------------------请尝试下列操作： 打开
解决桌面图标异常方法
简单介绍几种方法：1.在桌面上单击右键，看到排列图标-在桌面上锁定web项目。如果这个项目上有对勾的话，把它去掉。2.在我的电脑上查看属性：右键点“我的电脑”—“属性”—“高级”—“设置”—再点“性能”里的“设
本地连接丢失解决指南
<script src="" type=textjavascript> <script> 或者本地连接丢失都是是我们常见的一种计算机故障，没有了本地连接，有的时候能正常上网，可有的
192.168.1.1的秘密通道：探索家庭网络的入口
虽然前面小编也发布过关于的相关信息,但是都是解释相关的问题的,没有好好介绍关于的信息,今天小编星期八就给大家介绍一下的详细信息! 是什么? 192.168.0.1属于IP地址的
发表评论