轮播图 UI 绝对定位浮动

最新推荐文章于 2022-10-14 14:43:40 发布

优价实习

最新推荐文章于 2022-10-14 14:43:40 发布

阅读量161

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44828588/article/details/114388646

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 310px;
			height: 190px;
			border: 1px solid #ccc;
			margin:100px auto;
            position:relative		
		}
		.b-l{
			border-top-right-radius:15px;
			border-bottom-right-radius:15px ;
		}
		.b-r{
			
			right: 0;
			
			border-radius: 15px 0 0 15px;
		}
		a{
			width: 25px;
			height: 30px;
			position: absolute;
			top:95px;
			margin-top: -15px;
			background-color: mediumvioletred;
			text-align: center;
			line-height: 30px;
			text-decoration: none;
			background: rgba(0,0,0,.2);
			
		}
		.b-r:hover,
		.b-l:hover{
			background-color:chartreuse ;
		}
		.qq{
			position: absolute;
			width:70px;
			height: 13px;
			bottom: 10px;
			left: 50%;
			margin-left: -35px;
			background: rgba(25,255,255,0.1);
			border-radius:16px ;
			
		}
		.qq li{
			list-style: none;
			width: 8px;
			height: 8px;
			background-color: #fff;
			border-radius: 50%;
			float: left;
			margin: 2px 4px;
			
		}
		.qq .current{
			background-color: orange;
		}
		
	</style>
	<body>
		<div class="box">
			<a href="#" class="b-l"><</a>
			<a href="#" class="b-r"><</a>
			<ul class="qq">
				<li></li>
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			
		</div>
	</body>
</html>

在这里插入图片描述

优价实习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
轮播图 UI 绝对定位浮动

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 310px; height: 190px; border: 1px soli
复制链接

扫一扫