實(shí)頁(yè)面中頂部和底部的固定條，滾動(dòng)時(shí)依然固定，固定定位的使用

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

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

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

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

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

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

頁(yè)面固定條案例界面展示

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

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

整體分析，頁(yè)面中有以下三個(gè)部分組成：

圖片的容器對(duì)象，設(shè)置該對(duì)象的id屬性為images。
頂部的固定條，設(shè)置該對(duì)象的id屬性為topDiv。
底部的固定條，設(shè)置該對(duì)象的id屬性為bottomDiv。

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

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

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

當(dāng)希望在頁(yè)面中具備不跟隨滾動(dòng)條滾動(dòng)的對(duì)象時(shí)，我們稱該對(duì)象為固定元素。

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

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

首先，讓我們一起來實(shí)現(xiàn)頁(yè)面中的圖片。這部分只需要在id屬性取值為images的容器中添加準(zhǔn)備好的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，是兩張圖片的寬度在略大一些。因?yàn)閳D片是內(nèi)聯(lián)元素，所以它們應(yīng)該在一行內(nèi)顯示。由于容器的寬度只允許盛放兩張圖片，所以剩余的圖片自動(dòng)換行了。

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

#images{
width:1300px; height:auto;
margin:0 auto;
}

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

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

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

底部的固定條和頂部的固定條的實(shí)現(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); //實(shí)現(xiàn)背景透明效果
position:fixed;
bottom:0;
color:#ffffff;
}

內(nèi)部文本的實(shí)現(xiàn)依然采用在#bottomDiv容器中再添加一個(gè)<div></div>容器的方法，該容器的class屬性命名為bottomDivNr。然后將該容器內(nèi)部分為兩部分，左部分書寫標(biāo)題“宇宙”，右部分書寫文本內(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;
}

整個(gè)項(xiàng)目的完整CSS代碼如下所示。

完整的CSS代碼

文章預(yù)告

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

小海教材

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

小海聲明

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

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

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

定定位：(1)給自身設(shè)置寬高。(2)再設(shè)置position:fixed

在線咨詢

上一篇：純CSS實(shí)現(xiàn)輪播圖效果，你不知道的CSS3黑科技
下一篇：html5+css3實(shí)現(xiàn)三款好看的告白愛心特效，趕緊去給女朋友演示吧

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。