淘宝网选项卡（自用）

最新推荐文章于 2021-01-26 17:55:03 发布

我的哥哥呦

最新推荐文章于 2021-01-26 17:55:03 发布

阅读量531

点赞数

分类专栏： HTML 文章标签：选项卡

本文链接：https://blog.csdn.net/qq_20497071/article/details/94355941

版权

HTML 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.taobao{
				width: 513px;
				height: 252px;
				background-color: pink;
				margin: 100px auto;
				position: relative;
				
			}
			.taobao a{
				width: 24px;
				height: 36px;
				display: block;
				position: absolute;
				top: 50%;
				margin-top:-18px;
			}
			.left{
				left: 0;
				background-color: green;
			}
			.right{
				right: 0;
				background-color: green;
			}
			li{
				list-style: none;
			}
			.taobao ul{
				background: rgba(255,255,255,0.3);
				width: 70px;
				height: 23px;
				position: absolute;
				bottom: 18px;
				left: 50%;/* 水平父容器的一半 */
				margin-left: -35px;
				border-radius: 12%;
			}
			.taobao ul li{
				width: 8px;
				height: 8px;
				background-color: #fff;
				float: left;
				margin: 3px;
				border-radius: 50%;
			}
			.taobao .current{
				background-color: #f40;
			}
		</style>
	</head>
	<body>
		<div class="taobao">
			<img src="c.png" />
			<a href="#" class="left"></a>
			<a href="#" class="right"></a>
			<ul>
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>