396day(fixed, 淘宝轮播)

最新推荐文章于 2025-06-08 14:57:15 发布

原创最新推荐文章于 2025-06-08 14:57:15 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用HTML和CSS实现淘宝轮播图的样式设计，包括轮播图的基本结构、图片切换按钮的位置设置、指示器样式及位置布局等。通过具体的代码示例，展示了如何创建一个具有美观外观和良好用户体验的轮播图组件。

《2018年11月4日》【连续396天】

标题：fixed, 淘宝轮播;

内容：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		.tb {
			width: 520px;
			height: 280px;
			background-color: pink;
			margin: 100px auto;
			position: relative;
		}
		.tb a {
			width: 24px;
			height: 36px;
			display: block;
			position: absolute;
			top: 50%;
			margin-top: -18px;
		}
		.left {
			left: 0;
			background: url(images/left.png) no-repeat;
		}
		.right {
			right: 0;
			background: url(images/right.png) no-repeat;
		}
		.tb ul {
			width: 70px;
			height: 13px;
			background-color: rgba(255,255,255,0.3);
			position: absolute;
			bottom: 20px;
			left: 50%;
			margin-left: -35px;
			border-radius: 8px;
		}
		.tb ul li {
			width: 8px;
			height: 8px;
			background-color: #fff;
			float: left;
			margin: 3px;
			border-radius: 50%;
		}

		.tb .current {
			background-color: #f40;
		}

	</style>
</head>
<body>
	<div class="tb">
		<img src="images/tb.jpg">
		<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>