javascript基基础础知知识识之之html5轮轮播播图图实实例例讲讲解解 ((44))
本文实例为大家分享了html5轮播图的具体代码,供大家参考,具体 容如下
1.轮播图的布局:
/*去除默认样式*/
*{
margin: 0;
padding: 0;
}
/*设置div*/
#outer{
width: 520p ;
height: 333p ;
/*设置居中*/
margin: 50p auto;
/*
* 设置背景颜色
*/
background-color: greenyellow;
/*设置上下 边距*/
padding: 10p 0;
/*为父元素开启相对定位*/
position: relative;
/*隐藏溢出的 容*/
overflow : hidden;
}
/*设置ul*/
#imgList{
/*去除项目符号*/
list-style: none;
/*设置ul的宽度*/
width: 2600p ;
/*开启绝对定位*/
position: absolute;
/*
* 通过修改ul的left值,可以切换图片
* 1 0p
* 2 -520p
* 3 -1040p
* 4 -1560p
*
*/
left: 0p ;
}
/*设置li*/
li{
/*设置元素浮动*/
float: left;
/*设置外边距*/
margin: 0 10p ;
}
/*设置导航按钮*/
#nav{
/*开启绝对定位*/
position: absolute;
/*定位*/
bottom: 20p ;
/*
* #outer 宽度 520p
*
* #nav 宽度 125p
*
* 520 - 125 = 395/2 = 197.5
*/
left: 197p ;
}
#nav a{
/*设置a浮动*/
float: left;