第八章

最新推荐文章于 2023-07-02 15:03:04 发布

weixin_43024784

最新推荐文章于 2023-07-02 15:03:04 发布

阅读量381

点赞数 1

分类专栏：作业文章标签： 1

本文链接：https://blog.csdn.net/weixin_43024784/article/details/84239329

版权

作业专栏收录该内容

47 篇文章 0 订阅

订阅专栏

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.制作美食今日推荐页面

美食今日推荐 4.制作京东轮播图页面

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;
}
}