1. 界面分析
2. 界面分析完后,不管三七二十一,先整一个大盒子,再在大盒子里面塞图片,塞小盒子
3. 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>156-定位练习2-焦点图</title>
<style>
/*总结:当看到某个元素覆盖某个元素的时候,一定要想到定位流,第一时间想到子绝父相(子元素绝对定位,父元素相对定位*/
/*步骤2*/
*{
margin:0;
padding:0;
}
/*步骤3*/
div{
width:273px;
height: 147px;
border: 2px solid gold;
/*分析可知水平居中,距离上面有一定间隙*/
margin: 0 auto;
margin-top: 100px;
/*步骤13:父元素相对定位*/
position: relative;
}
/*步骤6,统一设置左右箭头的大小*/
span{
margin-top: 10px;
width: 40px;
/*height: 50px;*/
/*设置背景透明*/
background-color: rgba(0,0,0,0.3);
font-size:25px;
color: white;
text-align: center;
line-height: 50px;
}
/*步骤11:开始定位,子绝父相(子元素绝对定位,父元素相对定位*/
div .leftArrow{
position: absolute;
left: 0px;
top: 37PX;
}
div .rightArrow{
position: absolute;
right: 0px;
top: 37px;
}
ol{
/*步骤7:去除有序列表的默认样式*/
list-style: none;
/*步骤8:设置导航条的宽度和高度*/
width: 200px;
height: 40px;
/*步骤10,设置ol的背景颜色*/
background-color: rgba(255,255,255,0.7);
/*步骤12:绝对定位*/
position: absolute;
right: 0px;
top: 101px;
}
/*步骤9*/
ol li{
/*让1,2,3,4,5水平排版*/
float: left;
/*设置每个li标签的宽高*/
width: 40px;
height: 40px;
border: 1px solid gold;
/*由于每个li标签添加了边框,每个li的宽度变宽了*/
box-sizing: border-box;
/*水平垂直居中*/
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<!--步骤1-->
<div>
<!--步骤4-->
<img src="m4.png" alt="">
<!--步骤5,添加左右箭头-->
<span class="leftArrow"><</span>
<span class="rightArrow">></span>
<!--步骤6:设置下面的盒子,类似于导航条-->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
结果: