图3.5例3.2 的运行结果说明代码中两个标签分别创建了一个文本框和一个提交按钮。标签的type 属性用于设置标签创建哪种类型的表单元素,这个属性的默认值为text 即文本框。表3.1标签的type 属性除type 属性用于设置标签的类型之外,还支持其他一些属性,用于设置其名称,初始值、图像地址、选中与否的状态等。表3.2标签的属性......
2023-10-19
视频教学资源
学校目标
理解WEB 标准
了解XHTML
理解结构与表现分离
理解CSS 的盒状模型
掌握CSS 实现页面布局所需的样式属性
本章单词
请在预习前完成下列单词的学习,将其写在横线上。
① behavior([bɪ'heɪvjə]反应,行为,举止)______________________________
② XML(Extensible Markup Language,即可扩展标记语言)_________________
③ DTD(Document Type Definition,文档类型定义)________________________
④ margin(['mɑ:dʒɪn] 外边的空白,外边距,外补丁)______________________
⑤ padding([ˈpædɪŋ]填充物,内边距,内补丁)____________________________
⑥ block([blɒk] 街区,块)__________________________________________
⑦ inline(['ɪn,laɪn] 内联,行内)____________________________________
⑧ overflow([ˌəʊvə'fləʊ] 泛滥,溢出)________________________________
⑨ position([pəˈzɪʃn] 位置,定位)___________________________________
⑩ relative([ˈrelətɪv] 相对的)_____________________________________
⑪ absolute([ˈæbsəlu:t] 绝对的)_____________________________________
⑫ vertical([ˈvɜ:tɪkl]垂直的,竖直的)________________________________
预习任务
1.当使用margin 属性对元素的4 个外边距进行设置,依次的顺序为( )。(选择 一项)
A.top bottom left right
B.left right top bottom
C.top left bottom right
D.top right bottom left
2.使用position 属性可设置元素的定位机制。要使元素以它的父元素为参照,进行相对定位,应为postion 属性赋( )的值。(选择一项)
A.static(www.chuimin.cn)
B.absolute
C.relative
D.fixed
3.当页面中有多个元素在垂直于浏览器窗口的方向上发生层叠时,可使用( )属性设置它们的层叠顺序,此属性的值越( )则此元素就越接近浏览者。(选择 一项)
A.z 大
B.index 小
C.z-index 大
D.z-number 大
4.要将一个元素隐藏,并且要求此元素原来占据的页面空间被释放,应为此元素设置( )属性,并赋值为( )。(选择一项)
A.visibility none
B.visibility hidden
C.display hidden
D.display none
5.CSS 盒状模型规定盒子由content,margin,padding,border 4 个部分组成。由盒子的外部到盒子内部,这4 个部分的顺序依次是( )。(选择一项)
A.border padding margin content
B.margin border padding content
C.content padding border margin
D.border margin content padding
6.在网页中显示一个带绿色实线边框的层,如下图所示。(参考本章例7.1)
带边框的层
7.在网页中显示一个带红色虚线边框的层,如下图所示。(参考本章例7.2)
虚线边框层
8.在网页中显示一个带黑色实线边框的层,层中的文字距离左边框线有20px 的间隔,如下图所示。(参考本章例7.3)
使用间隙的层
从21 世纪的最初几年开始,在网站和网页开发领域,由众多的网站运营者、WEB 设计师、WEB 开发人员共同掀起了一股网站重构的浪潮。
按照《网站重构》这本业界经典名著的解释,“未采用CSS,大量使用HTML 进行定位、布局,或者虽然已经采用了CSS,但是未遵循HTML 结构化标准的站点‘变成’让标记回归标记的原本意义。通过在HTML 文档中使用结构化的标记以及用CSS 控制页面表现,使页面的实际内容与它们呈现的格式相分离的站点”的过程就是网站重构。
在持续多年的网站重构浪潮中,经过广大WEB 设计者和开发者广泛的实践和传播,WEB标准的概念逐渐深入人心。而现在,遵循WEB 标准进行网站和网页设计与开发,已成为业界的共识。
有关基于HTML与CSS网页设计的文章
图3.5例3.2 的运行结果说明代码中两个标签分别创建了一个文本框和一个提交按钮。标签的type 属性用于设置标签创建哪种类型的表单元素,这个属性的默认值为text 即文本框。表3.1标签的type 属性除type 属性用于设置标签的类型之外,还支持其他一些属性,用于设置其名称,初始值、图像地址、选中与否的状态等。表3.2标签的属性......
2023-10-19
A.上、下、左、右B.左、底、右、顶C.顶、右、底、左D.顶、左、底、右3.CSS 属性text-decoration 可以设置为以下( )一组值。A.none、justfy、left、rightB.none、left、center、rightC.none、underline、overline、line-throughD.none、capitalize 、uppercase、lowercase4.以下有关字体的CSS 属性的说法,错误的是( )。A.list-style-type、list-style-position、list-style-imageB.list-style-position、list-style-type、list-style-imageC.list-style-image、list-style-position、list-style-typeD.list-style-type、list-style-image、list-style-position6.创建一个HTML 页面,在其中编写CSS 样式代码。设置了背景颜色的页面7.在HTML 中使用无序列表显示商品信息,在其中编写CSS 样式代码。商品列表本章将详细介绍常用的CSS 样式属性。......
2023-10-19
视频教学资源学校目标理解表格的结构掌握表格相关的标签掌握单元格合并理解列表的分类掌握两种列表及列表项目的标签本章单词请在预习前完成下列单词的学习,将其写在横线上。A.width cellspacingB.cellspacing widthC.cellspacing cellpaddingD.cellpadding cellspaing2.使用()标签为表格创建标题,使用()标签代替
2023-10-19
清除浮动可以理解为打破横向排列。图8.10例8.6 的运行结果_未清除浮动前说明按照之前所述的浮动的规则,secondDiv 上浮到firstDiv 右侧。假设出于某种需要,我们希望secondDiv 仍然出现在firstDiv 的下方,就像firstDiv没有设置浮动,仅为secondDiv 设置向左浮动那样。图8.11例8.7 的运行结果_清除左侧浮动说明在secondDiv 上设置了清除左侧浮动,也就是说它的左侧不能有浮动元素,这样导致它自己换行显示以满足这一规则。以下代码演示了清除右侧浮动的场景。......
2023-10-19
A.ID 选择器B.伪类选择器C.类选择器D.HTML 标签选择器3.假设有多条样式规则由一个独立的样式文件包含,现在有一个网页要使用这个样式文件中的样式规则,应在此网页中使用( )标签链接这个样式文件,并设置此标签的( )属性的值为这个样式文件的地址。登录页面CSS 的英文全称为Cascading Style Sheet,中文译名通常是层叠样式表或级联样式表。......
2023-10-19
更常见的是三列式布局,具体而言就是整个页面分为左中右3 栏。按照这个思路,首先设置布局容器divLayout 使用绝对定位。添加CSS 代码如下:代码运行结果如图8.22 所示。图8.22自适应左外边距设置为202 像素是来自于4 个部分:左侧divNav 与divLayout 左边界距离10 像素;左侧divNav 宽度是180 像素;divContent 与divNav 的距离10 像素;divNav两条边框线各1 像素。......
2023-10-19
视频教学资源学校目标理解表单的作用理解表单与表单元素的关系掌握表单标签及其属性掌握各种表单元素标签及其属性认识表单提交本章单词请在预习前完成下列单词的学习,将其写在横线上。图3.1表单示例_百度首页博客园的登录表单,如图3.2 所示。图3.3表单示例_华声论坛注册由上面的例子可以看到,浏览者可以填写表单中的文本框、密码框等表单元素,并确认向服务器发送这批数据,由此实现浏览器与服务器之间的数据交互。......
2023-10-19
使用与背景相关的CSS 属性,可以设置一个区域的背景颜色、背景图像。与背景相关的CSS 属性见表6.1。表6.1常用的CSS 样式属性_背景例6.1:代码运行结果如图6.1 所示。图6.1例6.1 的运行结果_背景说明网页元素的背景显示时,背景图像优先于背景颜色。......
2023-10-19
相关推荐