品优购商城——手机详情页（作业）
生活随笔
收集整理的這篇文章主要介紹了
品优购商城——手机详情页（作业）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果圖：
?
手機(jī)詳情頁(yè)文件 detail.html?
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>手機(jī)詳情頁(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ū),食品等數(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/detail.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><!--搜索框部分--><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="dropdown"><div class="dt fl">全部商品分類</div></div><!--右盒子詳情--><div class="navitems fl"><ul><li><a href="#">服裝城</a></li><li><a href="#">美妝館</a></li><li><a href="#">傳志超市</a></li><li><a href="#">全球購(gòu)</a></li><li><a href="#">閃購(gòu)</a></li><li><a href="#">團(tuán)購(gòu)</a></li><li><a href="#">拍賣</a></li><li><a href="#">有趣</a></li></ul></div></div> </nav> <!--nav模塊結(jié)束--><!--詳情模塊開(kāi)始--> <div class="de_container w"><!--面包屑導(dǎo)航--><div class="crumb_wrap"><a href="#" class="coa">手機(jī)、數(shù)碼、通訊 </a> ><a href="#">手機(jī) </a> ><a href="#">Apple蘋(píng)果 </a> ><a href="#">iphone 6S Plus系類</a></div><div class="product_intro clearfix"><!--預(yù)覽區(qū)域--><div class="preview_wrap fl"><div class="preview_img"><img src="upload/s3.png" alt=""></div><div class="preview_list"><a href="#" class="arrow_prev"></a><a href="#" class="arrow_next"></a><ul class="list_item"><li><img src="upload/pre.jpg" alt=""></li><li class="current"><img src="upload/pre.jpg" alt=""></li><li><img src="upload/pre.jpg" alt=""></li><li><img src="upload/pre.jpg" alt=""></li><li><img src="upload/pre.jpg" alt=""></li></ul></div></div><!--產(chǎn)品詳細(xì)信息--><div class="itemInfo_wrap fr"><h3>Apple iPhone 6s（A1700）64G玫瑰金色 移動(dòng)通信電信4G手機(jī)</h3><div class="news">推薦選擇下方[移動(dòng)優(yōu)惠購(gòu)],手機(jī)套餐齊搞定,不用換號(hào),每月還有花費(fèi)返</div><div class="summary"><dl class="summary_price"><dt>價(jià)格</dt><dd><i class="price">￥5299.00</i><a href="#">降價(jià)通知</a><div class="remark">累計(jì)評(píng)價(jià)612188</div></dd></dl><dl class="summary_promotion"><dt>促銷</dt><dd><em>加購(gòu)價(jià)</em>滿999.00另加20.00元，或滿1999.00另加30.00元，或滿2999.00另加40.00元，即可在購(gòu)物車換 購(gòu)熱銷商品 詳情 》</dd></dl><dl class="summary_support"><dt>支持</dt><dd>以舊換新,閑置手機(jī)回收 4G套餐超值購(gòu) 禮品購(gòu)</dd></dl><dl class="choose_color"><dt>選擇顏色</dt><dd><a href="javascript:;" class="current" id="current">玫瑰金</a><a href="javascript:;">金色</a><a href="javascript:;">白色</a><a href="javascript:;">土豪金</a></dd></dl><dl class="choose_version"><dt>選擇版本</dt><dd><a href="javascript:;" class="current">公開(kāi)版</a><a href="javascript:;">移動(dòng)4G</a></dd></dl><dl class="choose_type"><dt>購(gòu)買方式</dt><dd><a href="javascript:;" class="current">官方標(biāo)配</a><a href="javascript:;">移動(dòng)優(yōu)惠購(gòu)</a><a href="javascript:;">電信優(yōu)惠購(gòu)</a></dd></dl><div class="choose_btns"><div class="choose_amount"><input type="text" value="1"><a href="javascript:;" class="add">+</a><a href="javascript:;" class="reduce">-</a></div><a href="#" class="addcar">加入購(gòu)物車</a></div></div></div></div> </div> <!--詳情模塊結(jié)束--><!--產(chǎn)品細(xì)節(jié)模塊 product_detail--> <div class="product_detail clearfix w"><!--aside--><div class="aside fl"><div class="tab_list"><ul><li class="first_tab fl">相關(guān)分類</li><li class="second_tab current fl">推薦品牌</li></ul></div><div class="tab_con"><ul><li><img src="upload/aside_img.jpg" alt=""><h5>華為 HUAWEI P20 Pro 全面屏徠卡</h5><div class="aside_price">￥19</div><a href="#" class="as_addcar">加入購(gòu)物車</a></li><li><img src="upload/aside_img.jpg" alt=""><h5>華為 HUAWEI P20 Pro 全面屏徠卡</h5><div class="aside_price">￥19</div><a href="#" class="as_addcar">加入購(gòu)物車</a></li><li><img src="upload/aside_img.jpg" alt=""><h5>華為 HUAWEI P20 Pro 全面屏徠卡</h5><div class="aside_price">￥19</div><a href="#" class="as_addcar">加入購(gòu)物車</a></li><li><img src="upload/aside_img.jpg" alt=""><h5>華為 HUAWEI P20 Pro 全面屏徠卡</h5><div class="aside_price">￥19</div><a href="#" class="as_addcar">加入購(gòu)物車</a></li><li><img src="upload/aside_img.jpg" alt=""><h5>華為 HUAWEI P20 Pro 全面屏徠卡</h5><div class="aside_price">￥19</div><a href="#" class="as_addcar">加入購(gòu)物車</a></li><li class="tab_con_finally"><img src="upload/aside_img.jpg" alt=""><h5>華為 HUAWEI P20 Pro 全面屏徠卡</h5><div class="aside_price">￥19</div><a href="#" class="as_addcar">加入購(gòu)物車</a></li></ul></div></div><div class="detail fr"><div class="detail_tab_list"><ul><li class="current">商品介紹</li><li>規(guī)格與包裝</li><li>售后保障</li><li>商品評(píng)價(jià)(50000)</li><li>手機(jī)社區(qū)</li></ul></div><div class="detail_tab_con"><div class="item"><ul class="item_info"><li>分辨率：1920*1080(FHD)</li><li>后置攝像頭：1200萬(wàn)像素</li><li>前置攝像頭：500萬(wàn)像素</li><li>核 數(shù)：其他</li><li>頻 率：以官網(wǎng)信息為準(zhǔn)</li><li>品牌： Apple ?關(guān)注</li><li>商品名稱：APPLEiPhone 6s Plus</li><li>商品編號(hào)：1861098</li><li>商品毛重：0.51kg</li><li>商品產(chǎn)地：中國(guó)大陸</li><li>熱點(diǎn)：指紋識(shí)別，Apple Pay，金屬機(jī)身，拍照神器</li><li>系統(tǒng)：蘋(píng)果（IOS）</li><li>像素：1000-1600萬(wàn)</li><li>機(jī)身內(nèi)存：64GB</li></ul><p><a href="#" class="more">查看更多參數(shù)∨</a></p><div class="picture fl"><img src="upload/detail_img1.jpg" alt=""><img src="upload/detail_img2.jpg" alt=""><img src="upload/detail_img3.jpg" alt=""></div></div></div></div> </div> <!--產(chǎn)品細(xì)節(jié)模塊結(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手機(jī)詳情頁(yè)專屬 detail.css
/*手機(jī)詳情頁(yè)專有樣式*/ .crumb_wrap {margin-top: 10px; } .crumb_wrap a {margin: 0 10px; } .crumb_wrap .coa {margin-left: 0; } /*詳細(xì)模塊開(kāi)始*/ .product_intro {height: 590px;margin-top: 10px; } .preview_img {border: 1px solid #cccccc; } .preview_list {position: relative;height: 60px;margin-top: 40px; } .arrow_prev, .arrow_next{/*一定是 , 并集選擇器*/position: absolute;top: 15px;width: 22px;height: 32px; } .arrow_prev {left: 0;background: url("../images/arrow-prev.png") no-repeat; } .arrow_next {right: 0;background: url("../images/arrow-next.png") no-repeat; } .list_item {width: 320px;height: 60px;margin: 0 auto; } .list_item li{overflow: hidden;float: left;width: 56px;height: 56px;border: 2px solid transparent;!important;margin: 0 2px; } .list_item .current {border: 2px solid #c81623; } /*右半模塊*/ .itemInfo_wrap {width: 718px; } .itemInfo_wrap h3 {height: 30px;font-size: 16px; } .news {height: 32px;color: #e22228; } .summary_price, .summary_promotion {position: relative;padding: 10px 0;background-color: #fee9eb; } .summary a.current {border-color: #c81623; } .summary .dl {overflow: hidden; } .summary dt, .summary dd {float: left;!important; } .summary dl dt {width: 60px;padding-left: 10px;line-height: 36px;margin-right: 10px; } .price {font-size: 24px;color: #e12228; } .summary_price dd a {color: #c81623; } .remark {position: absolute;right: 10px;top: 20px; } .summary dl {overflow: hidden; } .summary_promotion {padding-top: 0; } .summary_promotion dd {width: 450px;line-height: 36px; } .summary_promotion em {display: inline-block;width: 40px;height: 22px;background-color: #c81623;text-align: center;line-height: 22px;color: #fff; } .summary_support dd {line-height: 36px; } .choose_color a {display: inline-block;width: 80px;height: 41px;background-color: #f7f7f7;border: 1px solid #ededed;text-align: center;line-height: 41px; } #current {margin-left: 10px; } .choose_version {margin: 10px 0; } .choose_version a, .choose_type a {display: inline-block;height: 32px;padding: 0 12px;background-color: #f7f7f7;border: 1px solid #ededed;text-align: center;line-height: 32px; } .choose_btns {overflow: hidden;margin-top: 20px; } .choose_amount {overflow: hidden;position: relative;float: left;width: 50px;height: 46px; } .choose_amount input {width: 35px;height: 44px;border: 1px solid #cccccc;text-align: center; } button, input {font-family: 'Microsoft YaHei','Heiti SC',tahoma,arial,'Hiragino Sans GB',\5B8B體,sans-serif;outline: none; } .add {top: 0; } .add, .reduce {position: absolute;right: 0;width: 15px;height: 22px;border-top: 1px solid #cccccc;border-right: 1px solid #cccccc;background-color: #f1f1f1;text-align: center;line-height: 22px; } .reduce {border-bottom: 1px solid #cccccc;bottom: 2px;cursor: not-allowed;/*禁止鼠標(biāo)樣式*/ } .addcar {float: left;width: 142px;height: 46px;background-color: #c81623;text-align: center;line-height: 46px;font-size: 18px;color: #ffffff;margin-left: 10px;font-weight: 700; } /*詳細(xì)模塊結(jié)束*/ /*產(chǎn)品細(xì)節(jié)模塊開(kāi)始*/ .product_detail {margin-bottom: 50px; } .aside {width: 208px;border: 1px solid #cccccc; } .tab_list {overflow: hidden;height: 33px;background-color: #f1f1f1; } .tab_list ul {overflow: hidden; } .tab_list li {float: left;border-bottom: 1px solid #cccccc;height: 33px;text-align: center;line-height: 33px; } .first_tab {width: 103px; } .tab_con {padding: 0 8px; } .tab_list li {height: 33px;text-align: center;line-height: 33px; } .second_tab {width: 103px;border-left: 1px solid #cccccc; } .tab_list .current {background-color: #fff;border-bottom: 0 solid transparent;line-height: 33px;color: red; } .aside_price {padding: 10px 0;font-weight: 700;margin-left: 10px; } .tab_con li {border-bottom: 1px solid #cccccc; } .tab_con li h5 {margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 400; } .as_addcar {display: block;width: 90px;height: 27px;background-color: #fff;line-height: 27px;text-align: center;border: 1px solid #cccccc;margin: 10px auto; } .tab_con .tab_con_finally {border-bottom: 0 solid transparent; } /*detail右半模塊*/ .detail {width: 978px;margin-left: 10px; } .detail_tab_con {/*overflow: hidden;*/ } .detail_tab_list {height: 39px;width: 978px;background-color: #f1f1f1;border: 1px solid #cccccc; } .detail_tab_list ul li {float: left;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer; } .detail_tab_list .current {background-color: #c81623;color: #ffffff; } .item_info {padding: 20px 0 0 20px; } .detail_tab_con .item ul li {display: block; } .more {float: right;font-weight: 700; } .detail_tab_con .item img {float: left;width: 970px; } /*產(chǎn)品細(xì)節(jié)模塊結(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)題。
- 上一篇： Kubernetes HPA管理
- 下一篇： Ubuntu1604报错统一解决方法E: