您的位置：首页 > Web前端 > HTML

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

2018-03-15 14:53 671 查看

先看结果





代码

<!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>

所用到的图片如下





















内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 一个简单的网上购物页面代码
相关文章推荐
新的分享
章节导航