html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>156-定位练习2-焦点图</title>
<link rel="stylesheet" href="CSS/index.css">
</head>
<body>
<h1>项目成果</h1>
<div>
<img src="images/tu1.png" alt="">
<!--添加左右箭头-->
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
<!--设置下面的盒子,类似于导航条-->
<ol>
<li ></li>
<li ></li>
<li ></li>
<li ></li>
<li ></li>
</ol>
</div>
</body>
</html>
CSS代码
h1 {
text-align: center;
}
/*总结:当看到某个元素覆盖某个元素的时候,一定要想到定位流,第一时间想到子绝父相(子元素绝对定位,父元素相对定位*/
*{
margin:0;
padding:0;
}
div{
width:991px;
height: 523px;
border: 2px solid ;
/*分析可知水平居中,距离上面有一定间隙*/
margin: 0 auto;
margin-top: 100px;
/*父元素相对定位*/
position: relative;
}
/*统一设置左右箭头的大小*/
.prev,
.next {
margin-top: -25px;
width: 40px;
height: 50px;
/*设置背景透明*/
background-color: rgba(0,0,0,0.2);
font-size:25px;
color: white;
text-align: center;
line-height: 50px;
text-decoration: none;
top: 50%;
position: absolute;/* 绝对定位 */
}
/*开始定位,子绝父相(子元素绝对定位,父元素相对定位)*/
div .prev {
left: 0px;
}
div .next{
/* position: absolute; */
right: 0px;
/* top: 50%; */
}
ol{
/*去除有序列表的默认样式*/
list-style: none;
/*设置导航条的宽度和高度*/
/* width: 200px;
height: 40px; */
bottom: 15px;
/*设置ol的背景颜色*/
/* background-color: rgba(255,255,255,.2); */
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -100px;
border-radius: 20px;
}
ol li{
/*让1,2,3,4,5水平排版*/
float: left;
/*设置每个li标签的宽高*/
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(2555,255,255,0.4);
margin: 10px;
cursor: pointer;
/* border: 1px solid gold; */
/*由于每个li标签添加了边框,每个li的宽度变宽了*/
/* box-sizing: border-box; */
/*水平垂直居中*/
/* line-height: 40px; */
/* text-align: center; */
}
网页效果: