網上書店Html網頁—— table實現
這個是網上某Java web學習視訊裡的第一個專案,覺得效果還行,特別適合新手練手,就記錄下來。
效果:
程式碼:
<html>
<head>
<meta charset=UTF-8">
<title>圖書商城</title>
</head>
<body>
<!-- 整個頁面 -->
<div id="page">
<!-- top -->
<div id="top">
<table width="100%">
<tr>
<td width="70%">
<img alt="logo" src="images/logo.png" />
</td>
<td>
<img alt="cart" src="images/cart.gif">
<a href="#">購物車</a>|
<a href="#">幫助中心</a>|
<a href="#">我的賬戶</a>|
<a href="#">新使用者註冊</a>
</td>
</tr>
</table>
</div>
<!-- menu -->
<div id="menu">
<table width="100%" bgcolor="#1C3F09">
<tr align="center">
<td>
<a href="#"><font color="#ffffff">文學</font></a>
<a href="#"><font color="#ffffff">生活</font></a>
<a href="#"><font color="#ffffff">計算機</font></a>
<a href="#"><font color="#ffffff">外語</font></a>
<a href="#"><font color="#ffffff">經管</font></a>
<a href="#"><font color="#ffffff">勵志</font></a>
<a href="#"><font color="#ffffff">社科</font></a>
<a href="#"><font color="#ffffff">學術</font></a>
<a href="#"><font color="#ffffff">少兒</font></a>
<a href="#"><font color="#ffffff">藝術</font></a>
<a href="#"><font color="#ffffff">原版</font></a>
<a href="#"><font color="#ffffff">科技</font></a>
<a href="#"><font color="#ffffff">考試</font></a>
<a href="#"><font color="#ffffff">生活百科</font></a>
<a href="#"><font color="yellow">全部商品目錄</font></a>
</td>
</tr>
</table>
</div>
<!-- search -->
<div id="search">
<table width="100%" bgcolor="#B6B684">
<tr align="right">
<td>
Search
<input type="text"/>
<input type="button" value="搜尋"/>
</td>
</tr>
</table>
</div>
<!-- content -->
<div id="content">
<div align="right">
首頁 > 旅遊 > 圖書列表
</div>
<h1>商品目錄</h1>
<hr/>
<h1>計算機類</h1>
<span>共xxx種商品</span>
<hr/>
<div>
<img alt="productlist" src="images/productlist.gif" width="100%">
</div>
<div>
<table width="100%">
<tr align="center">
<td>
<div>
<img alt="book" src="bookcover/101.jpg">
</div>
<div>
<span>書名:xxx</span><br/>
<span>售價:xxx</span>
</div>
</td>
<td>
<div>
<img alt="book" src="bookcover/102.jpg">
</div>
<div>
<span>書名:xxx</span><br/>
<span>售價:xxx</span>
</div>
</td>
<td>
<div>
<img alt="book" src="bookcover/103.jpg">
</div>
<div>
<span>書名:xxx</span><br/>
<span>售價:xxx</span>
</div>
</td>
<td>
<div>
<img alt="book" src="bookcover/104.jpg">
</div>
<div>
<span>書名:xxx</span><br/>
<span>售價:xxx</span>
</div>
</td>
</tr>
<tr align="center">
<td>
<div>
<img alt="book" src="bookcover/105.jpg">
</div>
<div>
<span>書名:xxx</span><br/>
<span>售價:xxx</span>
</div>
</td>
<td>
<div>
<img alt="book" src="bookcover/106.jpg">
</div>
<div>
<span>書名:xxx</span><br/>
<span>售價:xxx</span>
</div>
</td>
<td>
<div>
<img alt="book" src="bookcover/107.jpg">
</div>
<div>
<span>書名:xxx</span><br/>
<span>售價:xxx</span>
</div>
</td>
<td>
<div>
<img alt="book" src="bookcover/108.jpg" width="130" height="197">
</div>
<div>
<span>書名:xxx</span><br/>
<span>售價:xxx</span>
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- bottom -->
<div id="bottom">
<table width="100%" bgcolor="#EFEEDC">
<tr>
<td rowspan="2">
<img alt="logo" src="images/logo.png">
</td>
<td>
CONTACT US
</td>
</tr>
<tr>
<td>
copyright 2008 © BookStore All Rights RESERVED
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
程式碼裡的圖片資源見:
http://download.csdn.net/download/richard1997/10253770
相關文章
- html網頁內容如何實現上標和下標效果HTML網頁
- 把HTML插入canvas實現網頁截圖HTMLCanvas網頁
- 購書網站前端實現(HTML+CSS+JavaScript)網站前端HTMLCSSJavaScript
- html網頁新增音樂影片的實現示例HTML網頁
- 【html】網頁呼叫本地exe程式的實現方法HTML網頁
- Html網頁實現鍵盤Enter響應功能HTML網頁
- html網頁中如何實現居中效果(程式碼分享)HTML網頁
- bootstrap實現的線上教育網站首頁、頻道頁html模板boot網站HTML
- 網上開店的流程
- HTML 網頁建立HTML網頁
- HTML實體與網頁編碼HTML網頁
- 網頁中常用HTML字元實體網頁HTML字元
- javascript實現html網頁版的2048遊戲原始碼JavaScriptHTML網頁遊戲原始碼
- 超級漂亮的網上花店html靜態頁面HTML
- 網頁特效,網頁模板,pdf下載 - IT書包網頁特效
- OpenStack 網路實現(上)
- 用DataList來做一個仿噹噹網上書店的小應用
- 如何在網際網路放置 HTML 頁面HTML
- SpringMvc出現Jsp頁面不能正常解析成html網頁SpringMVCJSHTML網頁
- html5網頁佈局HTML網頁
- PHP如何實現網頁截圖?PHP網頁
- 如何實現重新整理網頁網頁
- JS實現把網頁設定為首頁JS網頁
- WPF實現html中的table控制元件HTML控制元件
- Mac上實用網頁文字編輯工具Mac網頁
- 實現java讀取網頁內容並下載網頁中出現的圖片Java網頁
- 【HTML】HTML自定義網頁頭部小圖示HTML網頁
- 提取動態html網頁內容HTML網頁
- 用HTML進行網頁佈局HTML網頁
- Html網頁標籤曝光埋點HTML網頁
- HTML網頁排版劃分練習HTML網頁
- C#抓取網頁HTML內容C#網頁HTML
- django 網站實現簡單分頁Django網站
- web網頁設計實現——04.16Web網頁
- 網頁SSH客戶端的實現網頁客戶端
- 走進網頁虛擬現實 WebVR網頁WebVR
- 網頁點選實現下載效果網頁
- JS實現網頁換膚功能效果JS網頁