第8章 CSS网页元素设计
第8章
应用自定义的CSS样式 图8-3 应用自定义的 样式
8.3 编辑 编辑CSS样式 样式
保存了新的CSS样式后 即可打开CSS编辑器, CSS编辑器 保存了新的CSS样式后,即可打开CSS编辑器,如 CSS样式后, 所示. 图8-8所示.在该对话框中我们可以详细定制样式的 格式.CSS样式表可以定义包括许多类型的格式 样式表可以定义包括许多类型的格式, 格式.CSS样式表可以定义包括许多类型的格式,如 文本,背景,边框等,下面我们将一一进行介绍. 文本,背景,边框等,下面我们将一一进行介绍.
返回
8.6 设置 设置CSS样式参数 样式参数
(4)在"当编辑CSS规则时:使用速记"区域中,可以选择在什 当编辑CSS规则时:使用速记"区域中, CSS规则时 么样的情况下,编辑现有的CSS代码使用速记形式,有三种选择. CSS代码使用速记形式 么样的情况下,编辑现有的CSS代码使用速记形式,有三种选择. 当在CSS面板中双击时"区域中, CSS面板中双击时 (5)在"当在CSS面板中双击时"区域中,可以设置在双击鼠标 左键时进行的操作.有三种选择. 左键时进行的操作.有三种选择. 设置完毕,单击"确定"按钮,以保存设置的格式参数. (6)设置完毕,单击"确定"按钮,以保存设置的格式参数.
8.3.5 边框的定义面板
从"CSS规则定义"对对话框的左边目录列表中选择"边框" 规则定义 在右边的区域可以设置有关CSS样式的方框格式,如图8 所示. CSS样式的方框格式 在右边的区域可以设置有关CSS样式的方框格式,如图8-7所示.
图8-7 边框的定义面板
8.3.3 区块的定义面板
Div+CSS网站布局应用教程第8章 使用CSS样式设置列表效果
8.2.2
ul无序列表
Hale Waihona Puke 无序列表是网页中常见的元素之一，用于将一组相关的列表项目排列在 一起，并且列表中的项目没有特别的想顺序。无序列表使用<li>标签来罗列 各个项目，并且每个项目前面都带有特殊符号，比如黑色实心圆等。在 CSS中，可以通过list-style-type属性对无序列表前面的符号进行控制。 list-style-type属性的语法格式如下。 list-style-type: 参数1, 参数2,…;
自测8——为网页元素赋予内 容
自测8：为网页元素赋予内容 最终文件：光盘\最终文件\第8章\8-4-1.html 视 频：光盘\视频\第8章\8-4-1.swf
8.4.2
透明度opacity属性
opacity属性用来设置一个元素的透明度，opacity取值为1时是完全不透 明的，反之，取值为0时是完全透明的。1~0之间的任何值都表示该元素的透 明度。 opacity属性的语法格式如下。 opacity: <length> | inherit;
自测2——设置列表符号
自测2：设置列表符号 最终文件：光盘\最终文件\第8章\8-2-2.html 视 频：光盘\视频\第8章\8-2-2.swf
8.2.3
list-style-image属性
在网页设计中，除了可以使用CSS样式中的列表符号，还可以使用liststyle-image属性自定义列表符号。 list-style-image属性的基本语法如下。 list-style-image: 图片地址;
自测5——制作复杂新闻列表
自测5：制作复杂新闻列表 最终文件：光盘\最终文件\第8章\8-2-5.html 视 频：光盘\视频\第8章\8-2-5.swf
网页设计与制作（附微课视频第2版）参考答案
⽹页设计与制作（附微课视频第2版）参考答案第⼀章习题参考答案⼀、选择题1、A2、A3、B4、C5、A、B、C、D6、A、C、D7、B8、C9、B⼆、简答题1．答：URL是UniformResourceLocation的缩写,译为“统⼀资源定位符”，URL是Internet 上⽤来描述信息资源的字符串,主要⽤在各种WWW客户程序和服务器程序上,特别是著名的Mosaic。
采⽤URL可以⽤⼀种统⼀的格式来描述各种信息资源,包括⽂件、服务器的地址和⽬录等；2答：⽂本、图像、动画、视频等。
3.答：⽹页结构语⾔的作⽤是将⽹页需要的内容以结构化、模块化的⽅式总结和存储，供表现语⾔和⾏为进⾏调⽤。
⽹页结构语⾔包括可扩展超⽂本标记语⾔XHTML 1.0和HTML 5等两种结构语⾔。
其中，XHTML 1.0为当前被⼴泛使⽤的标准，⽽HTML 5标准则是⽹页未来将被使⽤的标准。
⽹页表现语⾔的作⽤是为⽹页的结构语⾔定义尺⼨、位置、背景，以及⽂本的各种效果。
⽬前⽹页表现的国际标准语⾔为CSS 样式表技术。
⽹页结构语⾔和⽹页表现语⾔共同作⽤可以为⽤户呈现⽹页的整体画⾯，然⽽，⽹页是⼀种交互性的媒体，其除了可以呈现内容外，还可以根据⽤户的界⾯操作响应各种事件，此时，就需要⽤到⽹页的⾏为语⾔。
⽹页的⾏为语⾔包括多种类型，例如，JavaScript、JScript以及VBScript等。
4.答：⼀个完整的HTML5⽂档包含声明、头部和主体三个部分组成。
第⼆章习题参考答案⼀、选择题1.A、B2.A3.B4.D5.D6.D7.C⼆、简答题1．答：（⼀）⽹站功能需求分析；（⼆）⽹站的策划，本阶段主要包含⽹站栏⽬，内容，产品提炼等等；（三）⽹站设计，根据策划开始进⾏设计；（四）程序代码的开发；（五）上线测试；（5）后期维护；2.答：（1）对称与均衡对称分为左右对称、上下对称、重复对称、旋转对称等形式。
对称的造型在⼤⾃然中⽐⽐皆是，同时也是版式设计常⽤的构成形式。
网页设计与开发第8章试卷及答案
《网页设计与开发第8章》试卷一、选择题1) CSS是利用什么HTML标记构建网页布局？（）A．<dir>B．<div>C．<dis>D．<dif>答案: B2) 在CSS语言中下列哪一项是"左边框"的语法？（）A．border-left-width: <值>B．border-top-width: <值>C．border-left: <值>D．border-top-width: <值>答案: C3）（）样式表一般用于大型网站。
A.内嵌B.链接外部C.选入D.嵌入答案: B4) 在CSS语言中下列哪一项是"列表样式图象"的语法？（）A．width: <值>B．height: <值>C．white-space: <值>D．list-style-image: <值>答案: D5) 怎样给所有的<h1>标签添加背景颜色? （）A．.h1 {background-color:#FFFFFF}B．h1 {background-color:#FFFFFF;}C．h1.all {background-color:#FFFFFF}D．#h1 {background-color:#FFFFFF}答案: B6) 如何去掉文本超级链接的下划线？（）A．a {text-decoration:no underline}B．a {underline:none}C．a {decoration:no underline}D．a {text-decoration:none}答案: D7) 下列哪个css属性能够更改文本字体？（）A．f:B．font=C．font-family:D．text-decoration:none答案: C8）以下的HTML中，哪个是正确引用外部样式表的方法？A.<style src="mystyle.css">B.<link rel="stylesheet" type="text/css" href="mystyle.css">C.<stylesheet>mystyle.css</stylesheet>D.<style import url("mystyle.css")>答案: B9）下列哪个选项的CSS语法是正确的？A．body:color=blackB. {body:color=black(body}C. body {color: black}D. {body;color:black}答案: C10）如何产生带有正方形的项目的列表？（）A. list-type: squareB. list-style-type: squareC. type: squareD. type: 2答案: A11）CSS的继承并不是完全的“克隆”，有些继承是不起作用的，在下面的几个属性中，那个继承是起作用的（）。
《网页设计》课程教学大纲
《网页设计》课程教学大纲
一、课程概述
网页设计课程是由语言编写的，通过IE浏览器编译后供用户获取信息的页面设计，网页又称Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。
二、教学目标
熟练的掌握HTML语言的文档结构和基本标签使用。
能综合应用Dreamweaver软件、HTML和 CS S技术制作网页，掌握规划、开发、发布和管理静态网站的专业知识和技能。
三、最低课时安排
《网页设计》课程最低总计学习课时为64课时。
各章节最低课时安排如下表所示：
四、教学内容
我们对本课程的具体授课内容会提供PPT，并在PPT中标明知识点讲述要点，详细内容请参考PPT。
CSS+Div布局全
8.5.1 练习案例-电子产品
4．利用#menu样式为menu的<div>标签添加图像背景。在#nav标签 中，输入文字“公司介绍 产品展示 客户服务 人员招募 互动社区”， 并设置#nav样式，字体大小为16px，行高度为30px，颜色为#FFF。 5．设置#nav a:link，#nav a:visited样式属性，颜色为#FFF，文字装 饰为无，设置#nav a:hover样式属性，文字装饰为下划线，完成导 航条的制作。 6．在ID名称为info的<div>标签中，插入1*3表格，宽度为100%，将 三个图像分别插入到单元格中，设置#info样式背景为黑色。 素材所在位置：光盘/案例素材/ch08/练习案例-电子产品。 案例布局要求如图8-67所示，案例效果如图8-68所示。
无浮动
8.2.3 浮动方式
#box1 { height: 100px; width: 150px; background-color:
#F90; }
#box2 { height: 100px;
width: 200px; background-color: #C30; } #box3 { height: 100px; width: 250px; background-color: #3FF; }
8.1.2 盒子属性
在CSS样式中， 将盒子模型的 内边距、边框 和外边距，按 top、bottom、 left、right的四 个方向，分别 进行定义和设 置，描述盒子 属性。
8.1.2 盒子属性
例如，在网页中创建一个<div>标签，ID标识为 Div1，并在其中插入一个图像，代码如下：
#apDiv1 { position:absolute;
第8节用CSS设置表格跟表单样式
8.3.1 搭建HTML结构 8.3.2 设置整体样式和表头样式 8.3.3 设置日历单元格样式
8.4 CSS与表单 8.4.1 表单中的元素
图8.18 普通表单
图8.19 简单的CSS样式风格
8.4.2 多彩的下拉菜单
图8.21 七彩的下拉菜单
图8.22 最终效果
8.5 网民调查问卷实例
<th> </tr> </tfoot> </table>
图8.6 表格的HTML结构示意
8.2 美 化 表 格
图8.7 交替变色的表格样式
8.2.1 8.2.2 8.2.3 8.2.4
搭建HTML结构 整体设置 设置单元格样式 斑马纹效果
8.3 制 作 日 历
图8.12 Google日历
图8.13 中视图模式显示的日历
<tbody> <tr> <th>
<th> <td>
<th > <td>
<th> </tr> </thead>
<td> </tr>
<tr> <th>
<td>
<td>
<td> </tr>
<tr> <th>
<tfoot> <tr> <th>
<td> <th>
<td> <th >
<td> </tr> </tbody&g
Web前端开发与应用教程-第二版 第8章 参考答案[1页]
第8章参考答案
1. 结合HTML5的语义化标签，使用DIV+CSS网页布局技术将网页分成四行三列，第一行header，第二行nav，第三行main，第四行footer，在main中左右两侧各一个aside和中间一个article，article中包含section，通过CSS盒子模型将这些内容显示在网页中。
参考8.2.4部分。
2. 在练习1的基础上，参考8.5部分，在第二行nav区域添加无序列表标签ul、li制作的水平方向导航栏。
参考8.5部分。
3. 参考8.2.3的第2部分，使用和网页元素绝对定位相关的CSS属性，制作固定在页面顶端的导航栏，如图8-29所示：
图8-29 绝对定位制作的固定在顶端的导航栏
提示可能用到的CSS属性有:width: 100%; height: 30px; position: fixed; top:0; z-index: 999;等。
参考8.5部分结合提示可完成。
4. 任意选取一篇文章，制作成HTML页面，使用多列布局的技术排版成4列的布局。
参考8.3部分，并修改为下列参数即可。
/*设置文章内容显示为4列*/
column-count:4;
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
5. 使用CSS3弹性盒布局技术完成四行三列的页面布局。
参考8.4部分。
《网页设计与制作》课程标准
《网页设计与制作》课程标准学时数：48学时________________ 课程性质：专业必修课—适用专业：计算机应用专业—一、本课程的性质、地位、作用以及与其它相关课程内容的联系《网页设计与制作》是计算机应用专业的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件Dreamweaver,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。
二、课程教学目标本门课程在专业教学计划中起着十分重要的作用，通过这门课程，学生可以掌握以下技能和知识：*掌握网站的开发流程，如建站规划、效果图制作、建立站点等相关知识。
*掌握各种网页元素在DreamWeaVer中的使用。
例如表格、文本、图像、超级链接、层和表单等。
*掌握测试和发布网站的方法。
包括网站测试的内容和方法。
*能够解决一些网页设计中的常见问题。
三、本课程学时安排四、课程教学内容和基本要求（按章节详细阐述）第一章：网页设计概述（一）教学重点和难点重点：Dreamweavercs5的参数设置、Dreamweaver的站点设置。
难点：DreamWeaVer的站点设置。
（二）教学内容和基本要求教学内容：基础知识，初识DreamWeaver,DreamWeaVerCS5的参数设置，设置站点。
基本要求：了解网页设计基本知识；掌握DreanlweaVerCS5的参数设置；熟练掌握Dreamweaver的站点设置。
第二章：表格布局（一）教学重点和难点重点：表格基本操作、表格布局。
难点：表格布局。
（二）教学内容和基本要求教学内容：表格基本操作，表格高级应用，表格布局，网页设计基础。
基本要求：了解表格基本操作、表格高级应用及网页设计基础；掌握表格基本操作；熟练掌握表格布局。
第三章：CSS样式表（一）教学重点和难点重点：CSS样式表应用。
第8章DIV+CSS布局入门
机械工业出版社
8.1 认识div
8.1.2 使用div标签
1．插入div标签 2．div的嵌套
机械工业出版社
8.2 AP元素
8.2.1 AP元素与AP Div元素
1．AP元素 2．AP Div元素
机械工业出版社
8.2 AP元素
8.2.2 使用AP Div
1．插入AP Div 2．连续绘制多个AP Div 3．创建嵌套的AP Div
机械工业出版社
8.2 AP元素
8.2.3 AP Div的属性设置与相关操作
1．AP Div的属性面板
2．改变AP Div的堆叠顺序 3．调整AP Div的大小
机械工业出版社
8.3 CSS盒模型
8.3.1 什么是盒模型
盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、 内边距（padding）、边框（border）和外边距（margin）组成。
机械工业出版社
8.3 CSS盒模型
8.3.4 外边距的叠加
1．两个元素垂直相遇时叠加 2．两个元素包含时叠加
机械工业出版社
8.4 CSS的定位
8.4.1 静态定位（position:static;）
静态定位是position属性的默认值，即该元素出现在文档的常规位置， 不会重新定位。
机械工业出版社
利用CSS样式布局页面结构时，浮动（float）是使用率较高的一种定位 方式。当某个元素被赋予浮动属性后，该元素便脱离文档流向左或向右移动， 直到它的外边缘碰到包含框或另一个浮动框的边框为止。
机械工业出版社
8.5 浮动与清除浮动
8.5.2 清除浮动（clear）
在CSS样式中，浮动与清除浮动是相互对立的，使用清除浮动不仅能够 解决页面错位的现象，还能解决子级元素浮动导致父级元素背景无法自适应 子级元素高度的问题。清除浮动主要利用的是clear属性中的both（左右两侧 均不允许浮动元素）、left（左侧不允许浮动元素）和right（右侧不允许浮动 元素）3个属性值清除由浮动产生的效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
8.1.1 字体的设置
在HTML中设置字体是使用的<font>标记的face属性，而 CSS字体属性包括字体族科、字体大小、字体样式、字体加粗及字 体变体。 1．设置字体族科——font-family 2．设置字号——font-size 3．设置字体样式——font-style 4．设置字体加粗——font-weight 5．设置字体变体——font-variant 6．组合设置字体属性——font
8.2.5 设置背景附件
背景附件属性（background-attachment）就是用来设 置背景图片是否会随着滚动条的移动而一起移动。基本格式如 下： background-attachment:scroll|fixed
8.2.6 背景属性整体设置
编写控制背景的CSS代码往往使用多个属性的组合，为此， CSS提供了背景属性的整体编写方法，即使用“background” 属性，其值由多个背景控制的属性值组合而成，基本格式如下： background：背景色 背景图片路径 背景平铺方式 背景是 否固定 背景定位；
8.3.2 图文混排
由于段落的p元素是块状元素，利用img元素的浮动属性同 样可以很漂亮的完成复杂的图文排版。
8.3.3图片的裁切
为了可以在网页中用较小的容器显示较大的图片，CSS提供 了“clip”属性对图片进行裁切，效果类似于Photoshop中的画布 大小的调整，基本格式如下： clip: auto|rect(上偏移 右偏移 下偏移 左偏移)
8.2.4 设置背景图片位置
在网页中插入背景图时，如果背景图片不平铺，该图片会默 认显示在网页的左上角，CSS提供了用于定位背景图片的 background-position，其定位功能很强大，确定图片位置能精 确到像素级别。 定位背景的方法有两种，一种是指定位置名称，另一种是通 过像素或百分比指定背景具体的位置，基本格式如下： background-position：关键字|百分比|长度
8.2.3设置背景图片
背景图片的设置属性是background-image，其属性值即为图 片所在的路径，基本格式如下： background-image:url(“图片路径”); 该属性设置背景图片的效果和HTML中背景图片设置是一样的 效果，默认为平铺的背景图片，配合CSS其他背景属性，可以使背 景图片得到更精确的控制。控制背景平铺的属性为backgroundrepeat，其值有4个： （1）repeat：默认值，背景图片在水平和垂直方向平铺 （2）repeat-x：水平方向平铺 （3）repeat-y：垂直方向平铺 （4）no-repeat：不平铺，只显示一张背景图片 将background-image属性和background-repeat属性结合 使用，就可以方便的控制背景图片的平铺方式。
8.1.2 文本的排版
文本排版主要包括字符间距、单词间距、文字修饰、文本排列、 段落缩进及行高的设置等。 1．调整字符间距——letter-spacing 2．调整单词间距——word-spacing 3．添加文字修饰——text-decoration 4．设置文本排列方式——text-align 5．设置段落缩进——text-indent 6．调整行高——line-height 7．段落内容裁剪 8．转换英文大小写——text-transform
8.3 图片样式控制
在HTML中，通过img元素和scr等属性可以将外部的图片 插入到网页文档中，在网页设计中，图片的排版也很重要，本节 主要学习图片的定位、图文混排及图片的裁剪。
8.3.1 图片定位
图片即img元素，作为XHTML一个独立的对象，需要占据 一定的空间，这与上一节所学习的背景图片有着很大的差别。 img元素在页面中的定位依然要和盒模型定位来设计，特别是当 图片成为超链接时，CSS伪类的各种设计也可以应用到img元素。
8.2.2 设置背景颜色
CSS中使用background-color属性来设置背景，相对于 HTML中的背景色设置，CSS背景色有更为灵活的设置方法， 不仅可以设置网页的背景颜色，还可以设置文字的背景颜色。 基本格式如下： background-color: 关键字|RGB值|transparent
8.2 颜色与背景
网页中的每个元素都有前景色与背景色，也有很多的网页 或文字的背景由图片组成。HTML设置背景的样式非常单调，在 Web标准的页面中，背景的CSS样式非常强大，广泛的应用到 页面的美化应用中。
8.2.1 设置字体颜色
在HTML中设置字体颜色使用的是<font>标记的color属性， 而在CSS中仅使用color属性设置字体的颜色，但一定要明确 color属性不是只用来设置字体的颜色，网页中每个元素的颜色 都可以用color属性来设置，且用color属性设置的颜色一般都为 标记内容的前景色。 基本语法如下： color:关键字|RGB值
《网页设计制作基础与上机指导——HTML+CSS+JavaScript》
清华大学出版社
第8章 CSS网页元素设计
ห้องสมุดไป่ตู้本章主要内容：
字体样式的设置
段落样式的设置
颜色与背景的设置
图片样式的控制
8.1 文本的设置
在CSS中有关文本的控制，包括字体属性及文本属性，字 体属性是对文字大小、样式及外观的控制，文本属性则包括字 符、单词及行与行的间距等，主要帮助实现对文本更加精细的 控制。