表格 長表格 布局

?固定定位

固定定位的元素會被鎖定在屏幕的某個位置上,當 訪問者滾動網頁時,固定元素會在屏幕上保持不動。

當將position屬性設置為fixed時,則開啟了元素的 固定定位。

當開啟了固定定位以后,可以使用top、right、

bottom、left四個屬性對元素進行定位。

固定定位的其他特性和絕對定位類似。

z-index

當元素開啟定位以后就可以設置z-index這 個屬性。

這個屬性可以提升定位元素所在的層級。

z-index可以指定一個整數作為參數,值越 大元素顯示的優先級越高,也就是z-index 值較大的元素會顯示在網頁的最上層。

?background-image

background-image可以為元素指定背景 圖片。

和background-color類似,這不過這里使 用的是一個圖片作為背景。

需要一個url地址作為參數,url地址需要指 向一個外部圖片的路徑

例如:

background-image: url(1.jpg)

?background-repeat

background-repeat用于控制背景圖片的 重復方式。

如果只設置背景圖片默認背景圖片將會使 用平鋪的方式,可以通過該屬性進行修改。

可選值:

repeat:默認值,圖片左右上下平鋪

no-repeat:只顯示圖片一次,不會平鋪

repeat-x:沿x軸水平平鋪一張圖片

repeat-y:沿y軸水平平鋪一張圖片

?background-position

background-position用來精確控制背景 圖片在元素中的位置。

可以通過三種方式來確定圖片在水平方向 和垂直方向的起點。

關鍵字:top right bottom left center

百分比

數值

?background-attachment

background-attachment用來設置背景圖 片是否隨頁面滾動。

可選值:

scroll:隨頁面滾動

fixed:不隨頁面滾動

?background

background是背景的簡寫屬性,通過這個 屬性可以一次性設置多個樣式,而且樣式 的順序沒有要求。

例如:

background: green url(1.jpg) no-repeat center center fixed;

?CSS Sprite

CSS Sprites是一種網頁圖片應用處理方式。

通過這種方式我們可以將網頁中的零星圖 片集中放到一張大圖上。

這樣一來,一次請求便可以同時加載多張 圖片,大大提高了圖片的加載效率

?表格

在Web的歷史中,HTML的表格發揮了極大的作用。最 初創建表格就是為了以表格的形式顯示數據,后來表格 變成了一個極受歡迎的布局工具。

但是有了CSS以后,CSS在布局網頁方面實際上會更出 色,所以現在我們使用表格的作用只有一個,就是用來 表示格式化的數據。

HTML中的表格可以很復雜,但是通常情況下我們不需 要創建過于復雜的表格。

table、tr、th、td

使用table標簽創建一個表格。

tr表示表格中的一行。

tr中可以編寫一個或多個th或td。

th表示表頭。

td表示表格中的一個單元格。

caption、thead、tbody、tfoot

caption表示表格的標題。

thead表示表格的頭部。

tbody表示表格的主體。

tfoot表示表格的底部。

合并單元格

合并單元格指將兩個或兩個以上的單元格 合并為一個單元格。

合并單元格可以通過在th或td中設置屬性 來完成。

橫向合并

colspan

縱向合并

rowspan

?表格

在HTML中,使用table標簽來創建一個表格

在table標簽中使用tr來表示表格中的一行,有幾行就有幾對tr

在tr中需要使用td來創建一個單元格,有幾個單元格就有幾個td

colspan橫向的合并單元格

caption表示表格的標題。

thead表示表格的頭部。

tbody表示表格的主體。

tfoot表示表格的底部。

rowspan縱向合并

text-align:設置文本的水平對齊。

vertical-align:設置文本的垂直對齊。

可選值:top、baseline、middle、bottom

border-spacing:邊框間距

border-collapse:合并邊框

collapse:合并邊框

separate:不合并邊框

padding可以設置內容和表格邊框的距離

長表格

有一些情況下表格是非常的長的,這時就需要將表格分為三個部分,表頭,表格的主體,表格底部

在HTML中為我們提供了三個標簽:

thead 表頭

tbody 表格主體

tfoot 表格底部

這三個標簽的作用,就來區分表格的不同的部分,

他們都是table的子標簽,都需要直接寫到table中,tr需要寫在這些標簽當中

thead中的內容,永遠會顯示在表格的頭部

tfoot中的內容,永遠都會顯示表格的底部

tbody中的內容,永遠都會顯示表格的中間

如果表格中沒有寫tbody,瀏覽器會自動在表格中添加tbody

并且將所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素

通過table > tr 無法選中行 需要通過tbody > tr

以前表格更多的情況實際上是用來對頁面進行布局的,但是這種方式早已被CSS所淘汰了

表格的列數由td最多的那行決定

表格是可以嵌套,可以在td中在放置一個表格

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容