天學(xué)會html+css,第九天固定定位。
Redmi手機(jī)電視筆記本。
今天的學(xué)習(xí)目標(biāo)是右側(cè)懸浮工具欄用固定定位實(shí)現(xiàn),它是相對于瀏覽器窗口的定位方式。
·盒子里的內(nèi)容用a標(biāo)簽,一個(gè)圖片加一行文字,此時(shí)它的位置在最底部。
·然后給它寫上固定定位樣式,右側(cè)距離0,下面距離70像素,加上背景顏色,看下效果。
·開始給a標(biāo)簽寫樣式,固定寬高,text-renderin默認(rèn)下劃線去掉,里面內(nèi)容居中,看下效果。
·圖片寫樣式之前也要加上這行代碼,然后讓它的尺寸變小一點(diǎn),并且左右居中,看下效果。
·文字的顏色、大小也調(diào)整一下。
·最后給a標(biāo)簽加上邊框、內(nèi)邊距,讓里面內(nèi)容往下挪一挪。
到此,今天的學(xué)習(xí)完成。
avaScript
在我們制作html網(wǎng)頁的時(shí)候,有時(shí)候需要某個(gè)元素(比如說div)的滾動條一直在最下方,那么我們該怎么做呢?
先上代碼:
window.onload = SetScroll;// 不要括號
function SetScroll(){
//讀取需要設(shè)定的元素高度
var height=$("#showwindows")[0].scrollHeight;
//設(shè)置元素的滾動條位置在高度數(shù)據(jù)地方就是最下方
$("#showwindows").scrollTop(height);
}
程序執(zhí)行流程如下:
1、頁面加載時(shí)自動調(diào)用JavaScript中的SetScroll方法;
2、設(shè)置height為需要設(shè)置滾動條元素的高度;
3、設(shè)置元素的滾動條位置為元素高度,就是元素的最下方位置。
為教程,還是先科(啰)普(嗦)一下,然后再進(jìn)入正題。
CSS3 的 calc() 函數(shù)允許我們在屬性值中執(zhí)行數(shù)學(xué)計(jì)算操作,它支持"+", "-", "*", "/" 運(yùn)算,遵循標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級規(guī)則。例如,我們可以使用 calc() 指定一個(gè)元素的寬度總是比它的父元素寬度小 50px。
.foo {
width: calc(100% - 50px);
}
這意味著瀏覽器中的值可以更加靈活,能夠響應(yīng)視口的改變,用在流體布局上簡直就是如虎添翼。calc是英文單詞calculate(計(jì)算)的縮寫,是css3的一個(gè)新增的功能。
特別需要注意的是:運(yùn)算符前后都需要保留一個(gè)空格,例如:width: calc(100% - 10px);
可以說,calc函數(shù)已經(jīng)得到了瀏覽器廠商的普遍支持,如下圖所示。
clac() 已經(jīng)得到普遍支持
對于不支持 calc() 的瀏覽器,整個(gè)屬性值表達(dá)式將被忽略。不過我們可以對那些不支持 calc()函數(shù)的瀏覽器,使用一個(gè)固定值作為回退。
.foo {
width: 90%; /* Fallback for older browsers */
width: calc(100% - 50px);
}
需求:比如,我們經(jīng)常需要固定一個(gè)操作面板在頁面底部,其它區(qū)域占滿屏幕剩余區(qū)域并隨視口變化而自適應(yīng)變化,且可以上下滾動。
分析:我們能夠給要固定的元素設(shè)定一個(gè)高度,其值為視口的高度減去一個(gè)絕對值。那么我們可以做一個(gè)上下結(jié)構(gòu)的布局,上部為主區(qū)域,下部為底部區(qū)域。
HTML代碼:
<div id="main">主區(qū)域</div>
<div id="bottom">底部區(qū)域</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高度,其余部分會隨著窗口變化而自適應(yīng)變化,當(dāng)主區(qū)域內(nèi)容很多時(shí),該區(qū)域會出現(xiàn)滾動條。
【本文結(jié)束】
學(xué)習(xí)過程記錄,有需要的朋友可以參考。歡迎一鍵三連(點(diǎn)贊、關(guān)注、評論)。
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。