小夥伴們，又見啦！
一、HTML 網上書城案例
1.頁頭

實現程式碼：

<div>
	<table>
		<tr>
		 	<td><img src="圖片路徑"  height="50" width="100" /></td>
		</tr>
    </table>
</div>

二、功能欄模組

實現方式：

<div>
		<table width="100%" bgcolor="#1C3F09">
				<tr align="center">
						<td><a><font size="4" color="white">文化</font></a></td>
						<td><a><font size="4" color="white">文化</font></a></td>
						<td><a><font size="4" color="white">文化</font></a></td>
						<td><a><font size="4" color="white">文化</font></a></td>
						<td><a><font size="4" color="white">文化</font></a></td>
						<td><a><font size="4" color="white">文化</font></a></td>
						<td><a><font size="4" color="white">文化</font></a></td>
						<td><a><font size="4" color="white">文化</font></a></td>
						<td><a><font size="4" color="white">文化</font></a></td>
						<td><a><font size="4" color="white">文化</font></a></td>
				</tr>
		</table>
</div>
 

三、搜尋欄模組

實現方式：

<div>
<table width="100%" bgcolor="顏色">
	<tr>
		<td align="right">
			 serach &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		 	<input  type="text">
		 	<input  type="button" value="搜一下子">
		</td>
    </tr>
</table>
</div>
 

四、內容模組

實現方式：

    <h1>商品目錄</h1>
    <hr/>
    <h3>計算機類</h3>
    <hr width="10%" align="left"/>
    <div>
            <img  width="100%" height="100" src="img/74238512b31bb0519d8d85773c7adab44bede09d.jpg">
    </div>
    <table width="100%">
        <tr >
            <td align="center">
                <div><img width="200" height="300" src="img/74238512b31bb0519d8d85773c7adab44bede09d.jpg"></div>
                <span>價格：888¥</span><br/>
                <span>名稱：H1Z1</span>
            </td>
            <td align="center">
                <div><img width="200" height="300" src="img/74238512b31bb0519d8d85773c7adab44bede09d.jpg"></div>
                <span>價格：888¥</span><br/>
                <span>名稱：H1Z1</span>
            </td>
            <td align="center">
                <div><img width="200" height="300" src="img/74238512b31bb0519d8d85773c7adab44bede09d.jpg"></div>
                <span>價格：888¥</span><br/>
                <span>名稱：H1Z1</span>
            </td>
        </tr>
        <tr >
            <td align="center">
                <div><img width="200" height="300" src="img/74238512b31bb0519d8d85773c7adab44bede09d.jpg"></div>
                <span>價格：888¥</span><br/>
                <span>名稱：H1Z1</span>
            </td>
            <td align="center">
                <div><img width="200" height="300" src="img/74238512b31bb0519d8d85773c7adab44bede09d.jpg"></div>
                <span>價格：888¥</span><br/>
                <span>名稱：H1Z1</span>
            </td>
            <td align="center">
                <div><img width="200" height="300" src="img/74238512b31bb0519d8d85773c7adab44bede09d.jpg"></div>
                <span>價格：888¥</span><br/>
                <span>名稱：H1Z1</span>
            </td>
        </tr>
    </table>
  </div>
 

五、尾部模組

實現方式：

<div>
      <table width="100%">
          <tr>
            <td rowspan="2">
                <img  width="100" src="img/74238512b31bb0519d8d85773c7adab44bede09d.jpg">
            </td>
              <td align="right">CONTACT US</td>
          </tr>
          <tr>
              <td width="100%" align="right">copyright 2018 @ BookStores All Rights RESERVe</td>
          </tr>
      </table>
  </div>

加油！打卡第三天啦。
對身邊的讓懷著友好的心態，一切都會好的！