品优购商城——列表页
生活随笔
收集整理的這篇文章主要介紹了
品优购商城——列表页
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果圖：
列表頁(yè)文件 list.html?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>列表頁(yè)-綜合網(wǎng)購(gòu)首選-正品低廉,品質(zhì)保障,配送及時(shí),輕松購(gòu)物!</title><meta name="description"content="品優(yōu)購(gòu)商城-專業(yè)的綜合網(wǎng)上購(gòu)物商城,銷售家電,數(shù)碼通訊,電腦,家居百貨,服裝服飾,母嬰,圖書,食品等數(shù)萬(wàn)個(gè)品牌優(yōu)質(zhì)商品.便捷,誠(chéng)信的服務(wù),為您提供愉悅的網(wǎng)上購(gòu)物體驗(yàn)!"/><!--關(guān)鍵字--><meta name="keywords" content="網(wǎng)上購(gòu)物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲(chǔ)卡"/><!--favicon圖標(biāo)制作--><link rel="shortcut icon" href="favicon.ico"><!--引入初始化樣式文件--><link rel="stylesheet" href="css/base.css"><!--引入公共的樣式文件--><link rel="stylesheet" href="css/common.css"><!--引入列表頁(yè)專有樣式--><link rel="stylesheet" href="css/list.css"> </head> <body> <!--快捷導(dǎo)航模塊--> <section class="shortcut"><div class="w"><div class="fl"><ul><li>品優(yōu)購(gòu)歡迎您!</li><li><a href="#"> 請(qǐng)登錄</a><a href="register.html" id="zhu-ce">免費(fèi)注冊(cè)</a></li></ul></div><div class="fr"><ul><li><a href="#">我的訂單</a></li><li class="shu"></li><li class="arrow-icon"><a href="#">我的品優(yōu)購(gòu) ∨</a></li><li class="shu"></li><li><a href="#">品優(yōu)購(gòu)會(huì)員</a></li><li class="shu"></li><li><a href="#">企業(yè)采購(gòu)</a></li><li class="shu"></li><li class="arrow-icon"><a href="#">關(guān)注品優(yōu)購(gòu) ∨</a></li><li class="shu"></li><li class="arrow-icon"><a href="#">客戶服務(wù) ∨</a></li><li class="shu"></li><li class="arrow-icon"><a href="#">網(wǎng)站導(dǎo)航 ∨</a></li></ul></div></div> </section> <!--快捷導(dǎo)航欄結(jié)束--><!--頭部模塊--> <header class="header w"><!--logo部分--><div class="logo w"><h1><a href="index.html" title="品優(yōu)購(gòu)商城">品優(yōu)購(gòu)商城</a></h1></div><!--列表頁(yè)秒殺模塊--><div class="sk"><img src="images/sk.png" alt=""></div><!--列表頁(yè)秒殺模塊結(jié)束--><!--搜索框部分--><div><div class="search"><input class="text" type="text" placeholder="請(qǐng)輸入內(nèi)容..."><button class="btn">搜索</button></div><div class="hot-words"><div><a href="#" id="zhu-ce">優(yōu)惠購(gòu)首發(fā)</a></div><div><a href="#">億元優(yōu)惠</a></div><div><a href="#">9.9元團(tuán)購(gòu)</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><!--購(gòu)物車--><div class="shop-car"><i class="icon-cart"></i><a href="#">我的購(gòu)物車 ></a><i class="count">80</i></div> </header> <!--頭部模塊結(jié)束--><!--nav模塊制作--> <nav class="nav"><div class="w"><!--左盒子標(biāo)簽--><div class="sk_list fl"><ul><li><a href="#">品優(yōu)秒殺</a></li><li><a href="#">即將售完</a></li><li><a href="#">超值低價(jià)</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="#">智能數(shù)碼</a></li><li><a href="#">運(yùn)動(dòng)戶外</a></li><li><a href="#">更多分類∨</a></li></ul></div></div> </nav> <!--nav模塊結(jié)束--><!--列表主題部分--> <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> <!--列表主題部分結(jié)束--><!--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>正品保障,提供發(fā)票</p></div></li><li><h5 class="service_demon"></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發(fā)票</p></div></li><li><h5 class="service_demon"></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發(fā)票</p></div></li><li><h5 class="service_demon"></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發(fā)票</p></div></li><li><h5 class="service_demon"></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供發(fā)票</p></div></li></ul></div><div class="mod_help"><dl><dt>服務(wù)指南</dt><dd><a href="#">購(gòu)物流程</a></dd><dd><a href="#">會(huì)員介紹</a></dd><dd><a href="#">生活旅行/團(tuán)購(gòu)</a></dd><dd><a href="#">常見(jiàn)問(wèn)題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯(lián)系客服</a></dd></dl><dl><dt>服務(wù)指南</dt><dd><a href="#">購(gòu)物流程</a></dd><dd><a href="#">會(huì)員介紹</a></dd><dd><a href="#">生活旅行/團(tuán)購(gòu)</a></dd><dd><a href="#">常見(jiàn)問(wèn)題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯(lián)系客服</a></dd></dl><dl><dt>服務(wù)指南</dt><dd><a href="#">購(gòu)物流程</a></dd><dd><a href="#">會(huì)員介紹</a></dd><dd><a href="#">生活旅行/團(tuán)購(gòu)</a></dd><dd><a href="#">常見(jiàn)問(wèn)題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯(lián)系客服</a></dd></dl><dl><dt>服務(wù)指南</dt><dd><a href="#">購(gòu)物流程</a></dd><dd><a href="#">會(huì)員介紹</a></dd><dd><a href="#">生活旅行/團(tuán)購(gòu)</a></dd><dd><a href="#">常見(jiàn)問(wèn)題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯(lián)系客服</a></dd></dl><dl><dt>服務(wù)指南</dt><dd><a href="#">購(gòu)物流程</a></dd><dd><a href="#">會(huì)員介紹</a></dd><dd><a href="#">生活旅行/團(tuán)購(gòu)</a></dd><dd><a href="#">常見(jiàn)問(wèn)題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯(lián)系客服</a></dd></dl><dl><dt>幫助中心</dt><dd><img src="images/wx_cz.png" alt=""></dd><dd>品優(yōu)購(gòu)客戶端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">關(guān)于我們</a>|<a href="#">聯(lián)系我們</a>|<a href="#">聯(lián)系客服</a>|<a href="#">商家入駐</a>|<a href="#">營(yíng)銷中心</a>|<ahref="#">手機(jī)品優(yōu)購(gòu)</a>|<a href="#">友情鏈接</a>|<a href="#">銷售聯(lián)盟</a>|<a href="#">品優(yōu)購(gòu)社區(qū)</a>|<ahref="#">品優(yōu)購(gòu)公益</a>|<a href="#">English Site</a>|<a href="#">Contact U</a></div><div class="copyright">地址: 北京市昌平區(qū)建材城西路金燕龍辦公樓一層 郵編: 100096 電話400-618-4000 傳真: 010-82935100 郵箱:zhanghj+itcast.cn<br>京ICP備08001421號(hào)公網(wǎng)安備110108007702</div></div></div> </footer> <!--底部模塊結(jié)束--> </body> </html>CSS列表頁(yè)專屬 list.css
/*列表頁(yè)專有樣式*/ a {cursor: pointer;} .sk {position: absolute;left: 190px;top: 40px;border-left: 1px solid #c81523;padding: 3px 0 0 14px; } /*nav模塊開(kāi)始*/ .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模塊結(jié)束*//*主體模塊*/ .sk_bd ul {overflow: hidden; } .sk_bd ul li {overflow: hidden;float: left;margin-right: 13px;width: 290px;border: 1px solid transparent;/*防抖技術(shù)*/ } .sk_bd ul li:nth-child(4n) {margin-right: 0; } .sk_bd ul li:hover {border: 1px solid #c81523; } /*主題模塊結(jié)束*/初始化base.css樣式文件，css 公共文件?頂部和底部 common.css 以及圖片素材，請(qǐng)見(jiàn)文章品優(yōu)購(gòu)首頁(yè)。
如有不足，歡迎指正。?
?聲明：內(nèi)容源自B站up“黑馬程序員”pink老師。?
總結(jié)
以上是生活随笔為你收集整理的品优购商城——列表页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 内网穿透实现P2P通信
- 下一篇： Kubernetes--k8s--进阶-