前话
终于迎来了第三弹,本篇完成两个菜单的制作,分别是"家乡美景"和"家乡美食",这也是最近在许多小伙伴的要求下抽空完成的教程,emmm,希望大家喜欢~规划
好了言归正传,书接上文,开始设计第三页家乡美景和第四页家乡美食,还是那句话,观阅此篇之前强烈建议先阅读第一弹和第二弹,因为此篇是以其为基础的。第一弹:制作家乡网页设计的全过程(图文教程)第二弹:制作家乡网页设计的全过程(图文教程) 制作 由于有之前两篇作为基础,本篇教程节奏会快一点1、打开上期制作的文件夹,复制一份introduce.html,并且重命名为landscape.html,此页为 【 家乡美景】 页2、编辑landscape.html家乡美景需要放家乡的照片,因此设计布局为4宫格敲黑板了...这里的布局和之前有所不同,这里用到了表格嵌套。可能有小伙伴要问什么是表格嵌套?嵌套表格,就是在一个大的表格中,再嵌进去一个或几个小的表格。 关键代码<tr> <td> <table> <tr> <td> <img src="images/1.jpg" style="width:500px;height:300px;"/> td> <td> <img src="images/2.jpg" style="width:500px;height:300px;"/> td> tr> <tr> <td> <img src="images/3.jpg" style="width:500px;height:300px;"/> td> <td> <img src="images/4.jpg" style="width:500px;height:300px;"/> td> tr> table> td>tr>
效果图
3、再复制一份introduce.html,并且重命名为food.html,此页为 【
家乡美食】 页
关键代码
<tr> <td> <table> <tr> <td style="width:200px;vertical-align:top;"> <img src="images/5.jpg" style="width:200px;height:625px;"/> td> <td style="width:800px;"> <table style="width:800px;vertical-align:top;"> <tr> <td style="vertical-align:top;"> <img src="images/6.jpg" style="width:400px;height:290px;"/> td> <td style="vertical-align:top;"> <img src="images/7.jpg" style="width:400px;height:290px;"/> td> tr> <tr> <td style="vertical-align:top;" colspan=2> <img src="images/8.jpg" style="width:800px;"/> td> tr> table> td> tr> table> td>tr>
效果图
百度云下载
链接:
https://pan.baidu.com/s/1d5cMbN7ivCYrwNGKlqYJ6w
提取码:
znrg