日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

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

编程问答

品优购商城——列表页

發布時間:2024/3/12 编程问答 41 豆豆
生活随笔 收集整理的這篇文章主要介紹了 品优购商城——列表页 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果圖:

列表頁文件 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,相機,數碼,配件,手表,存儲卡"/><!--favicon圖標制作--><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"><!--logo部分--><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模塊制作--> <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> <!--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底部模塊制作--> <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老師。?

總結

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

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