一个简陋的大体网页布局图
把网页分成表格的形式
实现过程遇到的难点
- 表格与网页布局的转换
✔在实现过程中,把网页布局转换为表格需要对表格的格式很熟悉,理清楚行和单元格。
✔一行用标签包含起来,里一个单元格内容用标签包含起来。
实现代码如下:
<tr>
<td >
<b>三月推荐</b><br><br>
《XXX的异世界冒险》<br>
《XXX的奇妙物语》<br>
《转生成为XXX》<br>
《在地下城寻找XX》<br>
《被绑架到贵族学院的XXX》<br>
</td>
<td class="book_pic">
<img src="图片/宫村 (2).png">
</td>
<td class="book_pic">
<img src="图片/花子.png">
</td>
<td class="book_pic">
<img src="图片/辉夜.png">
</td>
<tr>
<td> </td>
<td>日漫类</td>
<td>国漫类</td>
<td>轻小说类</td>
</tr>
</tr>
✔上诉的表格实现,其实是在一行里分为了两行,下一行的第一个内容格设置为空,以此实现上图形式的表格。
- 表格中插入图片
✔按平常插入图片的方式直接在标签中插入标签即可
<td class="book_pic">
<img src="图片/宫村 (2).png">
</td>
- 表格样式的调整
✔将表格边框隐藏 (默认无边框)
✔调整单元格之间的距离
✔将单元格文字居中显示
table{
width: 1250px;
table-layout: fixed; /*列宽由表格宽度和列宽度设定。*/
border-spacing: 30px 30px; /*设置相邻单元格的边框间的距离*/
}
td{
text-align: center; /*文字居中*/
}
实现效果如下:
总结
表单设计页面并不是很方便,页面布局的调整很麻烦,不够灵活。不过做下来能加深自己对表格的理解,还是值得一试的。
最后附上完整代码链接:
https://codepen.io/hhhguihub/pen/ExWLLYM