篇文章帶領(lǐng)大家制作了一個輪播圖的界面，本篇文章小海老師帶領(lǐng)大家利用固定定位技術(shù)（fixed）制作一個在頁面的頂端和底端固定的內(nèi)容條。本文屬于前端開發(fā)的初級教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。

【技術(shù)等級】初級

【承接文章】《利用CSS制作輪播圖界面，巧妙使用定位屬性，position的強大應(yīng)用》

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

本文以動手實踐為主，希望跟著學(xué)的同學(xué)們按照下面所講的步驟一步一步的操作一下。前端開發(fā)注重實踐操作，只要你按照小海老師所講的步驟操作，一定能夠?qū)W會固定條在頁面中的做法。如果能抽出時間多做幾次，熟能生巧，相信你會從中學(xué)習(xí)到在頁面中設(shè)置固定定位的一類使用方式。

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

頁面固定條案例界面展示

本案例比較簡單，旨在向廣大學(xué)習(xí)者說明“固定定位的使用”。從圖中可以看出，頁面中有一些圖片。圖片總共安排了6張，一行顯示2張。這樣做的目的是為了讓頁面產(chǎn)生垂直滾動條。同學(xué)們也可以根據(jù)個人愛好自行選擇圖片內(nèi)容和張數(shù)。

在頁面的頂端和底端有兩個通欄的內(nèi)容條。上方的內(nèi)容條顯示“宇宙美圖欣賞 >>”字樣，背景顏色為灰色。下方的內(nèi)容條顯示一端關(guān)于“宇宙”的文字解釋。背景顏色為灰色并且?guī)в幸欢ǖ耐该餍Ч?。當拖動頁面垂直滾動條時，這兩個內(nèi)容條依然固定在可見頁面的頂部和底部。

整體分析，頁面中有以下三個部分組成：

• 圖片的容器對象，設(shè)置該對象的id屬性為images。

• 頂部的固定條，設(shè)置該對象的id屬性為topDiv。

• 底部的固定條，設(shè)置該對象的id屬性為bottomDiv。

這三部分的HTML代碼如下所示：

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

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

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

二、頁面中固定元素實現(xiàn)的原理：

當希望在頁面中具備不跟隨滾動條滾動的對象時，我們稱該對象為固定元素。

固定元素的實現(xiàn)是使用position屬性，取值為fixed來完成的。

三、實現(xiàn)頁面中的圖片：

首先，讓我們一起來實現(xiàn)頁面中的圖片。這部分只需要在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>

這里假設(shè)圖片的寬度為600px，那么我們就將盛放這些圖片的容器#images的寬度設(shè)置為1300px，是兩張圖片的寬度在略大一些。因為圖片是內(nèi)聯(lián)元素，所以它們應(yīng)該在一行內(nèi)顯示。由于容器的寬度只允許盛放兩張圖片，所以剩余的圖片自動換行了。

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

#images{

width:1300px; height:auto;

margin:0 auto;

}

四、實現(xiàn)頂部的固定條：

頂部的固定條是通欄的，因此外部的容器（即#topDiv）的寬度應(yīng)該設(shè)置為100%。這里高度設(shè)置為40px。為了讓通欄中顯示的內(nèi)容仍然在頁面的中部，并且限制在1300px的寬度范圍內(nèi)，我們需要在#topDiv容器中在制作一個<div></div>標記對，我們將這個div標記對的class屬性設(shè)置為topDivNr，表示是#topDiv的內(nèi)容。在這個容器中輸入頂部固定條的文本內(nèi)容。

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;

}

五、實現(xiàn)底部的固定條：

底部的固定條和頂部的固定條的實現(xiàn)方式是相同的，所不同的是固定的位置不一樣。同樣是在fixed固定定位的基礎(chǔ)上，頂部固定條采用top:0;的CSS位置屬性定位在頂部，而底部固定條采用bottom:0;的CSS位置屬性定位在底部。

#bottomDiv的CSS代碼如下所示。

#bottomDiv{

width:100%; height:150px;

background-color: rgba(0,0,0,0.5); //實現(xiàn)背景透明效果

position:fixed;

bottom:0;

color:#ffffff;

}

內(nèi)部文本的實現(xiàn)依然采用在#bottomDiv容器中再添加一個<div></div>容器的方法，該容器的class屬性命名為bottomDivNr。然后將該容器內(nèi)部分為兩部分，左部分書寫標題“宇宙”，右部分書寫文本內(nèi)容。其HTML代碼如下所示。

<div id="bottomDiv">

<div class="bottomDivNr">

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

<div class="nr">文本內(nèi)容……</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代碼

文章預(yù)告

下一篇文章中，小海老師將為大家講解浮動屬性。浮動屬性是流式定位的重要屬性，承擔了大部分傳統(tǒng)布局的功能。希望廣大前端學(xué)習(xí)者千萬不要錯過！

小海教材

如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。

小海聲明

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

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

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