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

2021年9月20日 6点热度 0条评论 来源: STU网页设计

学生川菜水煮鱼网页设计作品

网页技术点

表格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

    原文作者:STU网页设计
    原文地址: https://blog.csdn.net/LILIXING_COM/article/details/110227779
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。