发表于： 2016-03-25 19:35:51
1 1671
今天完成的事情：
昨天和看了一些HTML和CSS的基础知识，刚刚花了半个小时尝试完成了task1。
因为是3*3的九宫格，我第一想法就是用<table>，用一张纯色的图片作为<td></td>里的的数据，每个格子之间的间距就用表格单元格默认的间距。在图片圆角处理的时候百度了CSS的图片圆角处理方法，用内嵌式样式表。最开始我是一张图片一个id，后来想起来可以用全局操作就尝试性的试了一下<style>* img{border-radius:8px </style>这中操作，结果依然可以显示，说明这种语法是可行的。
效果截图：
下面是最终代码：
<!DOCTYPE html>
<html>
<head>
<style>
* img{border-radius:8px}
</style>
<body>
<table width="340">
<tr>
<td>
<img src="1.png">
</td>
<td>
<img src="1.png">
</td>
<td>
<img src="1.png">
</td>
</tr>
<tr>
<td>
<img src="1.png">
</td>
<td>
<img src="1.png">
</td>
<td>
<img src="1.png">
</td>
</tr>
<tr>
<td>
<img src="1.png">
</td>
<td>
<img src="1.png">
</td>
<td>
<img src="1.png">
</td>
</tr>
</table/>
</body>
</html>
明天计划的事情：开始task2
遇到的问题：图片圆角处理方法，强大的百度解决。
返回列表
评论