页面布局一

先分析作题思路

1、布局

1.由于刚刚学到表格布局，因此首先把页面划分为几个部分

2.通过观察，发现这个表格能够分为6行，先把table和tr弄好

三、把每一行的元素写上

（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)设置最后一单元格，高度，背景颜色，内容居中，字体大小

而后就完成了