1.position属性有哪些属性值？他们在定位元素时，分别有哪些特点？
(1)absolute绝对定位:相对位置为父元素为非static的第一个父元素进行定位。
(2)fixed 固定定位:相对于浏览器窗口进行定位。
(3)relative相对定位:相对于其正常（默认布局）位置进行定位。
(4)static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）
2.z-index属性在网定位中有什么作用？
当网页上出现多个由绝对定位（POSITION:absolute）或固定定位（POSITION:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决，这个值较大的就在上面，较小的在下面。
3.制作美食今日推荐页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style: none;
}
.a{
line-height: 40px;
}
.b{
float: right;
margin-top: -350px;
margin-right: 65px;
line-height: 26px;
font-size: 12px;
}
body{
width: 350px;
height: 400px;
border: 1px lightblue solid;
border-radius:15px ;
}
.f{
float: right;
margin-top: 15px;
margin-right: 15px;
}
a{
font-size: 14px;
color: red;
line-height: 30px;
}
.z{
position: relative;
top:100px;
left: 100px;
}
div{
margin-top: -40px;
}
h2{
margin-left: 50px;
}
span{
color: red;
}
</style>
</head>
<body>
<div>
<img class="z" src="img/shen.png" />
<h2><span>SHOP</span>今日推荐<img class="f" src="img/more.gif\"/> </h2>
<ul class="a">
<li><img src="img/img9.gif" /></li>
<li><img src="img/img7.gif" /></li>
<li><img src="img/img8.gif" /></li>
<li><img src="img/img7.gif" /></li>
</ul>
<ul class="b">
<b><li><a href="#">汉来国际美食百货</a></li>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li> </b>
</b><li><a href="#">汉来国际美食百货</a></li>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li></b>
<b><li><a href="#">汉来国际美食百货</a></li>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li> </b>
<b><li><a href="#">汉来国际美食百货</a></li>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li> </b>
</ul>
</div>
</body>
</html>
4.制作京东轮播图页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style: none;
position: relative;
bottom: 50px;
left: 270px;
}
li{
border-radius:50% ;
width: 20px;
height: 20px;
display: inline-block;
background: black;
color: white;
text-align: center;
}
li:hover{
background: orange;
}
</style>
</head>
<body>
<img src="focus.jpg" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</html>
5.制作新东方顶部导航菜单页面
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a {
background: whitesmoke;
width: 500px;
height: 25px;
margin-top: -10px;
margin-left: -10px;
}
span {
margin-left: 90px;
font-size: 13px;
}
div {
background: white;
width: 200px;
height: 170px;
border: 1px gray solid;
font-size: 14px;
color: gray;
position: relative;
left: 285px;
bottom: 20px;
}
hr {
width: 190px;
}
.m {
vertical-align: middle;
}
.n {
margin-bottom: 10px;
}
</style>
</head>
<body>
<p class="a"><img class="m" src="logo.gif" /> <span>购物车| 优惠券| 快速注卡| 各地购课| 手机报| 网站导航</span>
<img class="n" src="open_icon.gif" /></p>
<div <p>托福 雅思 考研 职称英语 初中 日语</p>
<hr/>
<p>网络课堂 资讯中心 知识堂 大师讲坛 学习论坛 学词 考研搜校</p>
<hr/>
<p>M-Zone 手机报 时时英语</p>
</div>
</body>
</html>
