一样，作为容器可以容纳各种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中，个列可以任意顺序排列，最终效果都正确显示。
三、案例分析题
1、解释以下CSS样式的含义。
table{
border:
1px#333solid;
font:
12pxarial;
width:
500px
}
td,th{
padding:
5px;
border:
1pxsolid#EEE;
border-bottom-color:
#666;
border-right-color:
#666;
}
将表格边框宽度设为1px，颜色设为#333，边框为实线；表格中的字体大小设为12px,字体类型为arial；表格宽度为500px。
设置单元格和表头部分的样式：
内边距为5px，边框宽度2px，实线，颜色为#EEE，底部和右侧边框颜色特别设为#666
2、解释以下CSS样式的含义。
form{
border:
1pxdotted#AAAAAA;
padding:
3px6px3px6px;
margin:
0px;
font:
14pxArial;
}
select{
width:
80px;
background-color:
#ADD8E6;
}
设置表单边框宽度为1px，点划线，颜色为#AAAAAA，内上、右、下、左边距分别为：
3px6px3px6px，外边距为0px，字体为14px大小的Arial字体。
设置选择框宽度为80px，背景颜色为#ADD8E6
3、解释以下CSS样式的含义。
input{
color:
#00008B;
}
input.btn{
background-color:
#ADD8E6;
padding:
1px2px1px2px;
}
设置input标签中字体颜色为#00008B；
input标签中id属性为btn的按钮背景颜色设为#ADD8E6，内上、右、下、左边距分别设为1px、2px、1px、2px
4、解释以下CSS样式的含义。
.rounded{
background:
url（images-notebook/left-top.gif）topleftno-repeat;
}
.roundedh2{
background:
url（images-notebook/right-top.gif）toprightno-repeat;
padding:
20px20px10px;
margin:
0;
}
定义类选择器.rounded：
背景图像为left-top.gif，从左上角开始，不平铺
定义后代选择器.roundedh2：
背景图像为right-top.gif，从右上角开始，不平铺；内上、左右、下边距分别是20px20px10px，外边距为0
5、画出一个1-（（1-2）+1）-1的布局结构示意图。
6、画出一个1-（（1+（3-1-2））-1的布局结构示意图。
7、解释以下CSS样式的含义。
#header,#pagefooter,#container{
margin:
0auto;
width:
85%;
}
#content{
position:
absolute;
width:
300px;
}
设置id属性为header、pagefooter、container的div层上下外边框为0，左右外边框为auto，宽度为相对于父元素宽度的85%
设置id属性为content的div层为绝对定位，宽度为固定宽度300px
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）设置页面背景图像为login_back.gif，并且背景图像垂直平铺。
（2）使用类选择器，设置按钮的样式，按钮背景图像：
login_submit.gif；字体颜色：
#FFFFFFF；字体大小：
14px；字体粗细：
bold；按钮的边界、边框和填充均为0px。
body{
background-image:
url（img/login_back.gif）;
background-repeat:
repeat-y;}
.picButton{
background-image:
url（img/login_submit.gif）;
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; }
展开阅读全文
相关搜索
|