第八章作业

一简答题
1.position属性有哪些属性值？他们在定位元素时，分别有那些特点?
答static：默认值，没有定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
2.z-index属性在网页定位中有什么作用？
答：用于调整元素定位时重叠的上下位置。
3.制作美食今日推荐页面。

SHOP今日推荐

• 

  汉来国际美食百货

  口味:创意中餐

  区域:朝阳/CBD

  

  汉来国际美食百货

  口味:创意中餐

  区域:朝阳/CBD

  

  汉来国际美食百货

  口味:创意中餐

  区域:朝阳/CBD

  

  汉来国际美食百货

  口味:创意中餐

  区域:朝阳/CBD

body,div,a,p,ul,li,span,img,h3,h5{
padding: 0px;
margin: 0px;
}
li{
list-style: none;
}
.whole{
width: 280px;
border: 1px #aacbee solid;
height: 400px;
margin: auto;
}
.start{
position: relative;
margin-bottom: 10px;
}
.start h3{
margin-left: 20px;
}
.start span{
color: red;
margin-right: 5px;
}
.start a{
position: absolute;
right: 10px;
top: 5px;
}
.one{
position: relative;
left: 30px;
float: left;
height: 90px;
}
.one #one{
position: relative;
}
.one #two{
position: absolute;
left: 60px;
top: -7px;
z-index: 0;
}
.two{
float: right;
margin-left: 30px;
position: relative;
right: 30px;
height: 90px;
}
.two h5{
margin-bottom: 10px;
}
.two a{
color: red;
font-size: 14px;
}
.two p{
font-size: 12px;
}
.two span{
color: #999999;
}
.three{
float: left;
height: 90px;
margin-left: 30px;
}

4.制作京东轮播图页面。

• 1
• 2
• 3
• 4
• 5

body,ul,li{
padding: 0px;
margin: 0px;
}
div{
width: 730px;
height: 454px;
position: absolute;
margin: 100px 240px;
}
li{
width: 20px;
height: 20px;
border: 1px dimgray solid;
border-radius: 10px;
text-align: center;
background-color: dimgray;
float: left;
margin-right: 10px;
list-style: none;
position: relative;
bottom: 30px;
left: 300px;
}
.one{
background-color: #FF6600;
border: 1px #FF6600 solid;
}
a{
color: #FFFFED;
text-decoration: none;
}

5.制作简略版新东方顶部导航菜单页面

• 购物车
• 优惠劵
• 快速注卡
• 各地购课
• 手机报
• 网站导航

• 托福
• 雅思
• 考研
• 称职英语
• 初中
• 日语

• 网络课堂
• 咨讯中心
• 知识堂
• 大师讲堂
• 学习论坛
• 学词
• 考研搜校

• M-Zone
• 手机报
• 时时英语

body,div,ul,li,a{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.whole{
background: url("…/Semester1book3DJ8/top_bg.gif");
width: 620px;
height: 30px;
position: absolute;
}
#one{
margin-left: 10px;
}
.whole li{
margin-left: 10px;
position: relative;
left: 170px;
bottom: 25px;
float: left;
font-size: 14px;
border-right: #999 1px solid;
padding-right: 10px;
}
.whole li:last-of-type{
border: 0px;
}
.whole a{
color: #7b7b7b;
text-decoration: none;
}
#two{
position: relative;
left: 165px;
bottom: 30px;
}
.one{
width: 220px;
height: 230px;
border: 1px #999 solid;
position: absolute;
background: #fff;
left: 370px;
top: 25px;
padding: 5px;
}
.three{
width: 220px;
height: 80px;
border-bottom: 1px #000000 solid;
}
.three a{
font-size: 12px;
color: #999;
margin: 10px;
float: left;
}
.four{
width: 220px;
height: 110px;
border-bottom: 1px #000000 solid;
}
.four a{
font-size: 12px;
color: #999;
margin: 10px;
float: left;
}
.five{
width: 220px;
height: 80px;
}
.five a{
font-size: 12px;
color: #999;
margin: 10px;
float: left;
}