干蹦轮播图的布局摘要

首先先确定图片的数量,用一个大盒子包裹所有的元素.

我们使用 ul li 来包裹图片

    
		
     
			
      
			
      
			
      
			
      
			
      
			
      
		
     
复制代码
    

我们给大盒子设置宽,高等基本属性

.carousel{			position: relative;			width: 800px;			height: 450px;			border: 10px solid #ccc;			margin: 50px auto;		}复制代码

让所有的图都重叠在一起,然后都隐藏起来

.carousel .pic li{			position: absolute;			top: 0;			left: 0;			width: 800px;			height: 450px;			display: none;		}复制代码

然后我们让li中的第一张图显示出来(单独的为它添加类名)

.carousel .pic li.current{			display: block;		}复制代码

当 li包裹着图片的时候,之间会有一个间距,我们要将图片进行砖块

.carousel .pic li img{			display: block;复制代码

给按钮设置共同的属性

.carousel .btn a{			position: absolute;			top: 50%;			width: 40px;			height: 80px;			margin-top: -40px;			background-color: rgba(255,255,255,0.2);			font: bold 40px/80px "SimSun";			color: #fff;			text-decoration: none;			text-align: center;		}复制代码

然后分别给左右按钮进行定位,添加伪类样式

.carousel .btn .leftbtn{			left: 0;		}.carousel .btn .rightbtn{			right: 0;		}.carousel .btn a:hover{			background-color: rgba(255,255,255,0.5);		}复制代码

然后紧接着后面用一个盒子包裹着左右的按钮

    
			
     <			
     >		
    
复制代码

用ol 和 li 来包裹图片下方的导航

    
			
     
			
     
			
     
			
     
			
     
			
     
		
    
	复制代码

给下方的ol设置整体样式

.carousel .sub{			position: absolute;			bottom: 30px;			left: 50%;			width: 240px;			height: 20px;			padding: 5px 0 5px 20px;			border-radius: 15px;			margin-left: -130px;			background-color: rgba(255,255,255,0.3);		}复制代码

给每个li设置大小

.carousel .sub li{			float: left;			width: 20px;			height: 20px;			margin-right: 20px;			border-radius: 50%;			background-color: #fff;		}复制代码

给每个被选中的li 设置样式

.carousel .sub li.current{			background-color: #0ff;}复制代码

一个初学者的学习笔记。