国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

課時(shí)40.表格中的其它標(biāo)簽（理解）

gxyz / 2241人閱讀

利用我們表格標(biāo)簽來(lái)做一個(gè)案例：

通過(guò)這個(gè)案例來(lái)給大家介紹下表格標(biāo)簽中的其它標(biāo)簽

1.ctrl+alt+n新建一個(gè)文件，命名為24-表格標(biāo)簽的其它標(biāo)簽

然后我們?cè)谶@個(gè)程序中輸入代碼，我們觀察這個(gè)圖片發(fā)現(xiàn)標(biāo)題是h2，然后下面是一個(gè)表格標(biāo)簽，一共是六行六列，我們先做出來(lái)標(biāo)題欄

出現(xiàn)這種樣式，發(fā)現(xiàn)看不到邊框，因?yàn)楸砀襁吙蚰J(rèn)為0，并且圖片中是一個(gè)細(xì)線表格，所以我們要按上節(jié)課學(xué)的來(lái)制作細(xì)線表格,我們給table加一個(gè)黑色的背景顏色，然后給tr加一個(gè)白色的背景顏色

? ? ??

邊框生成了，但是邊框比較寬，因?yàn)閏ell和cell之間有兩個(gè)像素的間隙，而圖片上只有一個(gè)像素，所以修改如下：

? ? ? ? ? ?

細(xì)線表格做出來(lái)了，但是我的細(xì)線表格比較窄，而要求我們做的表格寬，于是我們?cè)俳o它添加一個(gè)寬度width為800px

? ? ?

接下來(lái)，我們通過(guò)觀察圖片可以得知今日小說(shuō)排行榜這個(gè)標(biāo)題是正好在表格的居中位置，而我們之前講過(guò)可以給table添加align屬性，但是那是控制表格的，如果做了會(huì)出現(xiàn)這種樣式

而如果給h2添加align=“center”屬性，會(huì)出現(xiàn)這種樣式

為什么會(huì)出現(xiàn)這種效果呢？

因?yàn)樵趆2標(biāo)簽上加align=“center”，它是相對(duì)于整個(gè)頁(yè)面來(lái)說(shuō)位于中間位置的

通過(guò)上面這張圖片，你可以看出來(lái)，這個(gè)“今日小說(shuō)排行榜”的這個(gè)標(biāo)題距離左邊與右邊的距離是等距的

所以我想讓標(biāo)題位于表格的中間，所以不能給h2標(biāo)簽設(shè)置align屬性的值

那我們?cè)趺丛O(shè)置讓標(biāo)題位于表格的中間呢？看注釋的文字，我們將之前的h2刪除掉，然后在table之后添加一個(gè)caption標(biāo)簽，在里面寫上之前的h2標(biāo)簽

這個(gè)標(biāo)簽有幾個(gè)注意點(diǎn)，看下面注釋

?

如何判定無(wú)效，看下邊的圖片，我們將caption標(biāo)簽和里面所包含的內(nèi)容寫到了table標(biāo)簽到上面

? ? ? ?出現(xiàn)了這種樣式

正確的顯示方式

并且在這個(gè)時(shí)候，整個(gè)標(biāo)題和我們的表格已經(jīng)成為一個(gè)整體了，我們可以來(lái)驗(yàn)證一下，我們給table標(biāo)簽添加一個(gè)align=“center”屬性，發(fā)現(xiàn)整個(gè)表格都移動(dòng)到了正中間

  • 下一步，我們要做除了標(biāo)題剩下的單元格部分，我發(fā)現(xiàn)剩下的表格是6行6列，并且都是類似的，我完全可以做出來(lái)一個(gè)，然后剩下的復(fù)制粘貼

然后我們?cè)诤竺娴膯卧窭锾砑訉?duì)應(yīng)的內(nèi)容

在這里一定不要犯一個(gè)錯(cuò)誤，就是在添加超鏈接的時(shí)候，不要添加三個(gè)單元格，一定要把三個(gè)鏈接寫在一個(gè)單元格里面

然后我們發(fā)現(xiàn)除了“暴走大事件”以外都是水平居中的，我們要給tr標(biāo)簽添加一個(gè)屬性align=“center”

? ? ? ? ? ? ??

然后給第一個(gè)排名的“暴走大事件”多帶帶設(shè)置一個(gè)align=“l(fā)eft”

? ? ? ??

剩余的幾行copy就可以了，然后給第三個(gè)，第四個(gè)換個(gè)趨勢(shì)的圖片就可以了，我們?cè)诓檎掖a時(shí)感覺(jué)不太方便，因?yàn)榇a太多太亂，所以我們要將代碼折疊起來(lái)查找，如下圖

? ?

?

然后我們發(fā)現(xiàn)第一行的標(biāo)題都是居中的，所以我們給第一行加一個(gè)align=“center”的屬性值

? ? ? ??

然后我們發(fā)現(xiàn)第一行“排名”，“關(guān)鍵字”，“趨勢(shì)”，“今日搜索”，“最近七日”，“相關(guān)鏈接”都分別是這一列的標(biāo)題

通過(guò)觀察我們應(yīng)該給第一行單元格的文字加粗，我們專門提供了一個(gè)標(biāo)簽專門用來(lái)存儲(chǔ)每一列的標(biāo)題

于是我們將第一列的標(biāo)簽都改為th

? ? ? ?

于是就可以將第一行的align=“center”刪除掉了

? ??

到此為止我們就發(fā)現(xiàn)，其實(shí)表格中有兩種單元格，一種是td，一種是th，td是專門用來(lái)存儲(chǔ)數(shù)據(jù)到，th是專門用來(lái)存儲(chǔ)當(dāng)前列的標(biāo)題的。

caption是專門用來(lái)指定表格都標(biāo)題都，而th是專門用來(lái)指定列都標(biāo)題都。?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/2162.html

相關(guān)文章

  • 課時(shí)39.細(xì)線表格（理解）

    摘要：請(qǐng)你設(shè)計(jì)出以下圖片里的這個(gè)樣式的表格步驟我先來(lái)制作一個(gè)兩行兩列的表格將里的設(shè)置成外邊距是不見(jiàn)了，但是和我們想要完成的圖片有一定的差距，我們發(fā)現(xiàn)這樣做出來(lái)的圖片好像是兩條線合并到了一起一樣，實(shí)際上確實(shí)是兩條線合并到了一起的，它是將每個(gè)單元格 請(qǐng)你設(shè)計(jì)出以下圖片里的這個(gè)樣式的表格 步驟： 我先來(lái)制作一個(gè)兩行兩列的表格 ? ? ? ? ? ? ? ? ? ? ?? ? ? 2.將tab...

    mist14 評(píng)論0 收藏0

  • 課時(shí)38.表格標(biāo)簽的屬性（了解）

    摘要：寬度和高度的屬性可以給標(biāo)簽和標(biāo)簽使用標(biāo)簽不能使用水平對(duì)齊和垂直對(duì)齊的屬性其中水平對(duì)齊可以給標(biāo)簽和標(biāo)簽和標(biāo)簽使用垂直對(duì)齊只能給標(biāo)簽和標(biāo)簽使用外邊距和內(nèi)邊距屬性只能給標(biāo)簽使用補(bǔ)充上節(jié)課內(nèi)容表格的寬度和高度默認(rèn)是按照內(nèi)容的尺寸來(lái)調(diào)整的也可以通過(guò)給1.寬度和高度的屬性 可以給table標(biāo)簽和td標(biāo)簽使用（tr標(biāo)簽不能使用） 2.水平對(duì)齊和垂直對(duì)齊的屬性 其中水平對(duì)齊可以給table標(biāo)簽和tr標(biāo)簽和t...

    callmewhy 評(píng)論0 收藏0

  • 課時(shí)33.無(wú)序列表練習(xí)3（理解）

    摘要：蔬菜，水果同屬于物品清單里的，并且蔬菜，水果誰(shuí)先誰(shuí)后都無(wú)所謂，所以是無(wú)序列表，而蔬菜里面又包含這幾樣，所以它們又是一個(gè)無(wú)序列表，水果同理，這是無(wú)序列表中又包含無(wú)序列表，這是這節(jié)課講解都重點(diǎn)。上節(jié)課做了第一個(gè)練習(xí)，這節(jié)課我們來(lái)完成第二個(gè)練習(xí)（多級(jí)界面） 做之前先分析： 1.物品清單是這個(gè)界面的標(biāo)題，可以通過(guò)標(biāo)簽來(lái)做。 2.蔬菜，水果同屬于物品清單里的，并且蔬菜，水果誰(shuí)先誰(shuí)后都無(wú)所謂，所以是無(wú)序...

    newtrek 評(píng)論0 收藏0

  • 課時(shí)41.表格的結(jié)構(gòu)（了解）

    摘要：我們打開(kāi)上節(jié)課做出來(lái)的頁(yè)面，然后點(diǎn)擊鼠標(biāo)右鍵檢查我們發(fā)現(xiàn)整個(gè)表格都是一個(gè)標(biāo)簽，標(biāo)題就是，而標(biāo)題下面是我們上節(jié)課并沒(méi)有寫這個(gè)標(biāo)簽，所以事實(shí)證明我們上節(jié)課寫的表格不是一個(gè)完整的表格，那么到底什么是一個(gè)完整的表格呢我們這節(jié)課來(lái)探討一下，但是這節(jié)知 我們打開(kāi)上節(jié)課做出來(lái)的頁(yè)面，然后點(diǎn)擊鼠標(biāo)右鍵檢查 我們發(fā)現(xiàn)整個(gè)表格都是一個(gè)table標(biāo)簽，標(biāo)題就是caption，而標(biāo)題caption下面是... ...

    鄒立鵬 評(píng)論0 收藏0

  • 課時(shí)43.表格練習(xí)

    摘要：這節(jié)課我們來(lái)練習(xí)幾個(gè)樣式的表格快捷鍵總結(jié)快速移動(dòng)選中的代碼，上下移動(dòng)往上移動(dòng)向上箭頭往下移動(dòng)向下箭頭快速合并和展開(kāi)代碼合并和展開(kāi)的是一個(gè)標(biāo)簽合并展開(kāi)快速合并和展開(kāi)代碼合并和展開(kāi)選中的所有標(biāo)簽合并展開(kāi)快速新啟一行回車這節(jié)課我們來(lái)練習(xí)幾個(gè)樣式的表格 1. 2. 3. 4. 快捷鍵總結(jié) 快速移動(dòng)選中的代碼，上下移動(dòng) 往上移動(dòng)：ctrl+shift+向上箭頭 往下移動(dòng)：ctrl+shi...

    TesterHome 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<