用HTML实现网上购物页面

转自:https://blog.csdn.net/qq_27501261/article/details/79567897
作者:超级大白

先看结果


代码

  
  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>网上购物 </title>
  5. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6. <meta http-equiv="description" content="this is my page">
  7. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  9. </head>
  10. <body>
  11. <!-- 最上面的部分 购物车部分-->
  12. <table width="100%">
  13. <td>
  14. <img src="images/logo.png">
  15. </td>
  16. <td>
  17. <img src=images/cart.gif width="50" align="middle">
  18. <a href="#">购物车 </a>| <a href="#">帮助中心 </a>| <a href="#">我的账号 </a>| <a href="#">新用户注册 </a>
  19. </td>
  20. </table>
  21. <!-- 第二部分 目录部分 -->
  22. <table width="100%" bgcolor="#1C3F09" align="center">
  23. <td align="center">
  24. <font color="#ffffff">文字 生活 计算机 外语 经营 励志 社科 学术 少儿 艺术 原版 科技 考试 生活百科 <font color="yellow">全部商品目录 </font> </font>
  25. </td>
  26. </table>
  27. <!-- 第三部分 -->
  28. <table width="100%" bgcolor="#B6B684">
  29. <tr>
  30. <td align="right">
  31. Search <input type="text"/> <button type="button">搜索 </button>
  32. </td>
  33. </tr>
  34. </table>
  35. <!-- 第四部分 导引行 -->
  36. <div align="right">首页>旅游>图书列表 </div>
  37. <!-- 第五部分 商品目录 -->
  38. <h1>商品目录 </h1>
  39. <hr/>
  40. <!-- 第六部分 计算机类 -->
  41. <h1>计算机类 </h1>
  42. <br/>
  43. <!-- 第七部分 共xxx种商品 -->
  44. <span>共xxx种商品 </span>
  45. <hr>
  46. <!-- 第八部分 图片 -->
  47. <img src="images/productlist.gif" width="100%"/>
  48. <!-- 第九部分 图书 -->
  49. <table width="100%" align="center">
  50. <tr>
  51. <td align="center">
  52. <img src="bookcover/101.jpg"/>
  53. </td>
  54. <td align="center">
  55. <img src="bookcover/102.jpg"/>
  56. </td>
  57. <td align="center">
  58. <img src="bookcover/103.jpg"/>
  59. </td>
  60. <td align="center">
  61. <img src="bookcover/104.jpg"/>
  62. </td>
  63. </tr>
  64. <tr>
  65. <td align="center">书名:xxx <br/>售价:xxx </td>
  66. <td align="center">书名:xxx <br/>售价:xxx </td>
  67. <td align="center">书名:xxx <br/>售价:xxx </td>
  68. <td align="center">书名:xxx <br/>售价:xxx </td>
  69. </tr>
  70. <tr>
  71. <td align="center">
  72. <img src="bookcover/105.jpg"/>
  73. </td>
  74. <td align="center">
  75. <img src="bookcover/106.jpg"/>
  76. </td>
  77. <td align="center">
  78. <img src="bookcover/107.jpg"/>
  79. </td>
  80. <td align="center">
  81. <img src="bookcover/TS8.jpg" width="40%"/>
  82. </td>
  83. </tr>
  84. <tr>
  85. <td align="center">书名:xxx <br/>售价:xxx </td>
  86. <td align="center">书名:xxx <br/>售价:xxx </td>
  87. <td align="center">书名:xxx <br/>售价:xxx </td>
  88. <td align="center">书名:xxx <br/>售价:xxx </td>
  89. </tr>
  90. </table>
  91. <!-- 第十部分 最后 -->
  92. <table width="100%" bgcolor="#EFEEDC">
  93. <tr>
  94. <td rowspan="2">
  95. <img src="images/logo.png">
  96. </td>
  97. <td>CONTACT us </td>
  98. </tr>
  99. <tr>
  100. <td>copyight 2008&copy;BookStore All Rights RESERVED </td>
  101. </tr>
  102. </table>
  103. </body>
  104. </html>
所用到的图片如下











  • 5
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值