淘宝焦点图（应用定位）

 HTML部分：

<!-- 先定义一个大盒子 -->
		<div class="tb-promo">
			<img src="images/焦点图1.jpg">
			<!-- 左箭头 -->
			<a href="#" class="prev">&lt;</a>
			<!-- 右箭头 -->
			<a href="#" class="next">&gt;</a>
			<!-- 底部圆点 -->
			<ul class="promo-nav">
				<li class="selected"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

CSS部分：

* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}

			/* 定义大盒子宽度，高度，居中 */
			.tb-promo {
				position: relative;
				margin: 50px auto;
				width: 520px;
				height: 280px;
			}

			/* 保证图片和盒子一样大，不撑开盒子，图片定义和盒子一样大 */
			.tb-promo img {
				width: 520px;
				height: 280px;
				border-radius: 10px;
			}

			/* 利用并集选择器合并左右箭头相同代码 */
			.prev,
			.next {
				position: absolute;
				top: 50%;
				margin-top: -15px;
				width: 20px;
				height: 30px;
				background-color: rgba(0, 0, 0, 0.3);
				text-decoration: none;
				text-align: center;
				line-height: 30px;
				color: #FFFFFF;
			}

			.tb-promo .prev {
				left: 0;
				border-top-right-radius: 15px;
				border-bottom-right-radius: 15px;
			}

			.tb-promo .next {
				right: 0;
				border-top-left-radius: 15px;
				border-bottom-left-radius: 15px;
			}
			/* 底部原点通过ul实现，定义ul定位，宽，高，背景色，圆角 */
			.promo-nav {
				position: absolute;
				left: 50%;
				bottom: 15px;
				margin-left: -35px;
				width: 70px;
				height: 13px;
				background-color: rgba(255,255,255,0.3);
				border-radius: 7px;
				
			}
			/* 定义每个原点的大小，即宽高，背景色，圆角，浮动实现一行展示，margin隔开 */
			.promo-nav li {
				float: left;
				margin: 3px;
				width: 8px;
				height: 8px;
				background-color: #FFFFFF;
				border-radius: 4px;
			}
			/* 设定选中原点颜色 */
			.promo-nav .selected {
				background-color: chocolate;
			}