網頁技術點

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

效果演示

成品地址

lilixing.com/html/meishi/245.html