master

分支 (1)

管理

管理

master

5-12
/
1.html

<!doctype html>

<head>
	<meta charset="UTF-8">
	<title>京东轮播图</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
			text-align: center;
		}

		#banner {
			width: 730px;
			height: 454px;
			margin: 50px auto;
			position: relative;
			/*相对定位,相对于.btn按钮*/
			text-align: left;
		}

		.pic image {
			display: block;
			/*默认有图片不显示*/
			position: absolute;
			/*绝对定位.对应的是.pic这个div*/
			top: 0px;
			left: 0px;
		}

		.pic a {
			display: none;
		}

		.pic {
			/*专门显现图片区*/
			position: relative;

		}

		.btn {
			width: 150px;
			height: 18px;
			position: absolute;
			/*绝对定位相对于banner div*/
			bottom: 5px;
			right: 290px;
		}

		.btn ul li {
			background-color: #000000;
			/*黑色*/
			color: #ffffff;
			list-style-type: none;
			width: 18px;
			height: 18px;
			float: left;
			border-radius: 9px;
			/*变成圆的*/
			text-align: center;
			line-height: 18px;
			cursor: pointer;
			/*鼠标移动变手指状态*/
			margin-left: 5px;
		}

		.btn ul li:hover{
			background-color: #ff9966;
		}
	</style>
</head>

<body>
	<div id="banner">
		<div class="pic">
			<a href="#" style="display:block"><img src="img/focus.jpg" /></a>
		</div>
		<div class="btn">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>

			</ul>
			<div>

			</div>
</body>

</html>