希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
【技术等级】初级
【承接文章】《CSS三个重要的定位属性，使用频率超高，定位属性详解》
上两篇文件主要讲解了定位属性的使用，本篇文章小海老师带领大家利用定位属性制作一个轮播图的前端界面。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
本文以动手实践为主，希望跟着学的同学们按照下面所讲的步骤一步一步的操作一下。前端开发注重实践操作，只要你按照小海老师所讲的步骤操作，一定能够掌握轮播图界面的制作方式。如果能抽出时间多做几次，熟能生巧，相信你会从中学习到在容器内部对元素进行定位的一类方法。
一、我们要做的轮播图界面展示：
轮播图案例界面展示
本案例旨在利用CSS的定位属性制作轮播图的界面，并不涉及轮播图的各项行为。轮播图的各项行为需要借助JavaScript脚本技术实现，在后续的内容中会逐步介绍。首先我们对这个案例进行一下简单的分析。
通过上图，我们可以总结出，整个案例需要一个总的容器，我们可以使用<div></div>实现，并为其设置一个名为lunbo的id属性取值。即：
<div id=”lunbo”></div>
在这个容器内部，有下列对象：
一张图片。（因为制作界面，所以展示只放置一张图片即可）
左右两侧各有两个箭头图标，用于鼠标单击产生轮播效果。
下方有一个黑色透明的部分。
黑色透明的部分内部有5个数字组成的矩形，用于鼠标单击时跳转到指定的图片。
二、轮播图界面布局的原理：
通过分析，我们发现，大部分内容都在#lunbo的<div>容器中。那么，如何在容器内部对各个元素进行位置的确定呢？这就需要使用CSS技术中的定位属性。
这里，有一个这类问题的处理方法，它的原理如下所示。
在容器内部实现元素的定位，需要：将容器的定位方式设置为为“相对定位”，内部元素的定位方式设置为“绝对定位”。这样，对内部元素使用位置属性（left、top、right、bottom），就能够实现相对于容器左上角的定位方式了。
根据上述原理，我们很容易就能写出容器的CSS代码。
这里设图片的尺寸为800px*400px，则容器的CSS代码如下所示：
#lunbo{
width:800px; height:400px;
position:relative;
}
三、实现容器内部的HTML对象：
下面我们来实现容器内部的各个HTML对象。注意，本小节只实现各个HTML对象，不对各个对象进行CSS样式设计。
1、一张图片：
<img src=”images/01.jpg” />
2、左右两侧各有两个箭头图标：
左侧箭头利用小于号显示，小于号在HTML中使用 < 实现。放在一个容器中并设置class为small。
右侧箭头利用大于号显示，大于号在HTML中使用 > 显示。放在一个容器中并设置class为big。
<div><</div>
<div>></div>
3、下方有一个黑色透明的部分：
<div class="black"></div>
4、黑色透明的部分内部有5个数字组成的矩形：
五个数字分别用<span></span>标记对实现的，并安排在一个名为num的容器中，最后放在黑色透明容器内部。
<div class=”black”> <!--black容器开始-->
<div class="num"> <!--num容器开始-->
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div> <!--num容器结束-->
</div> <!--black容器结束-->
整体的HTML代码如下所示。
轮播案例的HTML代码
四、左右两侧箭头图标的样式：
左右两侧的箭头设置宽度为40px，高度为60px，背景颜色位白色，并设置一定的透明度。字体为Arial，字体大小为50px，水平方向和垂直方向均居中对齐。文字颜色为#666666，鼠标经过时显示手型鼠标。
这些样式两个箭头都具备，所以使用群组选择器。
#lunbo .small,#lunbo .big{
width:40px; height:60px;
background-color:rgba(255,255,255,0.3);
font-family: Arial;
font-size: 50px;
text-align: center;
color:#666666;
cursor:pointer;
}
为了在容器#loubo中对这两个箭头定位，所以应该将这两个箭头设置为“绝对定位”，并分别设置位置属性。
因为两个箭头的高度位置相同，所以top属性取值一样。通过测试，选择top属性为175px。
左侧小于号箭头设置left属性为50px。
右侧大于号箭头设置right属性为50px。
#lunbo .small,#lunbo .big{position:absolute;top:175px;}
#lunbo .small{left:50px;}
#lunbo .big{right:50px;}
除此之外，还需要为这两个箭头设置鼠标经过时的背景颜色变化。
#lunbo .small:hover,
#lunbo .big:hover{
background-color: rgba(255,255,255,0.6);
}
综上所述，左右两侧箭头图标的CSS样式代码如下所示。
左右两侧箭头图标的CSS代码
五、黑色透明的部分的样式：
设置黑色透明的部分宽度为容器#lunbo的宽度，因此可以将宽度的取值设置为inherit，意思为宽度的大小继承该元素容器的大小。高度设置为40px，背景颜色为黑色并带有一定的透明度，利用定位将其设置在容器的底端。CSS代码如下所示。
#lunbo .black{
width:inherit; height:40px;
background-color: rgba(0,0,0,0.7);
position:absolute;
left:0; bottom:0;
}
六、黑色透明部分内部的数字：
做为数字的直接容器num，只需要设置位置属性，以保证这5个数字的位置在黑色透明部分的右侧。
#lunbo .num{
position:absolute;
right:10px;
bottom:8px;
}
容器num内部的span标记对用于盛放每一个数字。因为<span>标记对作为内联元素无法设置宽度和高度，所以将所有的<span>标记对变为内联块。设置它们的宽度为20px，高度为24px，背景颜色位为999999，水平垂直方向居中对齐，文字颜色为#ffffff，字号大小为14px，鼠标经过时变为手型鼠标。为了让它们之间具有一定的距离，可以设置每一个<span>的右边界为10px。
#lunbo .num span{
display:inline-block;
width:20px; height:24px;
background-color: #999999;
text-align: center;
line-height: 24px;
color:#ffffff;
font-size: 14px;
margin-right:10px;
cursor:pointer;
}
最后设置这些<span>标记对鼠标经过时背景颜色的变化。
#lunbo .num span:hover{
background-color: #ff5857;
}
综上所述，黑色透明部分内部的数字的CSS样式代码如下所示。
黑色透明部分内部的数字的CSS代码
七、结束：
最后请同学们将这些代码整理到一起，看看能不能实现。
仔细的同学们肯定能够发现，整个项目中，第一个数字的背景颜色和其它数字的背景颜色是不一样的，这是为了说明此时是第一张图片在显示。这是如何实现的呢？
<span style="background-color:#ff5857">1</span>
大家想一想，这段代码是不是就能够实现了呢！
文章预告
下一篇文章中，小海老师继续带大家实现跟定位有关的实例，一同看一看定位属性都有哪些应用领域，对定位技术有疑问的学习者千万不要错过！
小海教材
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
小海声明
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。