第六章作业

一简答题
1.什么是盒子模型？盒子模型的属性有那几个？它们的作用分别是什么？
答：（1）CSS将网页中所有元素都看成一个个盒子。
（2）盒子模型属性有边框、内边距和外边距。
（3）边框设置网页元素边框的颜色、粗细和样式；外边距指与其他盒子之间的距离，也就是指网页中元素与元素之间的距离，便于精确控制盒子的位置；内边距用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置。
2.盒子模型有哪几种解析方式？它们有什么区别？
答：（1）content-box：默认值，盒子的宽度或高度 = border+padding+（margin）+ width/height。
（2）border-box：盒子的宽度或高度等于元素内容的宽度或高度。从盒子模型的介绍可知，这里内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度=盒子宽度或高度-border-padding）。
3.制作图北大青鸟网站的中心开班信息模块。要求如下：
<页面宽度250px，整体居中显示，背景使用线性渐变及1px的灰色圆角边框。
<标题左侧的小图标以背景图片的方式实现，标题颜色为白色。
<使用无序实现开班信息列表，列表前的小三角箭头和下方的虚线均使用背景图像的方式实现。
<列表超链接文本颜色为灰色，无下划线，当鼠标悬浮在超链接文本上是，字体颜色改变无下划线。
<页面中涉及的盒子模型解析方式都使用border-box。

/初始化内外边距/
body,div,ul,li{
padding: 0px;
margin: 0px;
}
/设置页面整体/
.div{
width: 250px;
margin: 0 auto;
border: 1px solid #d8d8d8;
border-radius: 8px;
box-sizing:border-box;
background: linear-gradient(to bottom,#5bc1f9 ,#FFF,#FFF,#FFF,#FFF);/渐变/
}
/设置标题/
.h2{
background: url("…/Semester1book3DJ6/bg.gif") 5px no-repeat;
color: white;
font-size: 14px;
padding-left: 45px;
margin: 10px 0px;
font-weight:bold;
height: 40px;
line-height:40px;
border-bottom: 1px solid #FFFFFF;
}
/设置列表/
li{
list-style:none;/去前面的原点/
background: url("…/Semester1book3DJ6/dotBg.gif") -9px center no-repeat;
width:220px;
height:30px;
padding-left: 10px;
margin: 10px 0px;
}
/原来/
a{
color: #626262;
text-decoration: none;
}
/悬浮时/
a:hover{
color: #F30;
text-decoration: none;
}

中心开班信息

• 8月12日：学历+技能班
• 8月16日：高考特招班
• 8月23日：Java精英班
• 8月31日：学士后强化班
• 9月5日：大学生就业班
• 9月9日：企业定向委培班
• 9月16日：网络营销强化班

4.制作图商品分类列表页面。
<商品列表放在一个div中，<div的四边框均为2px的橙色实线圆角边框。
<用结构伪类选择器选择每个列表并为其加上背景图每个列表下方1px的灰色虚线边框，但是最后一个列表项没有。
<文本超链接为黑色粗体，当鼠标悬浮在超链接文本上变色，平切无下划线。

/初始化内外边距/
body,div,ul,li{
margin: 0px;
padding: 0px;
}
li{
list-style:none;
}
/设置整体/
#div{
width: 200px;
border: #fc9829 2px solid;
border-radius:8px;
box-sizing: border-box;
}
/设置宽度去除前面装饰/
#div ul{
width: 190px;
margin: 0px auto;
}
/设置列表/
#div li{
height:47px;
font-size:12px;
font-weight:bold;
padding-left:50px;
border-bottom:1px #929292 dotted;
line-height:47px;
box-sizing: border-box;
}
/未悬浮时/
#div a{
color: black;
font-weight: bold;
text-decoration:none;
}
/悬浮时/
#div a:hover{
color: #008bbf;
text-decoration:none;
}
/设置列表背景/
#div li:nth-of-type(1){
background: url("…/Semester1book3DJ6/icon_01.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(2){
background: url("…/Semester1book3DJ6/icon_02.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(3){
background: url("…/Semester1book3DJ6/icon_03.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(4){
background: url("…/Semester1book3DJ6/icon_04.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(5){
background: url("…/Semester1book3DJ6/icon_05.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(6){
background: url("…/Semester1book3DJ6/icon_06.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(7){
background: url("…/Semester1book3DJ6/icon_07.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(8){
background: url("…/Semester1book3DJ6/icon_08.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(9){
background: url("…/Semester1book3DJ6/icon_09.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(10){
background: url("…/Semester1book3DJ6/icon_10.jpg") 0px 0px no-repeat;
}

• 酒水、饮料
• 进口食品
• 休闲零食
• 地方特产
• 保健、冲调
• 粮油、生鲜
• 美容洗护
• 清洁洗涤
• 母婴、纸品
• 家居百货

5.制作权威课程免费体验登录页面。
<页面文本颜色为白色，*的字体颜色为红色。
<使用无序列表排版单元素。
<无序列表内容在页面中居中显示。
<“免费体验”按钮使用背景图像的方式实现。
<按语义化使用表单元素，且是圆角边框。

body,div,ul,li{
margin: 0px;
padding: 0px;
}
li {
list-style-type:none;
}
.picture{
width: 312px;
height: 353px;
background: url("…/Semester1book3DJ6/bg.jpg") 0px 0px no-repeat;
}
.su{
width: 260px;
margin: 0px auto;
padding-top: 80px;
font-size: 14px;
color: white;
box-sizing: border-box;
}
li{
height: 38px;
line-height: 38px;
}
li span{
color: red;
padding-right: 5px;
}
select{
border: 1px #7b7b7b solid;
border-radius: 4px;
}
.button{
background: url("…/Semester1book3DJ6/btn.jpg") 0px 0px no-repeat;
width:152px;
height:49px;
border:0px;
cursor:pointer;
}
.male{
text-align:center;
}

• *姓名：
• *邮箱：
• *电话：
• 性别： 请选择 男 女
• 年龄： 请选择 1 2