先看结果


代码
<!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&copy;BookStore All Rights RESERVED</td>
    		</tr>
    	</table>
	
  </body>
</html>
所用到的图片如下











# html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟