标签：
先分析做题思路
一、布局
1.因为刚刚学到表格布局，所以首先把页面划分为几个部分
2.经过观察，发现这个表格可以分为6行，先把table和tr弄好
3、把每一行的元素写上
（1）第一行 可以分为两列
第一列：一张图片
第二列：一行超链接（我用p包含），自动换行后，一个输入框，一个普通按钮
（2）第二行 是一个单元格
先是一个<hr/>标签
下面一行里面6个超链接，在一行，我自己的思路总习惯用p标签包着
（3）第三行 是一张图片
（4）第四行 在td里面再加一个table 他分为3列（不直接设为3列的原因，是因为合并单元格有难度，第一行我已经设置成2列，可以自己脑补一下合并时候的怪异）
4.1 第一个单元格：有一个标题和图片
4.2 第二个单元格：明显看出标题和文字（文字每个我都用p的话，间距太大，所以就用了换行，因为还没学到ul li列表）
下面的文字都是超链接，因为要设置超链接中汉字和时间的距离，所以加了span
4.3 第三个单元格：明显 标题下面是一个table 4行2列 然后写上对应的内容
（5）第5行
在标题之后，有一个table,5个单元格内容基本相似 都是一个图片 换行，一个标题，一段文字。
（6）第6行
一个单元格，里面两段文字
二 样式
（1） 合并单元格 只有第一行是两列，其余的都是一列，需要在第2,3,4,5,6列写上
（2） 设置第一行第二个td的内容右排列
（3） 设置hr的颜色和宽度
（4）设置第二行p标签宽度，高度，背景颜色 （记得给p标签加上class）
（5）p标签里面 超链接的大小，颜色，下划线 设置超链接之间的间距
（6）设置超链接字体加粗
（7）设置第一个超链接左边的距离 ，用到结构伪类选择器
（8）第四行中，设置标题中文字和图片之间的距离（PS测量得到的）
（9）我发现所有内容挤在一起，是因为没给table加宽度，默认内容撑开宽度，另外默认表格为垂直居中对齐，由于这3列高度不同，所以居中后也是对不齐的，所以让他们向上对齐
在让所有列垂直居上对齐时，我选择的子类选择器，只选择子辈的td让他们垂直居上对齐
（10） 设置超链接中新闻和时间之间的距离，我给时间用span包起来用了margin-left。
（11）设置第三列，文字大小 颜色 给表格加了 class tab2
(12)设置第三列表格之间的距离
（13）修饰完之后，发现和原图有出入标题和图片应该再向右边一点点，我采用的办法是，给每个td加宽，然后水平居中对齐
（14）这时候标题也居中了，把他拉回来
（15） 图片和超链接之间的距离
（16） 设置项目设置的大小
（17） 设置h4的字体大小
（18） 设置p的文字颜色和大小
（19）为了设置单元格之间的空白，给单元格设置宽度
（20）设置项目设置和表格距离左边的margin
(21)设置最后一单元格，高度，背景颜色，内容居中，字体大小
然后就完成了
标签：
原文地址：http://www.cnblogs.com/lp-1763501916/p/5746651.html
