imgs
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东轮播图练习</title>
<style>
/* 取消列表自带样式 */
.img-list ul {
margin: 0;
padding: 0;
}
.img-list li {
list-style: none;
/*
原本li是垂直排列的对不对,现在让它们都脱离文档流,然后它们就可以全部重叠在一起了
当我们想让某张图片显示在最上面的时候,我们只需要更改它的层级就行了
*/
position: absolute;
}
.img-list {
width: 590px;
height: 470px;
margin: 100px auto;
/*
这一步的目的是让img-list成为pointer的包含块,用relative,同时也不会打乱本身元素对于整体的布局(不会脱离文档流那些)
*/
position: relative;
}
/*
更改子元素层级,从而显示不同的图片出来
用到:nth-child()这个选择器
*/
.img-list li:nth-child(1) {
z-index: 1;
}
/* pointer容器提高层级,这样才能显示在图片上面 */
.pointer {
position: absolute;
bottom: 20px;
z-index: 999;
margin-left: 20px;
}
/* 设置点击小点 */
.pointer a {
float: left;
display: block;
width: 10px;
height: 10px;
background-color: rgba(220,220,220,0.7);
/*
这个是让边框的背景颜色和元素的背景颜色不一样
如果不设置这个,那么我们的边框设置成透明了,但是它却会让边框显示成bgcolor
*/
background-clip: content-box;
margin-left: 10px;
/* 设置圆角效果,50%就是一个圆 */
border-radius: 50%;
/*
设置一个边框
不然有active的点和没有active的点不在一个水平上
*/
border: 3px solid transparent;
}
.pointer a:hover,
.pointer .active{
background-color: white;
border: 3px solid rgba(220,220,220,0.7);
}
</style>
</head>
<body>
<ul class="img-list">
<li><a href="javascript:;"><img src="./imgs/jd1.jpg"></a></li>
<li><a href="javascript:;"><img src="./imgs/jd2.jpg"></a></li>
<li><a href="javascript:;"><img src="./imgs/jd3.jpg"></a></li>
<li><a href="javascript:;"><img src="./imgs/jd4.jpg"></a></li>
<div class="pointer">
<a class="active" href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</ul>
</body>
</html>