使用table+css布局网页综合案例7——心灵小站主页完美版(适用于高级教学)

作者(出处):Lary发布时间:2017年7月24日 13:42:33查阅量:349

一、准备站点环境

1、新建一个站点,将素材拷贝到站点中使用。新建一个网页,把网页的标题设置为“心灵小站主页”,将其保存为index.html。

2、建立css样式文件夹,对body标签新建样式,把边界设置为0px。

二、制作logo模块

1、插入一个1行1列、宽度1000px的表格,表格的边框粗细、单元格边距、单元格间距均为0。

2、设置表格id为logo,居中对齐。

3、在表格中插入对应的图片index_01.gif,并设置替换文本为logo。

三、制作菜单模块

1、在logo表格末尾插入一个1行1列、宽度1000px的表格,表格的边框粗细、单元格边距、单元格间距均为0。

2、设置表格id为menu,居中对齐。把单元格设置为水平右对齐,在表格中插入对应的图片。

3、对menu表格新建样式,设置背景图片。

4、应用图片热区超链接的知识,对各个菜单制作空链接。

四、制作本站公告、最新素材、最新模板、最新日记、最新靓照模块

1、制作公用的外层表格及样式

(1)在menu表格末尾插入一个1行2列、宽度1000px的表格,表格的边框粗细、单元格边距、单元格间距均为0。

(2)在<table>标签中增加属性class="main",设置表格居中对齐。设置左边单元格宽度为280px,右边单元格宽度为720px。

(3)对main新建样式,设置上边界为10px。

2、把本站公告制作成公用模块

(1)在左边单元格插入一个6行2列、宽度270px的表格,表格的边框粗细、单元格边距、单元格间距均为0。

(2)在当前的<table>标签中增加属性class="common",合并第1行,输入“本站公告”,将其设置为标题1。

(3)把对应的公告标题和日期粘贴到对应的单元格中,并对公告标题设置空链接。

(4)对common新建样式,设置1px的实线边框,边框颜色为#999999。

(5)对h1新建样式,设置背景图片为index_09.gif,设置高度34px。设置文字大小18px、行高34px,文字缩进12px。设置边界为0px。

(6)在common表格的第2行公告标题所在<td>标签中增加属性class="bt",对bt新建样式,设置文字大小12px、行高28px、文字颜色为黑色。

(7)继续增加属性tb1,对tb1新建样式,设置背景图片为article_arrow2.gif、不重复、水平位置6px。

(8)继续增加属性bk,对bk新建样式,设置1px的虚线下边框,边框颜色为#999999。

(9)编辑bt样式,设置文字缩进15px。

(10)将bt、tb1、bk样式应用到下方的公告标题单元格。注意:最后一行不需要应用bk样式。

(11)在common表格的第2行公告日期所在<td>标签中增加属性class="rq",对rq新建样式,设置文字大小12px、行高28px、文字颜色为#666666。设置文字右对齐,右边填充8px。

(12)把rq样式应用到下方的公告日期单元格。

(13)把bk样式应用到公告日期所在单元格,注意:最后一行不需要应用bk样式。

(14)对a标签建立样式,设置文字颜色为黑色、无下划线。

(15)对a标签建立激活样式,设置文字颜色为蓝色、有下划线。

3、制作最新素材、最新模板、最新日记模块

(1)复制main表格粘贴到main表格的末尾,将右边列拆分为2列。在拆分后的2列中,把左边列宽度设置为280px,右边列宽度设置为440px。

(2)把“本站公告”改为“最新素材”,把对应的公告标题改为素材标题,然后删除日期。

(3)把tb1改为tb2,对tb2新建样式,设置背景图片为article_arrow1.gif、不重复、水平位置5px。

(4)把“最新素材”表格复制到右边280px的单元格中(“最新素材”表格实际是common表格,但为了减少工作量、提高工作效率,所以不要复制“本站公告”表格)。

(5)把“最新素材”改为“最新模板”,把对应的素材标题改为模板标题。

(6)把“最新模板”表格复制到440px的单元格中,将该表格的宽度修改为440px。

(7)把“最新模板”改为“最新日记”,把对应的模板标题改为日记标题,把日期粘贴到对应的单元格中。

4、制作最新靓照模块

(1)把720px的单元格设置为垂直顶端,然后插入一个3行6列、宽度720px的表格,表格的边框粗细、单元格边距、单元格间距均为0,对表格应用common样式。

(2)合并第1行,输入“最新靓照”,并设置为标题1。

(3)在第2行的单元格中分别插入对应的图片,把每列的宽度设置为120px,水平居中、垂直居中。

(4)把图片所在行设置高度为106px,把文字粘贴到第3行对应单元格中。

(5)在第3行的各个单元格增加属性class="txt",对txt新建样式,设置文字大小12px、行高19px、文字颜色为#333333,左右填充8px。

(6)对图片和图片说明制作空链接。

五、制作版权模块

1、在main表格末尾插入一个1行2列、宽度1000px的表格,表格的边框粗细、单元格边距、单元格间距均为0。

2、把表格id设置为foot,居中对齐,左边列垂直底部。

3、对E-mail地址制作超链接,链接地址为给定的邮箱地址,目标为_blank,替换为欢迎联系我。

4、对foot新建样式,设置上边界10px。

六、测试效果

注意用各个主流的浏览器测试最终效果。如果效果有出入,请完善CSS样式即可。


本案例所使用的素材请联系QQ 1617818397 索取。


百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2017
点击这里给我发消息