专业编程基础技术教程

网站首页 > 基础教程 正文

HTML表格标签打造微信朋友圈九宫格爱心图

ccvgpt 2024-11-03 13:24:20 基础教程 50 ℃

小伙伴们，晚上好呀~

今天决定撸一个最近风靡微信朋友圈的九宫格爱心图，

HTML表格标签打造微信朋友圈九宫格爱心图

就是下图酱紫的效果啦~


其实它的制作原理很简单，前提是你得掌握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都注释掉就可以达到你想要的效果了。

关于这个方法的代码，苏莱就不放入进来了，因为实在太简单啦~

好啦，今天的内容就分享到这了~

小伙伴们，

现在你能自己写出九宫格爱心图了吗~

有什么问题和建议可以私信小编:"前端"

Tags：

猜你喜欢

最近发表
标签列表