所以我在看
talk
由谷歌的MarissaMayer写的关于加快谷歌网页速度的文章。他们发现一个购物车图标增加了2%的加载时间,然后用户搜索量减少了2%。他们设法用HTML表替换了图标。
这是我画购物车的尝试:(
live example page
)
<html>
<head>
<style>
table {border-collapse: collapse;}
th, td {width: 8px; height: 8px;}
th {background-color: blue;}
td {background-color: white;}
</style>
</head>
<body>
<table>
<!-- this row is just to see alignment -->
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<!-- handle -->
<tr>
<td colspan="14"></td>
<th colspan="3"></th>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="13"></td>
<th colspan="2"></th>
<td colspan="1"></td>
<th colspan="2"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="13"></td>
<th colspan="2"></th>
<td colspan="1"></td>
<th colspan="2"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="14"></td>
<th colspan="3"></th>
<td colspan="3"></td>
</tr>
<!-- main body -->
<tr>
<td colspan="5"></td>
<th colspan="13"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="13"></th>
<td colspan="2"></td>
</tr>
<!-- wheels -->
<tr>
<td colspan="7"></td>
<th colspan="2"></th>
<td colspan="4"></td>
<th colspan="2"></th>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="6"></td>
<th colspan="4"></th>
<td colspan="2"></td>
<th colspan="4"></th>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="7"></td>
<th colspan="2"></th>
<td colspan="4"></td>
<th colspan="2"></th>
<td colspan="5"></td>
</tr>
</table>
</body>
</html>
什么可以
你
在桌子上画画?!
给我们留下深刻印象。
