篇文章帶領大家制作了一個輪播圖的界面，本篇文章小海老師帶領大家利用固定定位技術（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教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。