品优购商城——手机详情页（作业）
生活随笔
收集整理的這篇文章主要介紹了
品优购商城——手机详情页（作业）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖：
?
手機詳情頁文件 detail.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/detail.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><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="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="#">全球購</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="de_container w"><!--面包屑導航--><div class="crumb_wrap"><a href="#" class="coa">手機、數碼、通訊 </a> ><a href="#">手機 </a> ><a href="#">Apple蘋果 </a> ><a href="#">iphone 6S Plus系類</a></div><div class="product_intro clearfix"><!--預覽區域--><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><!--產品詳細信息--><div class="itemInfo_wrap fr"><h3>Apple iPhone 6s（A1700）64G玫瑰金色 移動通信電信4G手機</h3><div class="news">推薦選擇下方[移動優惠購],手機套餐齊搞定,不用換號,每月還有花費返</div><div class="summary"><dl class="summary_price"><dt>價格</dt><dd><i class="price">￥5299.00</i><a href="#">降價通知</a><div class="remark">累計評價612188</div></dd></dl><dl class="summary_promotion"><dt>促銷</dt><dd><em>加購價</em>滿999.00另加20.00元，或滿1999.00另加30.00元，或滿2999.00另加40.00元，即可在購物車換 購熱銷商品 詳情 》</dd></dl><dl class="summary_support"><dt>支持</dt><dd>以舊換新,閑置手機回收 4G套餐超值購 禮品購</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">公開版</a><a href="javascript:;">移動4G</a></dd></dl><dl class="choose_type"><dt>購買方式</dt><dd><a href="javascript:;" class="current">官方標配</a><a href="javascript:;">移動優惠購</a><a href="javascript:;">電信優惠購</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">加入購物車</a></div></div></div></div> </div> <!--詳情模塊結束--><!--產品細節模塊 product_detail--> <div class="product_detail clearfix w"><!--aside--><div class="aside fl"><div class="tab_list"><ul><li class="first_tab fl">相關分類</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">加入購物車</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">加入購物車</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">加入購物車</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">加入購物車</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">加入購物車</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">加入購物車</a></li></ul></div></div><div class="detail fr"><div class="detail_tab_list"><ul><li class="current">商品介紹</li><li>規格與包裝</li><li>售后保障</li><li>商品評價(50000)</li><li>手機社區</li></ul></div><div class="detail_tab_con"><div class="item"><ul class="item_info"><li>分辨率：1920*1080(FHD)</li><li>后置攝像頭：1200萬像素</li><li>前置攝像頭：500萬像素</li><li>核 數：其他</li><li>頻 率：以官網信息為準</li><li>品牌： Apple ?關注</li><li>商品名稱：APPLEiPhone 6s Plus</li><li>商品編號：1861098</li><li>商品毛重：0.51kg</li><li>商品產地：中國大陸</li><li>熱點：指紋識別，Apple Pay，金屬機身，拍照神器</li><li>系統：蘋果（IOS）</li><li>像素：1000-1600萬</li><li>機身內存：64GB</li></ul><p><a href="#" class="more">查看更多參數∨</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> <!--產品細節模塊結束--><!--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手機詳情頁專屬 detail.css
/*手機詳情頁專有樣式*/ .crumb_wrap {margin-top: 10px; } .crumb_wrap a {margin: 0 10px; } .crumb_wrap .coa {margin-left: 0; } /*詳細模塊開始*/ .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;/*禁止鼠標樣式*/ } .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; } /*詳細模塊結束*/ /*產品細節模塊開始*/ .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; } /*產品細節模塊結束*/?初始化base.css樣式文件，css?公共文件?頂部和底部?common.css?以及圖片素材，請見文章品優購首頁。
如有不足，歡迎指正。
?聲明：內容源自B站up“黑馬程序員”pink老師。
總結
以上是生活随笔為你收集整理的品优购商城——手机详情页（作业）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Kubernetes HPA管理
- 下一篇： 安卓自定义View画钟实现转动