第八章
1.position属性有哪些值？它们在定位元素时，分别有哪些特点？
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.制作美食今日推荐页面
HTML代码:
<head>
<meta charset="utf-8" />
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="css/new_file.css" />
</head>
<body>
<div id="nav">
<div id="photo">
<img src="img/264c1dc1cac92265.jpg" />
<img src="img/5acb3b19Nc3efd8d0.jpg" />
<img src="img/8402ca6a09fe3122.jpg" />
<img src="img/91db3f8f2e388912.jpg" />
<img src="img/c335ac0ddc54a481.jpg" />
</div>
<div id="num">
<ul>
<a href="#">
<li>1</li>
</a>
<a href="#">
<li>2</li>
</a>
<a href="#">
<li>3</li>
</a>
<a href="#">
<li>4</li>
</a>
<a href="#">
<li>5</li>
</a>
</ul>
</div>
<div id="div2">
<a href="#"><label class="label1"><</label></a>
<a href="#"><label class="label2">></label></a>
</div>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
CSS样式:
- {
margin: 0px auto;
padding: 0px;
}
#nav {
width: 590px;
height: 470px;
overflow: hidden;
}
#photo {
width: 2950px;
animation: switch 25s ease-out infinite;
}
#num {
position: relative;
font-size: 14px;
font-family: “微软雅黑”;
font-weight: 900;
bottom: 35px;
right: -5px;
text-align: center;
}
#num ul{
color: white;
list-style-type: none;
}
#num li{
padding-top: 3px;
padding-bottom: 3px;
padding-left: 8px;
padding-right: 8px;
border-radius:50% ;
margin-right:8px ;
display: inline-block;
background: dimgray;
}
#num a{
text-decoration: none;
color: white;
}
#num ul a:hover li{
background: orangered;
}
#photo img {
float: left;
width: 590px;
height: 470px;
}
@keyframes switch {
0%,
15% {
margin-left: 0px;
}
20%,
35% {
margin-left: -590px;
}
40%,
55% {
margin-left: -1180px;
}
60%,
75% {
margin-left: -1770px;
}
80%,
95% {
margin-left: -2360px;
}
100% {
margin-left: 0;
}
}
#div2 {
font-size: 18px;
font-family: “微软雅黑”;
position: relative;
bottom: 255px;
left: 0px;
}
.label1 {
padding: 6px;
margin-right: 533px;
color: white;
background: black;
opacity: 0.4;
}
.label2 {
padding: 6px;`
color: white;
background: black;
opacity: 0.4;
}
#div2 a {
color: white;
text-decoration: none;
}
#div2 a:hover label {
background: black;
opacity: 0.8;
}
5.制作新东方顶部导航菜单页面
代码如下: