HTML5及CSS3web前端开发技术习题答案解析 下载本文

需要说明的是,font-weight、font-variant、font-style这3个属性的顺序是可以改变的,但font-size、font-family必须按指定的顺序出现,如果顺序不对或缺少一个,那么整条样式定义可能不起作用。

(2)设置图像边框需要使用border-image属性,说明该属性各参数的意义,并在不同的浏览器中调试显示结果。

CSS3增加的border-image属性,该属性指定一个图像文件作为边框,边框的长或宽会随着网页元素承载内容的多少自动调整。使用border-image属性,浏览器在显示图像边框时,自动将用到的图像分割成9部分进行处理,不需要用户再考虑边框与内容的适应问题。

border-image属性的第一个参数需要指明边框图像的地址,接着4个参数是浏览器将边框图像分割时的上右下左四个边距,最后一个参数是边框宽度。例如:

border-image:url(images/borderimage.png) 5 10 15 20/25px; -moz-border-image:url(images/borderimage.png) 5 10 15 20/25px; -webkit-border-image:url(images/borderimage.png) 5 10 15 20/25px;

(3)比较word-wrap属性与word-break属性的区别,并通过示例加以验证。

word-wrap 是CSS3新增加的属性,该属性允许超过容器的长单词换行到下一行,它的取值为normal和break-word,默认值为normal,表示只在允许的断字点换行,break-word表示在长单词或 URL 地址内部进行换行。

word-break 是CSS3新加的属性,用来处理如何自动换行。它的取值为normal、break-all和keep-all。默认值为normal,表示使用浏览器默认的换行规则,break-all表示允许在单词内换行,keep-all表示只能在半角空格或连字符处换行。

(4)本章中介绍的各种CSS属性既有CSS2以前的属性,也有CSS3新增的属性,列举出CSS3新增属性,说明其释义。

word-break ,用来处理如何自动换行。

word-wrap,该属性允许超过容器的长单词换行到下一行。 border-radius,可以设计各种类型的圆角边框。

border-image属性,该属性指定一个图像文件作为边框,边框的长或宽会随着网页元素承载内容的多少自动调整。

max-width和max-height分别用来设置图片宽度最大值和高度最大值。

2.操作题

(1)用CSS设计如图14-24所示的页面,要求如下。

① 设置背景background-attachment、background-image、background-repeat、background-position等属性;

② 设置图片的border、width、height等属性;

③ 为控制图片位置,可将图片置于

标记或
标记中。







第十五章

1.简答题

(1)什么是CSS盒模型概念,如何计算其宽度?

盒模型是CSS控制页面布局的一个非常重要的概念,页面上的所有元素,包括文本、图像、超级链接、div块等,都可以被看作盒子。由盒子将页面中的元素包含在一个矩形区域内,这个矩形区域则称为“盒模型”。

盒模型由内到外依次分为内容(content)、填充(padding)、边框(border)和边界(margin)4部分,如图15-1所示。盒子的实际大小为这几部分之和,盒子宽度为:左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

(2)CSS3新增哪些与盒相关的属性?简述其各自功能。

①宽度和高度,定义内容的大小属性;如果盒子里信息过多,超出width和height属性限定的大小,盒子的高度将自动放大。这时需要使用overflow属性设置处理方式。定义盒模型语法格式如下:

width: auto | length; height: auto | length;

overflow: auto | visible | hidden | scroll; ②边界(margin)是盒模型与其他盒模型之间的距离,使用margin属性定义,其语法格式如下。

margin: auto | length;

③填充(padding)用来设置内容和盒子边框之间的距离,可用padding属性设置,其语法格式如下。

padding: length;

④边框(border)是盒模型中介于填充(padding)和边界(margin)之间的分界线,可用border-width、border-style、border-color属性定义边框的宽度、样式、颜色,也可以直接使用border属性后加3个对应值,用空格隔开进行设置。

(3)说明下列border-style属性值的含义:solid、outset、ridge、dotted。 边框样式用border-style属性描述,其值可取的关键字如下。 none:无边框,默认值

hidden:隐藏边框

dashed:点划线构成的虚线边框 dotted:点构成的虚线边框 solid:实线边框 double:双实线边框

groove:根据color值,显示3D凹槽边框 ridge:根据color值,显示3D凸槽边框 inset:根据color值,显示3D凹边边框 outset:根据color值,显示3D凸边边框

(4)简述绝对定位的设置效果。

设置position属性的值为absolute时即为绝对定位,是盒子相对其具有position属性设置的父对象进行定位。如果父对象无position属性设置,盒子以浏览窗口为参照绝对定位。绝对定位的元素浮于页面之上,不占用原页面空间,后续元素不受其影响,填充其原有位置。

(5)简述CSS的定位属性position的值的含义。

使用position属性可以精确控制盒子的位置,其语法格式如下。position: static |relative | absolute | fixed

static:静态定位,默认的定位方式,盒子按照HTML规则定位,定义top、left、bottom、right无意义。

absolute:绝对定位,通过top、left、bottom、right等属性值定位盒子相对其具有position设置的父对象的偏移位置,不占用原页面空间。

relative:相对定位,通过top、left、bottom、right等属性值定位元素相对其原本应显示位置的偏移位置,占用原位置空间。

fixed:固定定位,通过top、left、bottom、right等属性值定位盒子相对浏览器窗口的偏移位置。

2.操作题

(1)设置盒模型,实现图15-30所示效果。

height: 20px; width: 150px;

background-color: #EFEFEF; margin: 10px; } .p1 {

padding: 20px;

margin: 60px;

border-style:outset; border-width:10px; border-color:#0F0 ; }

(2)设计实现购物网站商品橱窗展示,效果参考图15-31。

图15-30 盒模型浏览效果 图15-31 购物网站商品橱窗展示浏览效果

body{

font-size:12px;

} .e{ float:left; margin:2px; }

.img{ /*内层虚线框*/

border: thin dotted #999; }

.b{ /*图标识*/ margin:5px;

clear:left; }

(3)请参考本章案例完成如下页面的设计。

font-size:12px;

background-color:#CCC;

text-align: center; }

#header{

margin:5px auto; background:#FFC;

width:80%; /*自适应页面大小*/ height:60px; }

#main{ padding-top:10px;

line-height:150%;

margin:5px auto;

background: #D0FFFF;

width:80%; /*自适应页面大小*/ height:300px; text-align:left; }

#footer{

margin:5px auto; background:#FFC;

width:80%; /*自适应页面大小*/ height:30px; }

.h{ font-size:32px;

padding-top:10px; margin:5px; }

.img1{ /*第一种环绕方式*/ float:right; margin:10px; padding:5px;/**/ } .img2{ /*第二种环绕方式*/ float:left; margin:10px; padding:5px/**/ }

span{ /*实现首字下沉*/ float:left;

font-size:36px; font-family:黑体; padding:10px 0px; }