品优购商品列表页html记录
发布时间
阅读量：
阅读量
list.html
> 1. <!DOCTYPE html>
>
> 2. <html lang="en">
>
> 3.
>
> 4. <head>
>
> 5. <meta charset="UTF-8">
>
> 6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
>
> 7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
>
> 8. <title>商品列表页面</title>
>
> 9. <link rel="shortcut icon" href="favicon.ico" />
>
> 10. <!-- 初始化样式 -->
>
> 11. <link rel="stylesheet" href="./font/css/all.css">
>
> 12. <link rel="stylesheet" href="css/base.css">
>
> 13. <link rel="stylesheet" href="css/common.css">
>
> 14. <link rel="stylesheet" href="css/list.css">
>
> 15.
>
> 16. </head>
>
> 17.
>
> 18. <body>
>
> 19. <div class="head">
>
> 20. <div class="w">
>
> 21. <div class="fl">
>
> 22. <ul>
>
> 23. <li>品优购欢迎您！</li>
>
> 24. <li><a href="#">请登录 </a><a href="register.html"><span>免费注册</span></a></li>
>
> 25. </ul>
>
> 26. </div>
>
> 27. <div class="fr">
>
> 28. <ul>
>
> 29. <li><a href="#">我的订单</a></li>
>
> 30. <li><a href="#">我的品优购<i class="font-common"></i></a> </li>
>
> 31. <li><a href="#">品优购会员</a></li>
>
> 32. <li><a href="#">企业采购</a></li>
>
> 33. <li><a href="#">关注品优购<i class="font-common"></i></a></li>
>
> 34. <li><a href="#">客户服务<i class="font-common"></i></a>
>
> 35. <div class="dropdown">
>
> 36. <ul class="menu">
>
> 37. <li><a class="aNoBoard" href="#">订单咨询</a></li>
>
> 38. <li><a class="aNoBoard" href="#">物流查询</a></li>
>
> 39. <li><a class="aNoBoard" href="#">反馈</a></li>
>
> 40. </ul>
>
> 41. </div>
>
> 42. </li>
>
> 43. <li ><a class="aNoBoard" href="#">网站导航<i class="font-common"></i></a></li>
>
> 44. </ul>
>
> 45. </div>
>
> 46. </div>
>
> 47. </div>
>
> 48. <div class="header w">
>
> 49. <div class="logo fl">
>
> 50. <a href="index.html"><img src="./images/logo.png" alt=""></a>
>
> 51. </div>
>
> 52. <div class="search">
>
> 53. <input class="fl " type="text" value="请搜索内容...">
>
> 54. <button class="fl ">搜索</button>
>
> 55. </div>
>
> 56. <div class="hotwords">
>
> 57. <a href="">优惠购首发</a>
>
> 58. <a href="">亿元优惠</a>
>
> 59. <a href="">9.9元团购</a>
>
> 60. <a href="">美满99减30</a>
>
> 61. <a href="">办公用品</a>
>
> 62. <a href="">电脑</a>
>
> 63. <a href="">通信</a>
>
> 64. </div>
>
> 65. <div class="shopcar">
>
> 66. <i class="fa fa-shopping-cart" aria-hidden="true"></i>
>
> 67. 我的购物车
>
> 68. <i class="fa fa-angle-right" aria-hidden="true"></i>
>
> 69. <div class="eight">80</div>
>
> 70. </div>
>
> 71. </div>
>
> 72. <div class="list">
>
> 73. <div class="nav">
>
> 74. <ul>
>
> 75. <a href="#"><li><h5>品牌秒杀</h5></li></a>
>
> 76. <a href="#"><li><h5>即将售罄</h5></li></a>
>
> 77. <a href="#"> <li><h5>超值低价</h5></li></a>
>
> 78. <a href="#"> <li><p>女装</p></li></a>
>
> 79. <a href="#"> <li><p>女鞋</p></li></a>
>
> 80. <a href="#"> <li><p>男装</p></li></a>
>
> 81. <a href="#"> <li><p>男鞋</p></li></a>
>
> 82. <a href="#"> <li><p>母婴童装</p></li></a>
>
> 83. <a href="#"> <li><p>食品</p></li></a>
>
> 84. <a href="#"> <li><p>智能数码</p></li></a>
>
> 85. <a href="#"> <li><p>户外运动</p></li></a>
>
> 86. <a href="#"> <li><p>更多分类</p></li></a>
>
> 87. </ul>
>
> 88. </div>
>
> 89. </div>
>
> 90. <div class="w">
>
> 91. <div class="main2">
>
> 92. <div class="list1">
>
> 93. <img src="./upload/bg_03.png">
>
> 94. </div>
>
> 95. <div class="list2">
>
> 96. <ul>
>
> 97. <li>
>
> 98. <a href="detail.html"><img src="./upload/mobile.jpg"></a>
>
> 99. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 100. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 101. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 102. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 103. </li>
>
> 104.
>
> 105. <li>
>
> 106. <img src="./upload/mobile.jpg">
>
> 107. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 108. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 109. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 110. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 111. </li>
>
> 112.
>
> 113. <li>
>
> 114. <img src="./upload/mobile.jpg">
>
> 115. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 116. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 117. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 118. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 119. </li>
>
> 120.
>
> 121. <li>
>
> 122. <img src="./upload/mobile.jpg">
>
> 123. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 124. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 125. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 126. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 127. </li>
>
> 128. </ul>
>
> 129. <ul>
>
> 130. <li>
>
> 131. <img src="./upload/mobile.jpg">
>
> 132. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 133. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 134. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 135. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 136. </li>
>
> 137.
>
> 138. <li>
>
> 139. <img src="./upload/mobile.jpg">
>
> 140. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 141. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 142. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 143. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 144. </li>
>
> 145.
>
> 146. <li>
>
> 147. <img src="./upload/mobile.jpg">
>
> 148. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 149. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 150. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 151. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 152. </li>
>
> 153.
>
> 154. <li>
>
> 155. <img src="./upload/mobile.jpg">
>
> 156. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 157. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 158. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 159. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 160. </li>
>
> 161. </ul>
>
> 162. <ul>
>
> 163. <li>
>
> 164. <img src="./upload/mobile.jpg">
>
> 165. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 166. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 167. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 168. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 169. </li>
>
> 170.
>
> 171. <li>
>
> 172. <img src="./upload/mobile.jpg">
>
> 173. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 174. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 175. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 176. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 177. </li>
>
> 178.
>
> 179. <li>
>
> 180. <img src="./upload/mobile.jpg">
>
> 181. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 182. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 183. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 184. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 185. </li>
>
> 186.
>
> 187. <li>
>
> 188. <img src="./upload/mobile.jpg">
>
> 189. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 190. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 191. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 192. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 193. </li>
>
> 194. </ul>
>
> 195. <ul>
>
> 196. <li>
>
> 197. <img src="./upload/mobile.jpg">
>
> 198. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 199. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 200. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 201. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 202. </li>
>
> 203.
>
> 204. <li>
>
> 205. <img src="./upload/mobile.jpg">
>
> 206. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 207. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 208. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 209. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 210. </li>
>
> 211.
>
> 212. <li>
>
> 213. <img src="./upload/mobile.jpg">
>
> 214. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 215. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 216. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 217. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 218. </li>
>
> 219.
>
> 220. <li>
>
> 221. <img src="./upload/mobile.jpg">
>
> 222. <p>Apple苹果iphone 6s Plus (A1699) 32G金色移动联通电信4G手机<br>
>
> 223. <i>¥6088</i> <a1>¥6988</a1></p>
>
> 224. <div class="c1">已售87%</div><div class="box c1"></div> <div class="c1">剩余<b>29</b>件</div>
>
> 225. <a href="#"><div class="click"> 立即抢购</div></a>
>
> 226. </li>
>
> 227. </ul>
>
> 228. </div>
>
> 229. </div>
>
> 230. </div>
>
> 231. <!--head结束-->
>
> 232. <!-- 底部区域start -->
>
> 233. <div class="footer">
>
> 234. <div class="w">
>
> 235. <!-- mod_service开始 -->
>
> 236. <div class="mod_service">
>
> 237. <ul>
>
> 238. <li>
>
> 239. <h5 class="one"></h5>
>
> 240. <div class="service_txt">
>
> 241. <h4>正品保障</h4>
>
> 242. <p>正品保障，提供发票</p>
>
> 243. </div>
>
> 244. </li>
>
> 245. <li>
>
> 246. <h5 class="two"></h5>
>
> 247. <div class="service_txt">
>
> 248. <h4>极速物流</h4>
>
> 249. <p>急速物流，急速送达</p>
>
> 250. </div>
>
> 251.
>
> 252. </li>
>
> 253. <li>
>
> 254. <h5 class="three"></h5>
>
> 255. <div class="service_txt">
>
> 256. <h4>无忧售后</h4>
>
> 257. <p>7天无理由退换货</p>
>
> 258. </div>
>
> 259.
>
> 260. </li>
>
> 261. <li>
>
> 262. <h5 class="four"></h5>
>
> 263. <div class="service_txt">
>
> 264. <h4>特殊服务</h4>
>
> 265. <p>私人定制家电套餐</p>
>
> 266. </div>
>
> 267. </li>
>
> 268. <li>
>
> 269. <h5 class="five"></h5>
>
> 270. <div class="service_txt">
>
> 271. <h4>帮助中心</h4>
>
> 272. <p>您的购物指南</p>
>
> 273. </div>
>
> 274. </li>
>
> 275. </ul>
>
> 276. </div>
>
> 277. <!-- mod_service结束 -->
>
> 278. <!-- mod_help开始 -->
>
> 279. <div class="mod_help">
>
> 280. <dl>
>
> 281. <dt>购物指南</dt>
>
> 282. <dd>购物流程</dd>
>
> 283. <dd>会员介绍</dd>
>
> 284. <dd>生活旅行/团购</dd>
>
> 285. <dd>常见问题</dd>
>
> 286. <dd>大家电</dd>
>
> 287. <dd>联系客服</dd>
>
> 288. </dl>
>
> 289. <dl>
>
> 290. <dt>配送方式</dt>
>
> 291. <dd>上门自提</dd>
>
> 292. <dd>211限时达</dd>
>
> 293. <dd>配送服务查询</dd>
>
> 294. <dd>配送费收取标准</dd>
>
> 295. <dd>海外配送</dd>
>
> 296. </dl>
>
> 297. <dl>
>
> 298. <dt>支付方式</dt>
>
> 299. <dd>货到付款</dd>
>
> 300. <dd>在线支付</dd>
>
> 301. <dd>分期付款</dd>
>
> 302. <dd>邮局汇款</dd>
>
> 303. <dd>公司转账</dd>
>
> 304. </dl>
>
> 305. <dl>
>
> 306. <dt>售后服务</dt>
>
> 307. <dd>售后政策</dd>
>
> 308. <dd>价格保护</dd>
>
> 309. <dd>退款说明</dd>
>
> 310. <dd>返修/退换货</dd>
>
> 311. <dd>取消订单</dd>
>
> 312. </dl>
>
> 313. <dl>
>
> 314. <dt>特色服务</dt>
>
> 315. <dd>夺宝岛</dd>
>
> 316. <dd>DIY装机</dd>
>
> 317. <dd>延保服务</dd>
>
> 318. <dd>品优购E卡</dd>
>
> 319. <dd>品优购通信</dd>
>
> 320. </dl>
>
> 321. <dl>
>
> 322. <dt>帮助中心</dt>
>
> 323. <dd>
>
> 324. <img src="images/wx_cz.jpg" alt="">
>
> 325. 品优购客户端
>
> 326. </dd>
>
> 327. </dl>
>
> 328.
>
> 329. </div>
>
> 330. <!-- mod_help结束 -->
>
> 331. <div class="mod_copyright">
>
> 332. <div class="links">
>
> 333. <a href="#">关于我们 </a> |
>
> 334. <a href="#">联系我们 </a> |
>
> 335. <a href="#">联系客服 </a> |
>
> 336. <a href="#">商家入驻 </a> |
>
> 337. <a href="#">营销中心 </a> |
>
> 338. <a href="#">手机品优购 </a> |
>
> 339. <a href="#">友情链接 </a> |
>
> 340. <a href="#">销售联盟 </a> |
>
> 341. <a href="#">品优购社区 </a> |
>
> 342. <a href="#">品优购公益 </a> |
>
> 343. <a href="#">English Site</a> |
>
> 344. <a href="#">Contact U</a>
>
> 345. </div>
>
> 346. <div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:
>
> 347. zhanghj+itcast.cn <br>
>
> 348. 京ICP备08001421号京公网安备110108007702</div>
>
> 349. </div>
>
> 350. </div>
>
> 351. </div>
>
> 352. <!-- 底部区域end -->
>
> 353. </body>
>
> 354.
>
> 355. </html>
>
>
>
>
> ```
>
>
list.css.list{
border-bottom: 2px solid #782A36;}
.nav{
width:1200px;
margin:0 auto;}
.nav li{
height:20px;
float:left;
margin:0 20px;}
p{
height:100%;
font-size: 15px;
line-height: 50px;}
h5{
font-size: 20px;
margin:10px;}
.list2{
width:1200px;}
.list2 li{
float:left;
width:280px;
margin:0 10px;}
li i{
color:#CF1A2D;
font-size: 20px;
font-weight: bold;}
li a1{
text-decoration: line-through;}
li b{
color:#CF1A2D;}
.c1{
float:left;
margin:0 5px 5px 5px;}
.box{
width:146px;
height:14px;
background-color: red;
border-radius: 10px;}
.click{
background-color: #CF1A2D;
height:55px;}
.click {
font-size: 20px;
text-align: center;
color: aliceblue;}
.footer {
clear: both;
padding-top: 30px;
height: 415px;
background-color: #f5f5f5;}
.mod_service {
height: 80px;
border-bottom: 1px solid #e5e5e5;}
.mod_service ul li {
width: 240px;
height: 80px;
float: left;
/* padding-left: 35px; */}
.mod_service ul li h5 {
float: left;
width: 50px;
height: 50px;
padding-right: 60px;
background:url('../images/icons.png') no-repeat ;}
.mod_service ul li .one {
background-position: -252px -3px;}
.mod_service ul li .two {
background-position: -252px -54px;}
.mod_service ul li .three {
background-position: -252px -105px;}
.mod_service ul li .four {
background-position: -252px -156px;}
.mod_service ul li .five {
background-position: -252px -207px;}
.service_txt {
height: 50px;
line-height: 25px;}
.service_txt h4 {
font-size: 14px;}
.service_txt p {
font-size: 12px;}
.mod_help {
height: 188px;
border-bottom: 1px solid #e5e5e5;}
.mod_help dl {
float: left;
width: 200px;
height: 188px;
margin-left: 15px;}
.mod_help dl:last-child {
text-align: center;
width: 90px;}
.mod_help dl dt {
font-size: 16px;
font-weight: 700;
padding: 20px 0 10px 0;}
.mod_help dl dd {
font-size: 12px;
padding-bottom: 5px;}
/* .mod_help缁撴潫浜� */
.mod_copyright {
text-align: center;
padding-top: 20px;}
.mod_copyright .links {
padding-bottom: 15px;}
.mod_copyright .links a {
padding: 0 10px;}
.mod_copyright .copyright {
line-height: 24px;}
全部评论 (0)
还没有任何评论哟~