大学生川菜网页制作教程 表格布局网页模板 学生HTML静态水煮鱼网页设计作业成品 简单网页制作代码 学生美食网页作品免费设计

网页技术点

表格table布局、透明底色、H5视频标签

作品介绍

本静态HTML网页作业成品设计简单，使用dreamweaver采用表格布局制作，网页中的图片使用PS裁剪制作，顶部导航使用CSS设置了透明底色效果。共3个页面，首页、文字页面、视频页面。视频采用VIDEO标签嵌入视频，代码简单，适合大一网页设计作业或对作品技术水平要求低的。

制作代码演示

导航代码

<table width="1000" height="500" border="0" id="nav">
  <tr id="menu">
    <td><a href="">网站首页</a></td>
    <td><a href="">菜品介绍</a></td>
    <td><a href="">视频教学</a></td>
  </tr>
  <tr>
    <td height="430px"></td>
    <td></td>
    <td></td>
  </tr>
</table>

图片列表

<table width="1000"  border="0" id="chuan">
  <tr>
    <td align="center"><a href="jieshao.html"><img src="image/szy1.jpg" width="495" height="260" /></a></td>
    <td align="center"><a href="shipin.html" ><img src="image/szy2.jpg" width="495" height="260" /></a></td>
  </tr>
    <tr>
    <td align="center"><a href="jieshao.html">菜品介绍</a></td>
    <td align="center"><a href="shipin.html">视频教学</a></td>
  </tr>
</table>

效果演示

成品地址

stu-works.com/html/meishi/245.html