转自:https://blog.csdn.net/qq_27501261/article/details/79567897
作者:超级大白
先看结果
代码
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>网上购物
</title>
-
-
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
-
<meta http-equiv="description" content="this is my page">
-
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-
-
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
-
-
</head>
-
-
<body>
-
<!-- 最上面的部分 购物车部分-->
-
<table width="100%">
-
<td>
-
<img src="images/logo.png">
-
</td>
-
<td>
-
<img src=images/cart.gif width="50" align="middle">
-
<a href="#">购物车
</a>|
<a href="#">帮助中心
</a>|
<a href="#">我的账号
</a>|
<a href="#">新用户注册
</a>
-
</td>
-
</table>
-
-
<!-- 第二部分 目录部分 -->
-
<table width="100%" bgcolor="#1C3F09" align="center">
-
<td align="center">
-
<font color="#ffffff">文字 生活 计算机 外语 经营 励志 社科 学术 少儿 艺术 原版 科技 考试 生活百科
<font color="yellow">全部商品目录
</font>
</font>
-
</td>
-
</table>
-
-
<!-- 第三部分 -->
-
<table width="100%" bgcolor="#B6B684">
-
<tr>
-
<td align="right">
-
Search
<input type="text"/>
<button type="button">搜索
</button>
-
</td>
-
</tr>
-
</table>
-
-
<!-- 第四部分 导引行 -->
-
<div align="right">首页>旅游>图书列表
</div>
-
-
<!-- 第五部分 商品目录 -->
-
<h1>商品目录
</h1>
-
<hr/>
-
-
<!-- 第六部分 计算机类 -->
-
<h1>计算机类
</h1>
-
<br/>
-
-
<!-- 第七部分 共xxx种商品 -->
-
<span>共xxx种商品
</span>
-
<hr>
-
-
<!-- 第八部分 图片 -->
-
<img src="images/productlist.gif" width="100%"/>
-
-
<!-- 第九部分 图书 -->
-
<table width="100%" align="center">
-
<tr>
-
<td align="center">
-
<img src="bookcover/101.jpg"/>
-
</td>
-
<td align="center">
-
<img src="bookcover/102.jpg"/>
-
</td>
-
<td align="center">
-
<img src="bookcover/103.jpg"/>
-
</td>
-
<td align="center">
-
<img src="bookcover/104.jpg"/>
-
</td>
-
</tr>
-
<tr>
-
<td align="center">书名:xxx
<br/>售价:xxx
</td>
-
<td align="center">书名:xxx
<br/>售价:xxx
</td>
-
<td align="center">书名:xxx
<br/>售价:xxx
</td>
-
<td align="center">书名:xxx
<br/>售价:xxx
</td>
-
</tr>
-
<tr>
-
<td align="center">
-
<img src="bookcover/105.jpg"/>
-
</td>
-
<td align="center">
-
<img src="bookcover/106.jpg"/>
-
</td>
-
<td align="center">
-
<img src="bookcover/107.jpg"/>
-
</td>
-
<td align="center">
-
<img src="bookcover/TS8.jpg" width="40%"/>
-
</td>
-
</tr>
-
<tr>
-
<td align="center">书名:xxx
<br/>售价:xxx
</td>
-
<td align="center">书名:xxx
<br/>售价:xxx
</td>
-
<td align="center">书名:xxx
<br/>售价:xxx
</td>
-
<td align="center">书名:xxx
<br/>售价:xxx
</td>
-
</tr>
-
</table>
-
-
<!-- 第十部分 最后 -->
-
<table width="100%" bgcolor="#EFEEDC">
-
<tr>
-
<td rowspan="2">
-
<img src="images/logo.png">
-
</td>
-
<td>CONTACT us
</td>
-
</tr>
-
<tr>
-
<td>copyight 2008©BookStore All Rights RESERVED
</td>
-
</tr>
-
</table>
-
-
</body>
-
</html>