<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.slider{
width: 520px;
height: 280px;
margin: 100px auto;
background-color: pink;
position: relative; /* 相对定位:占位置不脱标 */
}
.arrow-l,.arrow-r {
position: absolute; /* 绝对定位:不占位置,完全脱标 */
width: 24px;
height: 18px;
display: block; /* 转换 */
top:50%; /* 取父级标签高度的一半 */
margin-top: -9px; /* 上浮自身高度的一半 */
}
.arrow-l {
left: 0; /* 左边飘 */
}
.arrow-r{
right: 0; /* 右边飘 */
}
.circle{
width: 65px;
height: 13px;
background-color: rgba(255,255,255,0.2);
position: absolute; /* 绝对路径 */
bottom: 10px;
left: 50%;
border-radius: 6px; /* 圆角效果 */
}
.circle li {
width: 9px;
height: 9px;
border-radius: 50%; /* 小圆圈效果 */
margin: 2px;
float: left; /* li是块标签,所以使用浮动排列到一行 */
background-color: #1C036C;
}
.circle .current{ /* 注意权重问题:涉及到优先级的问题 */
background-color: #FF8400;
}
</style>
</head>
<body>
<div class="slider">
<img src="../images/taobao.jpg" >
<a href="#" class="arrow-l"><img src="../images/left.png" ></a>
<a href="#" class="arrow-r"><img src="../images/right.png" ></a>
<ul class="circle">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
