老王前端HTML课后练习第10课—大图轮播示例

先来看看效果

一样的先来看div简单的代码部分：

	<div id="box">
		<!--顶上标题-->
		<div class="top"></div>
		<!--大图部分-->
		<div class="banner">
			<a href="#"><img src="images/3.jpg" /></a>
			<a href="#"><img src="images/4.jpg" /></a>
			<a href="#"><img src="images/5.jpg" /></a>
			<a href="#"><img src="images/6.jpg" /></a>		
		</div>	
		<!--左右两个选择图标-->
		<div class="left"></div>
		<div class="right"></div>
		<!--文字描述部分-->
		<div class="des">
			<p class="title">5分钟就能轻松搞定的派对妆 秒杀大红唇和烟熏妆</p>
			<p class="content">红唇与烟熏妆曾是派对的"标配",这个过时的规则早就该打破了.
			今年秋冬的彩妆流行是简洁时髦的美感:一抹亮片眼影,一个出其不意的眼线,一只镇住全场的唇膏
			.既然能5分钟就搞定的派对妆,为什么还要等上1个小时呢?</p>
		</div>
		<!--最底下的小圆圈-->
		<ul>
			<li style="background-color:#c03"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>

下面是CSS部分

			#box{
				position:relative;
				width:1100px;
				height:600px;
				border-top:2px solid #aaa;
				margin:60px auto;
			}
			/*顶上标题*/
			#box .top{
				position:absolute;
				top:-45px;
				left:360px;
				width:380px;
				height:90px;;
				background:url("images/1.jpg")no-repeat;
				background-position:-6px -520px;
	
			}
			/*大图部分*/
			#box .banner{
				width:1000px;
				height:500px;
				margin:50px auto;
				overflow:hidden;


			}
			/*左右两个选择图标*/
			
			#box .left{
				position:absolute;
				top:360px;
				left:50px;
				width:50px;
				height:70px;
				background:url("images/2.png")no-repeat;
				background-position:-4px -80px;
			}
			#box .left:hover{
				background-color:rgba(2,2,2,0.5);/*背景图片已经有了,
				只能选中后单独改变背景的颜色且加透明*/
			}

			#box .right{
				position:absolute;
				top:360px;
				right:50px;
				width:50px;
				height:70px;
				background:url("images/2.png")no-repeat;
				background-position:-4px -150px;
			}
			#box .right:hover{
				background-color:rgba(2,2,2,0.5);
			
			}
			/*文字描述部分*/
			#box .des{
				position:absolute;
				bottom:-20px;
				left:105px;
				width:890px;
				height:145px;
				background:rgba(0,0,0,0.5);
			}
			/*文字描述部分-左边*/
			#box .des .title{
				float:left;
				width:280px;
				height:66px;
				font-size:24px;
				padding:40px 40px 30px 30px;
			}
			/*文字描述部分-右边*/
			#box .des .content{
				float:right;
				width:460px;
				height:20px;
				font-size:14px;
				border-left:1px solid #aaa;
				padding:20px 30px 50px 30px;
				margin-top:20px;
			}
			/*最底下的小圆圈*/
			#box ul{
				position:absolute;
				bottom:-60px;
				left:490px;/*1100/2-120/2=490px*/
				width:120px;
				height:30px;
				
			}
			#box li{
				float:left;
				width:10px;
				height:10px;
				margin:6px;
				background-color:#aaa;
				border-radius:50%;
			}

每一个模块都写了注释，分模块进行，总体比较简单，设置了圆角border-radius， 设置了图片定位，以及浮动float