上篇文章带领大家制作了一个轮播图的界面，本篇文章小海老师带领大家利用固定定位技术（fixed）制作一个在页面的顶端和底端固定的内容条。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。

【技术等级】初级

【承接文章】《利用CSS制作轮播图界面，巧妙使用定位属性，position的强大应用》

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

本文以动手实践为主，希望跟着学的同学们按照下面所讲的步骤一步一步的操作一下。前端开发注重实践操作，只要你按照小海老师所讲的步骤操作，一定能够学会固定条在页面中的做法。如果能抽出时间多做几次，熟能生巧，相信你会从中学习到在页面中设置固定定位的一类使用方式。

一、我们要做的界面展示：

页面固定条案例界面展示

本案例比较简单，旨在向广大学习者说明“固定定位的使用”。从图中可以看出，页面中有一些图片。图片总共安排了6张，一行显示2张。这样做的目的是为了让页面产生垂直滚动条。同学们也可以根据个人爱好自行选择图片内容和张数。

在页面的顶端和底端有两个通栏的内容条。上方的内容条显示“宇宙美图欣赏 >>”字样，背景颜色为灰色。下方的内容条显示一端关于“宇宙”的文字解释。背景颜色为灰色并且带有一定的透明效果。当拖动页面垂直滚动条时，这两个内容条依然固定在可见页面的顶部和底部。

整体分析，页面中有以下三个部分组成：

• 图片的容器对象，设置该对象的id属性为images。

• 顶部的固定条，设置该对象的id属性为topDiv。

• 底部的固定条，设置该对象的id属性为bottomDiv。

这三部分的HTML代码如下所示：

<div id=”topDiv”></div>

<div id=”images”></div>

<div id=”bottomDiv”></div>

二、页面中固定元素实现的原理：

当希望在页面中具备不跟随滚动条滚动的对象时，我们称该对象为固定元素。

固定元素的实现是使用position属性，取值为fixed来完成的。

三、实现页面中的图片：

首先，让我们一起来实现页面中的图片。这部分只需要在id属性取值为images的容器中添加准备好的6张图片。其HTML代码如下所示。

<div id="images">

<img src="images/01.jpg" />

<img src="images/02.jpg" />

<img src="images/03.jpg" />

<img src="images/04.jpg" />

<img src="images/05.jpg" />

<img src="images/06.jpg" />

</div>

这里假设图片的宽度为600px，那么我们就将盛放这些图片的容器#images的宽度设置为1300px，是两张图片的宽度在略大一些。因为图片是内联元素，所以它们应该在一行内显示。由于容器的宽度只允许盛放两张图片，所以剩余的图片自动换行了。

#images容器的CSS代码如下所示。

#images{

width:1300px; height:auto;

margin:0 auto;

}

四、实现顶部的固定条：

顶部的固定条是通栏的，因此外部的容器（即#topDiv）的宽度应该设置为100%。这里高度设置为40px。为了让通栏中显示的内容仍然在页面的中部，并且限制在1300px的宽度范围内，我们需要在#topDiv容器中在制作一个<div></div>标记对，我们将这个div标记对的class属性设置为topDivNr，表示是#topDiv的内容。在这个容器中输入顶部固定条的文本内容。

HTML代码如下所示。

<div id="topDiv">

<div class="topDivNr"> 宇宙美图欣赏 >> </div>

</div>

CSS代码如下所示。

#topDiv{

width:100%; height:40px;

background-color: #676767;

position:fixed;

top:0;

}

#topDiv .topDivNr{

width:1300px; height:40px;

margin:0 auto;

color:#ffffff;

line-height: 40px;

}

五、实现底部的固定条：

底部的固定条和顶部的固定条的实现方式是相同的，所不同的是固定的位置不一样。同样是在fixed固定定位的基础上，顶部固定条采用top:0;的CSS位置属性定位在顶部，而底部固定条采用bottom:0;的CSS位置属性定位在底部。

#bottomDiv的CSS代码如下所示。

#bottomDiv{

width:100%; height:150px;

background-color: rgba(0,0,0,0.5); //实现背景透明效果

position:fixed;

bottom:0;

color:#ffffff;

}

内部文本的实现依然采用在#bottomDiv容器中再添加一个<div></div>容器的方法，该容器的class属性命名为bottomDivNr。然后将该容器内部分为两部分，左部分书写标题“宇宙”，右部分书写文本内容。其HTML代码如下所示。

<div id="bottomDiv">

<div class="bottomDivNr">

<div class="bt">宇宙</div>

<div class="nr">文本内容……</div>

</div>

</div>

该段HTML代码的CSS样式如下所示。

#bottomDiv .bottomDivNr{

width:1300px; height:150px;

margin:0 auto;

text-align: left;

}

#bottomDiv .bottomDivNr .bt{

width:120px;

font-size: 50px;

float:left;

text-align: center;

}

#bottomDiv .bottomDivNr .nr{

width:950px;

font-size:14px;

float:left;

text-indent: 28px;

line-height: 24px;

text-align: justify;

margin-top:10px;

}

整个项目的完整CSS代码如下所示。

完整的CSS代码

文章预告

下一篇文章中，小海老师将为大家讲解浮动属性。浮动属性是流式定位的重要属性，承担了大部分传统布局的功能。希望广大前端学习者千万不要错过！

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。