固定定位:固定定位的元素會被鎖定在屏幕的某個位置上谢澈,當(dāng)訪問者滾動網(wǎng)頁時煌贴,固定元素會在屏幕上保持不動。
當(dāng)將position屬性設(shè)置為fixed時锥忿,則開啟了元素的固定定位牛郑。
當(dāng)開啟了固定定位以后,可以使用top敬鬓、right淹朋、bottom笙各、left四個屬性對元素進行定位。
固定定位的其他特性和絕對定位類似础芍。
z-index
當(dāng)元素開啟定位以后就可以設(shè)置z-index這個屬性杈抢。
這個屬性可以提升定位元素所在的層級。
z-index可以指定一個整數(shù)作為參數(shù)仑性,值越大元素顯示的優(yōu)先級越高惶楼,也就是z-index 值較大的元素會顯示在網(wǎng)頁的最上層。
設(shè)置元素的背景
background-color:屬性用來為元素設(shè)置背景顏色诊杆。
background-image:可以為元素指定背景圖片歼捐。
需要一個url地址作為參數(shù),url地址需要指向一個外部圖片的路徑晨汹。
例如:background-image: url(1.jpg)
background-repeat:用于控制背景圖片的重復(fù)方式豹储。
如果只設(shè)置背景圖片默認(rèn)背景圖片將會使用平鋪的方式,可以通過該屬性進行修改淘这。
可選值:repeat:默認(rèn)值剥扣,圖片左右上下平鋪
? ? ? ? ? ? ? no-repeat:只顯示圖片一次,不會平鋪
? ? ? ? ? ? ? repeat-x:沿x軸水平平鋪一張圖片
? ? ? ? ? ? ? repeat-y:沿y軸水平平鋪一張圖片
background-position:用來精確控制背景圖片在元素中的位置铝穷。
可以通過三種方式來確定圖片在水平方向 和垂直方向的起點钠怯。
關(guān)鍵字:top right bottom left center
百分比
數(shù)值
background-attachment:用來設(shè)置背景圖片是否隨頁面滾動。
?可選值:scroll:隨頁面滾動? ? ? ? ? ?fixed:不隨頁面滾動
background:是背景的簡寫屬性,通過這個屬性可以一次性設(shè)置多個樣式氧骤,而且樣式 的順序沒有要求呻疹。
例如:background:green url(1.jpg) no-repeat center center fixed;
CSS Sprites:是一種網(wǎng)頁圖片應(yīng)用處理方式。
通過這種方式我們可以將網(wǎng)頁中的零星圖 片集中放到一張大圖上筹陵。
這樣一來,一次請求便可以同時加載多張圖片镊尺,大大提高了圖片的加載效率朦佩。
表格
使用table標(biāo)簽創(chuàng)建一個表格。
tr表示表格中的一行庐氮。
tr中可以編寫一個或多個th或td语稠。
th表示表頭。
td表示表格中的一個單元格弄砍。
caption表示表格的標(biāo)題仙畦。
thead表示表格的頭部。
tbody表示表格的主體音婶。
tfoot表示表格的底部慨畸。
合并單元格
合并單元格指將兩個或兩個以上的單元格 合并為一個單元格。
合并單元格可以通過在th或td中設(shè)置屬性來完成衣式。
橫向合并:colspan? ? ? 縱向合并:rowspan
表格的樣式
之前學(xué)習(xí)的很多屬性都可以用來設(shè)置表格的樣式寸士,比如color可以用來設(shè)置文本的顏色檐什。padding可以設(shè)置內(nèi)容和表格邊框的距離。
text-align:設(shè)置文本的水平對齊弱卡。
vertical-align:設(shè)置文本的垂直對齊乃正。
可選值:top、baseline婶博、middle瓮具、bottom
border-spacing:邊框間距
border-collapse:合并邊框
collapse:合并邊框
separate:不合并邊框