當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

品优购商城——列表页

發布時間：2024/3/12 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了品优购商城——列表页小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果圖：

列表頁文件 list.html?

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>列表頁-綜合網購首選-正品低廉,品質保障,配送及時,輕松購物!</title><meta name="description"content="品優購商城-專業的綜合網上購物商城,銷售家電,數碼通訊,電腦,家居百貨,服裝服飾,母嬰,圖書,食品等數萬個品牌優質商品.便捷,誠信的服務,為您提供愉悅的網上購物體驗!"/><meta name="keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡"/><link rel="shortcut icon" href="favicon.ico"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/list.css"> </head> <body>  <section class="shortcut"><div class="w"><div class="fl"><ul><li>品優購歡迎您!</li><li><a href="#"> 請登錄</a><a href="register.html" id="zhu-ce">免費注冊</a></li></ul></div><div class="fr"><ul><li><a href="#">我的訂單</a></li><li class="shu"></li><li class="arrow-icon"><a href="#">我的品優購 ∨</a></li><li class="shu"></li><li><a href="#">品優購會員</a></li><li class="shu"></li><li><a href="#">企業采購</a></li><li class="shu"></li><li class="arrow-icon"><a href="#">關注品優購 ∨</a></li><li class="shu"></li><li class="arrow-icon"><a href="#">客戶服務 ∨</a></li><li class="shu"></li><li class="arrow-icon"><a href="#">網站導航 ∨</a></li></ul></div></div> </section>  <header class="header w"><div class="logo w"><h1><a href="index.html" title="品優購商城">品優購商城</a></h1></div><div class="sk"><img src="images/sk.png" alt=""></div><div><div class="search"><input class="text" type="text" placeholder="請輸入內容..."><button class="btn">搜索</button></div><div class="hot-words"><div><a href="#" id="zhu-ce">優惠購首發</a></div><div><a href="#">億元優惠</a></div><div><a href="#">9.9元團購</a></div><div><a href="#">美滿99減30</a></div><div><a href="#">辦公用品</a></div><div><a href="#">電腦</a></div><div><a href="#">通信</a></div></div></div><div class="shop-car"><i class="icon-cart"></i><a href="#">我的購物車 ></a><i class="count">80</i></div> </header>  <nav class="nav"><div class="w"><div class="sk_list fl"><ul><li><a href="#">品優秒殺</a></li><li><a href="#">即將售完</a></li><li><a href="#">超值低價</a></li></ul></div><div class="sk_con fl"><ul><li><a href="#">女裝</a></li><li><a href="#" class="style_red">女鞋</a></li><li><a href="#">男裝</a></li><li><a href="#">男鞋</a></li><li><a href="#">母嬰童裝</a></li><li><a href="#">食品</a></li><li><a href="#">智能數碼</a></li><li><a href="#">運動戶外</a></li><li><a href="#">更多分類∨</a></li></ul></div></div> </nav>  <div class="sk_container w"><div class="sk_hd"><img src="upload/bg_03.png" alt=""></div><div class="sk_bd"><ul><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li></ul></div> </div>  <footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5 class="service_demon"></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發票</p></div></li><li><h5 class="service_demon"></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發票</p></div></li><li><h5 class="service_demon"></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發票</p></div></li><li><h5 class="service_demon"></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發票</p></div></li><li><h5 class="service_demon"></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發票</p></div></li></ul></div><div class="mod_help"><dl><dt>服務指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯系客服</a></dd></dl><dl><dt>服務指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯系客服</a></dd></dl><dl><dt>服務指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯系客服</a></dd></dl><dl><dt>服務指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯系客服</a></dd></dl><dl><dt>服務指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行/團購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯系客服</a></dd></dl><dl><dt>幫助中心</dt><dd><img src="images/wx_cz.png" alt=""></dd><dd>品優購客戶端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">關于我們</a>|<a href="#">聯系我們</a>|<a href="#">聯系客服</a>|<a href="#">商家入駐</a>|<a href="#">營銷中心</a>|<ahref="#">手機品優購</a>|<a href="#">友情鏈接</a>|<a href="#">銷售聯盟</a>|<a href="#">品優購社區</a>|<ahref="#">品優購公益</a>|<a href="#">English Site</a>|<a href="#">Contact U</a></div><div class="copyright">地址: 北京市昌平區建材城西路金燕龍辦公樓一層郵編: 100096 電話400-618-4000 傳真: 010-82935100 郵箱:zhanghj+itcast.cn<br>京ICP備08001421號公網安備110108007702</div></div></div> </footer>  </body> </html>

CSS列表頁專屬 list.css

/*列表頁專有樣式*/ a {cursor: pointer;} .sk {position: absolute;left: 190px;top: 40px;border-left: 1px solid #c81523;padding: 3px 0 0 14px; } /*nav模塊開始*/ .nav {overflow: hidden; } .sk_list ul li {float: left; } .sk_list ul li a {display: block;line-height: 47px;padding: 0 30px;font-size: 16px;font-weight: 700;color: black; } .sk_list ul li a:hover {color: #e33333; } .sk_con ul li {float: left; } .sk_con ul li a {display: block;line-height: 49px;padding: 0 20px;font-size: 14px; } /*nav模塊結束*//*主體模塊*/ .sk_bd ul {overflow: hidden; } .sk_bd ul li {overflow: hidden;float: left;margin-right: 13px;width: 290px;border: 1px solid transparent;/*防抖技術*/ } .sk_bd ul li:nth-child(4n) {margin-right: 0; } .sk_bd ul li:hover {border: 1px solid #c81523; } /*主題模塊結束*/

初始化base.css樣式文件，css 公共文件?頂部和底部 common.css 以及圖片素材，請見文章品優購首頁。

如有不足，歡迎指正。?

?聲明：內容源自B站up“黑馬程序員”pink老師。?

總結

以上是生活随笔為你收集整理的品优购商城——列表页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：内网穿透实现P2P通信
下一篇： Kubernetes--k8s--进阶-