使用table+css布局网页综合案例6——柠檬网(适用于提升教学)

作者(出处):Lary发布时间:2016年11月27日 12:02:11查阅量:439

【准备站点环境】

1、新建一个站点,将素材拷贝到站点中使用。新建一个网页,将网页标题设置为“柠檬网首页”,并将该网页保存为index.html。

2、针对<body>标签新建CSS样式,设置背景颜色为灰色,把上、下、左、右的边界设置为0px。

【制作logo栏】

3、插入一个2行2列宽度为1000px的表格,将表格id设置为logo,对齐方式为居中对齐。合并第一列,然后插入图片logo.jpg,设置替换文本为logo,将该单元格的宽度设置为282px。

4、把第二列的两个单元格的高度分别设置为40px。

(1)把第一行的单元格设置垂直底部对齐,然后插入一个1行5列宽度为100%的表格。将第二、三、四列的宽度设置为5%,将第五列的宽度设置为10%。在第二列输入“注册|”,在第三列输入“登录|”,在第四列输入“收藏”。

(2)把第二行的单元格设置垂直顶部对齐,然后插入一个1行5列宽度为100%的表格。

(3)将第五列的宽度设置为22%,水平对齐方式为居中对齐,然后在该列插入图片guess.gif,设置替换文本为“你可能喜欢的”。

(4)将第四列的宽度设置为10%,然后插入一个按钮。选中该按钮,把值修改为“地瓜搜索”。

(5)将第三列的宽度设置为42%,水平对齐方式为居中对齐,然后插入一个文本字段。选中该文本字段,把字符宽度设置为40。

(6)将第二列设置为水平右对齐,然后插入一个“列表/菜单”。单击选中该列表菜单,在属性面板将列表值设置为“节目”和“直播”。

【制作导航菜单栏】

6、在id为logo的表格末尾插入一个1行10列宽度为1000px的表格,将表格id设置为menu,对齐方式为居中对齐。

(1)把各列的宽度设置为100,然后在第二列至第八列分别输入对应的菜单名称。

(2)对menu表格表格新建CSS样式,设置背景图像为bg.jpg,高度为31px,文字大小为12px,文字颜色为白色。

【制作主体部分】

7、在id为menu的表格末尾插入一个1行2列宽度为1000px的表格,将表格id设置main,对齐方式为居中对齐。左边列的宽度设置为750,右边列的宽度为250。对main表格新建CSS样式,设置背景颜色为白色,文字大小为12px,行高为18px,文字颜色为黑色。

8、制作优秀视频模块

(1)在左边单元格插入一个3行3列宽度为740px的表格,将表格id设置为yxsp(优秀视频的首拼),对齐方式为居中对齐。

(2)在第一行第1个单元格插入图片bai_03.jpg;在第一行第2个单元格插入图片bai_05.jpg,并将该单元格的背景设置为bai_05.jpg;在第一行第3个单元格插入图片bai_07.jpg;在第二行第1个单元格插入图片bai_09.jpg,并将该单元格的背景设置为bai_09.jpg;在第二行第3个单元格插入图片bai_15.jpg,并将该单元格的背景设置为bai_15.jpg;在第三行第1个单元格插入图片bai_17.jpg;在第三行第2个单元格插入图片bai_18.jpg,并将该单元格的背景设置为bai_18.jpg;在第三行第3个单元格插入图片bai_20.jpg。

(3)把id为yxsp的表格的第一列、第三列的宽度均设置为11,并对该表格新建CSS样式,设置上边界为10px。

(4)在第二行第2个单元格插入一个3行4列宽度为100%的表格。在第一行第1个单元格插入图片shipin_10.jpg,替换文本设置为“优秀视频”;在第一行第4个单元格插入图片more.jpg,替换文本设置为more,将该单元格的水平对齐方式设置为右对齐。

(5)在第二行的四个单元格分别插入对应的图片,然后选中这四个单元格,将水平对齐方式设置为居中对齐,高度设置为131(因为图片高度是111,在图片上方留出10px空白,在图片下方留出10px空白)。

(6)在第三行的四个单元格分别输入对应的文字,然后在文字所在的td标签中增加属性class="txt",对txt新建CSS样式设置左边填充12px。

(7)对各图片的标题设置空链接,然后对a标签新建超链接未激活的样式。把选择器中#yxsp删除掉,未删除之前是“#main #yxsp .txt a”,删除之后变为“#main .txt a”,设置修饰为无(去掉下划线);再次对a标签新建超链接被激活的样式,选择器会默认显示为“#main #yxsp .txt a”,把#yxsp删除掉,然后剪切“#main .txt a”,在下拉选项中选择“a:hover”,把a替换为刚刚剪切的内容,替换后变为“#main .txt a:hover”。设置超链接被激活时文字颜色为红色,并带下划线。

(8)在id为yxsp的表格第一行的各个td标签增加属性class="bk",对bk新建CSS样式,设置下边框为1px的虚线、线条颜色为#CC3300。至此,优秀视频模块制作完毕。

9、制作推荐节目模块

(1)选中id为yxsp的表格,然后复制。在id为yxsp的表格末尾粘贴,修改该表格的id为tjjm(推荐节目的首拼)。

(2)把显示为“优秀视频”的图片修改为“推荐节目”的图片,并把替换文本修改为“推荐节目”。

(3)把第二行的图片和第三行的文字删除掉,在第一列和第三列插入相应的图片,在第二列和第四列输入相应的文字。

(4)把第二行和第三行各个单元格的宽度设置为25%,把图片所在的单元格设置水平对齐方式为居中对齐。如果图片所在的单元格含有属性class="txt",请把该属性删除掉,这样才能保证图片居中在单元格。如果文字所在单元格没有属性class="txt",请手动增加该属性,这样才能保证文字能应用之前创建好的样式。

(5)对各图片的标题设置空链接,会自动应用之前创建好的样式。至此,推荐节目模块制作完毕。

【制作柠檬精彩频道模块】

10、单击选中main的第二列单元格,将垂直对齐方式设置为顶端对齐,然后插入一个3行1列宽度为100%的表格,将表格id设置为jcpd(精彩频道的首拼),在该表格的第二行和第三行插入对应的图片,将第二行的高度设置为92,第三行的高度设置为87。对jcpd新建CSS样式,设置上边界为7px。

(1)在表格id为jcpd的表格的第一行插入一个3行3列宽度为100%的表格。

(2)合并第一行的三个单元格,然后插入图片jing_01.jpg,替换文本为“柠檬精彩频道”。合并第三行的三个单元格,然后插入图片jing_04.jpg。

(3)在第二行第1个单元格插入图片jing_02.jpg,并设置该单元格的背景为jing_02.jpg。在第二行第2个单元格插入图片jing_03.jpg,并设置该单元格的背景为jing_03.jpg。

(4)在第二行第2个单元格插入视频文件cat.mpeg,并调整视频的宽度和高度。

【制作版权信息栏】

11、在id为main的表格末尾插入一个2行1列宽度为1000px的表格,设置表格的id为foot,对齐方式为居中对齐。

(1)在第一行插入水平线。在第二行输入对应的文字内容,并将学生姓名设置为空链接。

(2)对foot新建CSS样式,设置表格背景颜色为白色,高度为60px,文字大小为18px,文字颜色为#CC3300,文本对齐方式为居中对齐。

(3)设置超链接的两种样式:超链接未被激活时的样式为蓝色、无下划线;超链接被激活时的样式为蓝色、带下划线。

12、保存所有操作,预览网页效果。


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

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