你的位置:首页 > 网页设计

[网页设计]页面布局一


先分析做题思路

一、布局

1.因为刚刚学到表格布局,所以首先把页面划分为几个部分

3、把每一行的元素写上

(1)第一行 可以分为两列

第一列:一张图片

第二列:一行超链接(我用p包含),自动换行后,一个输入框,一个普通按钮

(3)第三行  是一张图片

(4)第四行  在td里面再加一个table 他分为3列(不直接设为3列的原因,是因为合并单元格有难度,第一行我已经设置成2列,可以自己脑补一下合并时候的怪异)

4.1 第一个单元格:有一个标题和图片

4.2 第二个单元格:明显看出标题和文字(文字每个我都用p的话,间距太大,所以就用了换行,因为还没学到ul li列表)

下面的文字都是超链接,因为要设置超链接中汉字和时间的距离,所以加了span

4.3 第三个单元格:明显 标题下面是一个table 4行2列  然后写上对应的内容

(6)第6行

一个单元格,里面两段文字

二 样式

(1)  合并单元格  只有第一行是两列,其余的都是一列,需要在第2,3,4,5,6列写上

(2)  设置第一行第二个td的内容右排列

(3)  设置hr的颜色和宽度

(4)设置第二行p标签宽度,高度,背景颜色 (记得给p标签加上class)

(6)设置超链接字体加粗

(7)设置第一个超链接左边的距离 ,用到结构伪类选择器

(8)第四行中,设置标题中文字和图片之间的距离(PS测量得到的)

(9)我发现所有内容挤在一起,是因为没给table加宽度,默认内容撑开宽度,另外默认表格为垂直居中对齐,由于这3列高度不同,所以居中后也是对不齐的,所以让他们向上对齐

在让所有列垂直居上对齐时,我选择的子类选择器,只选择子辈的td让他们垂直居上对齐

(10) 设置超链接中新闻和时间之间的距离,我给时间用span包起来用了margin-left。

(11)设置第三列,文字大小 颜色 给表格加了 class  tab2

(12)设置第三列表格之间的距离

(13)修饰完之后,发现和原图有出入标题和图片应该再向右边一点点,我采用的办法是,给每个td加宽,然后水平居中对齐

(15) 图片和超链接之间的距离

(16)  设置项目设置的大小

 

(17)  设置h4的字体大小

 

(18)  设置p的文字颜色和大小

(19)为了设置单元格之间的空白,给单元格设置宽度

(20)设置项目设置和表格距离左边的margin

(21)设置最后一单元格,高度,背景颜色,内容居中,字体大小

然后就完成了