tft每日頭條

 > 生活

 > html表格背景圖怎麼添加

html表格背景圖怎麼添加

生活 更新时间:2024-11-01 07:24:38

小夥伴們,晚上好呀~

今天決定撸一個最近風靡微信朋友圈的九宮格愛心圖,

就是下圖醬紫的效果啦~

html表格背景圖怎麼添加(HTML表格标簽打造微信朋友圈九宮格愛心圖)1

其實它的制作原理很簡單,前提是你得掌握HTML的表格标簽。

在給大家正式分享表格标簽之前,我們先來學習一下如何在HTML中添加css樣式吧,因為待會我們馬上就要用上它啦~

CSS全稱Cascading Style Sheets,是用于渲染HTML元素标簽的樣式,前面我們說過HTML是構成Web世界的一磚一瓦,那麼CSS就是用來給這個世界增添色彩的畫筆。

CSS可以通過以下幾種方式添加到HTML中:

1、内聯樣式(位于HTML元素内部):個别元素需要特殊樣式時可以使用;

2、内部樣式表(位于标簽内部):在HTML文檔頭部<head>區域内使用<style>元素來包裹CSS;

3、外部樣式表:引入外部CSS文件。

html表格背景圖怎麼添加(HTML表格标簽打造微信朋友圈九宮格愛心圖)2

上圖中,蘇萊向大家演示了三種在HTML中引入CSS的方法。同時,蘇萊還用到了一些簡單的css樣式來渲染右側的表格。

1、background-color:定義背景顔色;

2、border:定義元素邊框;

3、width:定義元素寬度;

4、height:定義元素高度;

5、align:定義元素的位置(居中、上、下、左、右 );

6、rowspan:跨行操作,定義水平方向上合并幾個單元格;

7、colspan:跨列操作,定義垂直方向上合并幾個單元格。

關于css樣式,蘇萊在這裡先不進行過多說明,因為蘇萊後面會專門開章節來分享CSS。目前,我們大緻知曉上面幾個簡單的css樣式就足以應付我們今天要編寫的案例了。

了解完如何在HTML中添加CSS樣式,就開始進入我們今天的主題---使用HTML表格标簽制作九宮格愛心牆吧~~~

首先,蘇萊簡單給小夥伴們介紹一下HTML表格标簽

1、<table>:定義表格;

2、<tr>:定義表格的行;

3、<td>:定義表格的列;

4、<th>:定義表格的表頭;

5、<caption>:定義表格标題;

6、<thead>:定義表格的頁眉;

7、<tbody>:定義表格的主體;

8、<tfooter>:定義表格的頁腳。

了解完上述表格标簽後,我們開始來分析九宮格愛心牆的編寫思路吧~

耗時最少的辦法是:我們寫九個三行三列的表格,設置九個表格父容器的寬度為可容納三個表格的寬度,然後設置所有表格向左浮動,最後按照愛心的排列順序在對應的單元格内放入<img>圖片标簽。

下面是蘇萊根據以上思路寫出的html代碼,類似的結構,寫九個table表格。唯一不同的地方是圖片放入單元格中的位置,比如,第二個表格中的第一張圖放在表格第二行左起第一個單元格内。

html表格背景圖怎麼添加(HTML表格标簽打造微信朋友圈九宮格愛心圖)3

接下來是css樣式

html表格背景圖怎麼添加(HTML表格标簽打造微信朋友圈九宮格愛心圖)4

這樣一個九宮格愛心牆在三到五分鐘之内就可以出來啦~效果是醬紫滴~

html表格背景圖怎麼添加(HTML表格标簽打造微信朋友圈九宮格愛心圖)5

如果有小夥伴對浮動的概念不夠了解,也沒關系。我們可以換一種更簡單的方式來寫出同樣的效果。并且這種方法隻涉及到了今天分享的知識,一句話概括它的思路就是:寫一個九行九列的表格,然後将圖片依次放入指定的單元格。

寫完後效果是醬紫滴~

html表格背景圖怎麼添加(HTML表格标簽打造微信朋友圈九宮格愛心圖)6

有小夥伴可能會問,怎麼将單元格與單元格之間的距離去掉呢?

這就涉及到了CSS中的border-collapse屬性了,這個屬性的作用是為表格設置合并邊框模型,常用的屬性值有兩個:

1、separate:上圖所示這種,單元格邊框與單元格邊框被分割開了;

2、collapse:下圖所示這種,相鄰的單元格共用一條邊框線,單元格之間沒有縫隙。

html表格背景圖怎麼添加(HTML表格标簽打造微信朋友圈九宮格愛心圖)7

如果你想将每個單元格中的邊框去掉,隻在界面留下一面愛心牆,那麼将代碼中寫好的border都注釋掉就可以達到你想要的效果了。

關于這個方法的代碼,蘇萊就不放入進來了,因為實在太簡單啦~

好啦,今天的内容就分享到這了~

小夥伴們,

現在你能自己寫出九宮格愛心圖了嗎~

有什麼問題和建議可以私信小編:"前端"

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved