整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章帶領大家制作了一個輪播圖的界面，本篇文章小海老師帶領大家利用固定定位技術（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教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
天學會html+css，第九天固定定位。
Redmi手機電視筆記本。
今天的學習目標是右側懸浮工具欄用固定定位實現，它是相對于瀏覽器窗口的定位方式。
·盒子里的內容用a標簽，一個圖片加一行文字，此時它的位置在最底部。
·然后給它寫上固定定位樣式，右側距離0，下面距離70像素，加上背景顏色，看下效果。
·開始給a標簽寫樣式，固定寬高，text-renderin默認下劃線去掉，里面內容居中，看下效果。
·圖片寫樣式之前也要加上這行代碼，然后讓它的尺寸變小一點，并且左右居中，看下效果。
·文字的顏色、大小也調整一下。
·最后給a標簽加上邊框、內邊距，讓里面內容往下挪一挪。
到此，今天的學習完成。
為教程，還是先科（啰）普（嗦）一下，然后再進入正題。
CSS3 的 calc() 函數允許我們在屬性值中執行數學計算操作，它支持"+", "-", "*", "/" 運算，遵循標準的數學運算優先級規則。例如，我們可以使用 calc() 指定一個元素的寬度總是比它的父元素寬度小 50px。
.foo {
width: calc(100% - 50px);
}這意味著瀏覽器中的值可以更加靈活，能夠響應視口的改變，用在流體布局上簡直就是如虎添翼。calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能。
特別需要注意的是：運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
可以說，calc函數已經得到了瀏覽器廠商的普遍支持，如下圖所示。
clac() 已經得到普遍支持
對于不支持 calc() 的瀏覽器，整個屬性值表達式將被忽略。不過我們可以對那些不支持 calc()函數的瀏覽器，使用一個固定值作為回退。
.foo {
width: 90%; /* Fallback for older browsers */
width: calc(100% - 50px);
}需求：比如，我們經常需要固定一個操作面板在頁面底部，其它區域占滿屏幕剩余區域并隨視口變化而自適應變化，且可以上下滾動。
分析：我們能夠給要固定的元素設定一個高度，其值為視口的高度減去一個絕對值。那么我們可以做一個上下結構的布局，上部為主區域，下部為底部區域。
HTML代碼：
<div id="main">主區域</div>
<div id="bottom">底部區域</div>CSS代碼：
body {
margin: 0;
color: white;
text-align: center;
}
#main {
height: calc(100vh - 50px); /*視口高度 - 50px*/
overflow-y: auto;
background-color: blueviolet;
}
#bottom {
height: 50px;
background-color: black;
}效果如下：無論窗口多大，底部始終保持50px高度，其余部分會隨著窗口變化而自適應變化，當主區域內容很多時，該區域會出現滾動條。
【本文結束】
學習過程記錄，有需要的朋友可以參考。歡迎一鍵三連（點贊、關注、評論）。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
