小夥伴們,晚上好呀~
今天決定撸一個最近風靡微信朋友圈的九宮格愛心圖,
就是下圖醬紫的效果啦~
其實它的制作原理很簡單,前提是你得掌握HTML的表格标簽。
在給大家正式分享表格标簽之前,我們先來學習一下如何在HTML中添加css樣式吧,因為待會我們馬上就要用上它啦~
CSS全稱Cascading Style Sheets,是用于渲染HTML元素标簽的樣式,前面我們說過HTML是構成Web世界的一磚一瓦,那麼CSS就是用來給這個世界增添色彩的畫筆。
CSS可以通過以下幾種方式添加到HTML中:
1、内聯樣式(位于HTML元素内部):個别元素需要特殊樣式時可以使用;
2、内部樣式表(位于标簽内部):在HTML文檔頭部<head>區域内使用<style>元素來包裹CSS;
3、外部樣式表:引入外部CSS文件。
上圖中,蘇萊向大家演示了三種在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表格。唯一不同的地方是圖片放入單元格中的位置,比如,第二個表格中的第一張圖放在表格第二行左起第一個單元格内。
接下來是css樣式
這樣一個九宮格愛心牆在三到五分鐘之内就可以出來啦~效果是醬紫滴~
如果有小夥伴對浮動的概念不夠了解,也沒關系。我們可以換一種更簡單的方式來寫出同樣的效果。并且這種方法隻涉及到了今天分享的知識,一句話概括它的思路就是:寫一個九行九列的表格,然後将圖片依次放入指定的單元格。
寫完後效果是醬紫滴~
有小夥伴可能會問,怎麼将單元格與單元格之間的距離去掉呢?
這就涉及到了CSS中的border-collapse屬性了,這個屬性的作用是為表格設置合并邊框模型,常用的屬性值有兩個:
1、separate:上圖所示這種,單元格邊框與單元格邊框被分割開了;
2、collapse:下圖所示這種,相鄰的單元格共用一條邊框線,單元格之間沒有縫隙。
如果你想将每個單元格中的邊框去掉,隻在界面留下一面愛心牆,那麼将代碼中寫好的border都注釋掉就可以達到你想要的效果了。
關于這個方法的代碼,蘇萊就不放入進來了,因為實在太簡單啦~
好啦,今天的内容就分享到這了~
小夥伴們,
現在你能自己寫出九宮格愛心圖了嗎~
有什麼問題和建議可以私信小編:"前端"
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!