html 元素，但它是一个行内元

素，在它的前后不会换行。

15、讲解盒子模型的 float 属性。

float 属性默认为 none，也就是标准流平时的情况。若是将 float 属性的值设置为

left 或 right，元素会向其父元素的左侧或右侧凑近，同时默认情况下，盒子的宽度不再伸展，而是缩短，依照盒子里面的内容的宽度来确定。

16、讲解盒子模型的

display 属性。

display 属性用于确定盒子的种类。 display 属性设为 inline ，即为“行内”；设为block，即为“块级”；设为 none，即为“无”，也就是隐蔽盒子。

17、圆角框主要有哪几种制作方法？

两背景图像法、四图像不固定宽度圆角框、五图像二维滑动门圆角框。

18、使用 CSS 主要有哪几种布局方式？

两列布局、三列布局、多列布局。

19、CSS 布局方法与表格布局方法对照，有哪些优势？

（ 1）页面载入更快；（2）降低网站流量花销；（3）易于更正；

（ 4）视觉一致（ 5）更易于被找寻引擎找到。

20、使用 CSS 布局的网页应实现哪些要求？

（ 1）宽度使用多列布局，并保证页头和页脚正确显示；

（ 2）可以指定列宽度固定，其余列宽度自适应；

（ 3）在 html 中，个列可以任意序次排列，最后收效都正确显示。

三、案例解析题

5

5 / 9

完好版《CSS款式》习题

1、讲解以下 CSS 款式的含义。

table{

border: 1px #333 solid;

font: 12px arial;

width: 500px

}

td,th{

padding: 5px;

border: 2px solid #EEE;

border-bottom-color: #666;

border-right-color:

#666;

}

将表格边框宽度设为

1px，颜色设为 #333，边框为实线；表格中的字体大小设为

12px,字体种类为 arial；表格宽度为 500px。

设置单元格和表头部分的款式： 内边距为 5px，边框宽度 2px，实线，颜色为 #EEE，

底部和右侧边框颜色特别设为

#666

2、讲解以下 CSS 款式的含义。

form{

border:1px dotted #AAAAAA;

padding:3px 6px 3px 6px;

margin:0px;

font:14px Arial;

}

select{

width:80px;

background-color:#ADD8E6;

}

设置表单边框宽度为 1px，点划线，颜色为 #AAAAAA ，内上、右、下、左侧距分别为： 3px 6px 3px 6px，外边距为 0px，字体为 14px 大小的 Arial 字体。

设置选择框宽度为 80px，背景颜色为 #ADD8E6

3、讲解以下 CSS 款式的含义。

input{

6

6 / 9

完好版《CSS款式》习题

color:#00008B;

}

{

background-color:#ADD8E6;

padding:1px 2px 1px 2px;

}

设置 input 标签中字体颜色为 #00008B；

input 标签中 id 属性为 btn 的按钮背景颜色设为 #ADD8E6 ，内上、右、下、左侧距分别设为 1px、2px、 1px、2px

4、讲解以下 CSS 款式的含义。

.rounded {

background: url(images-notebook/)

top left no-repeat;

}

.rounded h2 {

background: url(images-notebook/)

top right no-repeat;

padding:20px 20px 10px;

margin:0;

}

定义类选择器 .rounded：背景图像为 ，从左上角开始，不平铺

定义后代选择器 .rounded h2：背景图像为 ，从右上角开始，不平铺；内上、左右、下边距分别是 20px 20px 10px，外边距为 0

5、画出一个 1-（（1-2）+1） -1 的布局结构表示图。

6、画出一个 1-（（1+（ 3-1-2））-1 的布局结构表示图。

7

7 / 9

完好版《CSS款式》习题

7、讲解以下 CSS 款式的含义。

#header,#pagefooter,#container{

margin:0 auto;

width:85%;

}

#content{

position:absolute;

width: 300px;

}

设置 id 属性为 header、pagefooter、container 的 div 层上下外边框为

0，左右

外边框为 auto，宽度为相对于父元素宽度的

85%

300px

设置 id 属性为 content 的 div 层为绝对定位，宽度为固定宽度

8、讲解以下 CSS 款式的含义。

A:link { COLOR: #3333cc; TEXT-DECORATION: none

}

}

}

A:visited { COLOR: #990099; TEXT-DECORATION: none

A:active {

COLOR: #ff0000; TEXT-DECORATION: underline

A:hover { COLOR: #3333cc; TEXT-DECORATION: underline } 设置超链接款式：

未操作时：颜色为 #3333cc，无下划线；

单击过后：颜色为 #990099，无下划线；

单击时：颜色为 # ff0000，有下划线；

悬停时：颜色为 # 3333cc，有下划线；

9、写出以下要求的

CSS 款式表

（ 1）设置页面背景图像为 ，并且背景图像垂直平铺。

（ 2）使用类选择器，设置按钮的款式，按钮背景图像：

login_ ；字体

颜色： #FFFFFFF；字体大小： 14px；字体粗细： bold；按钮的界线、边框和填充均为 0px。

body{

background-image:url(img/login_);

background-repeat:repeat-y;

}

8

8 / 9

完好版《CSS款式》习题

.picButton{

background-image:url(img/login_);

color:#FFFFFF;

font-size: 14px;

font-weight:bold;

margin: 0px;

border:0px;

padding: 0px;

}

10、写出以下要求的

CSS 款式表

（ 1）使用 标签款式，设置字体颜色： #2A1FFF；字体大小： 14px。内容与边框之间的距离： 5px。

（ 2）使用超链接伪类： 不带下划线；颜色：#333333；鼠标悬停在超链接上方时，显示下划线；颜色： #FF5500。

td {

color: #2A1FFF;

font-size: 14px;

padding:5px;

}

A{

color:#333333;

text-decoration:none;

}

A:hover

{

color:#FF5500;

text-decoration:underline;

}

9

9 / 9