css习题（用html和css写一个静态的轮播图）

最新推荐文章于 2024-05-28 19:26:08 发布

中国的流浪猫

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量1.4k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/weixin_46611729/article/details/107415825

版权

以下是HTML页面的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>中国的流浪猫</title>
    <link rel="stylesheet" type="text/css" href="regality.css">
</head>

<body>
	<div class="box">
		<div class="box-img"><img src="001.jpg" alt=""></div>
		<div class="box-img"><img src="002.jpg" alt=""></div>
		<div class="box-img"><img src="003.jpg" alt=""></div>
		<div class="box-img"><img src="004.jpg" alt=""></div>
		<div class="box-img"><img src="005.jpg" alt=""></div>
		<div class="box-img"><img src="006.jpg" alt=""></div>
		<div class="box-left">&lt;</div>
		<div class="box-right">&gt;</div>
		<div class="box-zhiding">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
</body>

</html>

以下是css页面的代码：

.box{
	position: relative;
	width: 1000px;
	height: 600px;
}
.box .box-img{
	position: absolute;
}
.box .box-img img{
	width: 1000px;
	height: 600px;
}
.box .box-left{
	position: absolute;
	left: 0;
	top: 230px;
	width: 35px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	background: #424242;
	color: #ccc;
	border-radius: 0 5px 5px 0;
	cursor: pointer;
	font-size: 30px;
}
.box .box-left:hover{
	color: #fff;
	background: #ff000050;
}
.box .box-right{
	position: absolute;
	right: 0;
	top: 230px;
	width: 35px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	background: #424242;
	color: #ccc;
	border-radius: 5px 0 0 5px;
	cursor: pointer;
	font-size: 30px;
}
.box .box-right:hover{
	color: #fff;
	background: #ff000050;
}

.box .box-zhiding{
	position: absolute;
	bottom: 50px;
	right: 40px;
}
.box .box-zhiding ul{
	list-style: none;
}
.box .box-zhiding li{
	width: 14px;
	height: 14px;
	border-radius: 100%;
	background-color: #ccc;
	float: right;
	margin-right: 10px;
	cursor: pointer;
	font-size: 12px;
}
.box li:hover{
	background-color: #fff;
}

中国的流浪猫

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
css习题（用html和css写一个静态的轮播图）

以下是HTML页面的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>中国的流浪猫</title> <link rel="stylesheet" type="text/css" href="regality.css"></head><body> <div class
复制链接

扫一扫