【html】【一个简单的网上购物页面代码】

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接: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&copy;BookStore All Rights RESERVED</td>
    		</tr>
    	</table>
	
  </body>
</html>

所用到的图片如下











展开阅读全文

没有更多推荐了,返回首页