小米商城界面
效果圖
?
分為三部分
一：css
?1.content
ul { list-style: none; }h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; }/*大導航下面的六個小css塊樣式*/ .content-picli_1 li { width: 33%; height: 60px; color: #ccc; font-size: 14px; float: left; text-align: center; margin-top: 20px; } .content-picli_1 li span { width: 100%; height: 30px; float: left; text-align: center; } .content-picli_1 li:hover { color: #eee; }/*重寫二級標題樣式,包括小米閃購和下面的一堆二級標題*/ .content-picshop h2, .content-bottom h2 { height: 56px; line-height: 50px; font-size: 22px; padding-top: 20px; margin: 0; font-weight: 300; } .content-bottom h2 .tab { float: right; color: #424242; font-size: 16px; font-weight: normal; line-height: 60px; }/*優化長廣告 覆蓋mi.css*/ .content-bottom2_pic, .content-bottom3_pic, .content-bottom7_pic { margin-top: 40px; }/*小米閃購*/ /*重寫height和padding-top 覆蓋mi.css*/ .content-picshop3, .content-picshop4, .content-picshop5, .content-picshop6, .content-picshop7 { border-top: 1px solid; padding-top: 40px; height: 300px; background-color: #fff; position: relative; }.content-picshop4, .content-picshop5, .content-picshop6, .content-picshop7 { color: #333; }/*淺灰色背景*/ .bg { background-color: rgba(0, 0, 0, 0.02); width: 100%; height: 100%; position: absolute; top: 0; left: 0; }/*閃購倒計時*/ .content-picshop3 { border-color: #e53935; background-color: #f1eded; } .content-picshop3 div { width: 100%; text-align: center; } .content-picshop3 .time { font-size: 24px; color: #ef3a3b; margin-top: 15px; } .content-picshop3 .flash { height: 64px; margin: 25px 0; } .content-picshop3 .detail { line-height: 22px; color: rgba(0, 0, 0, 0.54); font-size: 15px; } .content-picshop3 .clock { color: #605751; font-size: 24px; line-height: 46px; margin-top: 30px; }.clock .hour, .clock .minute, .clock .second { display: inline-block; background-color: #605751; width: 46px; height: 46px; color: #fff; }/*閃購item*/ .content-picshop4 { border-color: #ffac13; } .content-picshop5 { border-color: #83c44e; } .content-picshop6 { border-color: #2196f3; } .content-picshop7 { border-color: #e53935; } .picshopImg { width: 160px; height: 160px; margin: 0 38px 22px; } .picshopTitle { width: 100%; font-size: 14px; margin: 0 3px; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: center; } .picshopDesc { width: 100%; font-size: 12px; color: #b0b0b0; text-align: center; margin: 8px 0 12px; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .picshopPrice { width: 100%; text-align: center;font-size: 13px; color: #b0b0b0; }?2：footer
dl,dd,dt{list-style: none;padding:0;margin:0; }/*底部top*/ .footer-top_li_a dl{display: block;float: left;width: 160px; } .footer-top_li_a dt{font-size: 14px;line-height:14px;color:#424242;margin-bottom:26px; } .footer-top_li_a dd{height: 18px;font-size: 12px;line-height: 18px;margin-top: 10px; } .footer-top_li_a dd a{color: #757575; } .footer-top_li_a dd a:hover{color:#ff6700; } .footer-top_li_a .connect{float: right;width:258px;height: 112px;border-left: 1px solid #e0e0e0;text-align: center; } .connect .telephone{color: #ff6700;margin: 0 0 5px;font-size: 22px;line-height: 22px; } .connect .time{color:#616161;margin:0 0 16px;font-size: 12px; } .connect button{width: 118px;height: 28px;font-size: 12px;line-height: 28px;border:1px solid #ff6700;color: #ff6700;background-color: #fff; } .connect button:hover{background-color: #ff6700;color: #fff; }/*底部bottom*/ .footer-bottom_li_1,.footer-bottom_li_2,.footer-bottom_li_3{float: left;margin-right: 10px; } .footer-bottom_li_4{clear: left;margin-top: 15px;width:1226px;text-align: center;font-family: "楷體";font-size: 24px;color: #ccc; } .footer-bottom_li_a{height:19px;width: 640px; } .footer-bottom_li_a li{height:19px;font-size: 12px;float: left;color: #757575; } .footer-bottom_li_a li span{width:0px;height:10px;border-left: 1px solid #b0b0b0;margin:3px 3px; } .footer-bottom_li_a li:hover{color:#ef3a3b; }.footer-bottom_li_b{width:640px;color: #b0b0b0;font-size: 12px; } .footer-bottom_li_b a{color:#b0b0b0; } .footer-bottom_li_b a:hover{color:#ef3a3b; }.footer-bottom_li_3 {float: right; } .footer-bottom_li_3 img{display:block;width:83px;float: left;margin-right: 10px; }3：mi
*{margin: 0px;padding: 0px;border: none;} .clear{clear: both;} li{list-style: none;} a{text-decoration: none;color: #fff;} /*頭部*/ .header{height: 40px;width: 100%;background: #333;} .header_menu{width: 1226px;height: 40px; margin:0px auto;} .header_menu span{margin: 0px 10px;color: #6C6D69;} .header_menu li a:hover{color: #FFF;} .header_left{float: left;line-height: 40px;} .header_left li{color:#ccc;float: left;font-size: 9px;} .header_right{float: right;height: 40px;line-height: 40px; } .header_right li{float: left;height: 40px;} .header_right li a{color:#aaa;font-size:12px; } .header_right li a:hover{color: #fff;} .header_right li span{color:#424242;font-size:12px;margin: 0px 5px; } .header_right_li{width: 120px;height: 40px; text-align:center;background:#424242;color:#aaa;font-size:12px;position: relative;margin-left:10px; } .header_right_li:hover{color:#FF6A00; background: #fff;} .header_right_li div{width: 300px;height: 90px;background: #fff;position: absolute;right: 0px;display: none;color: #ccc;z-index: 2;} .header_right_li:hover div{display: block;} /*主體內容上*/ .content-top{} .content{width:1226px;margin: 0 auto; } /*導航*/ .content_menu{width:1226px;height: 66px;margin: 10px 0px;} /*導航2*/ .content_menu_pic{float: left;} .content_menu_ul{float: left;height: 66px;line-height:66px; margin-left: 15px;/*position: relative;*/} .content_menu_ul li{float: left; margin-right: 10px;font-size: 17px;} .content_menu_ul li:hover{color:#FF6A00;} .content-form{position: relative; float: right;width: 314px;height: 63px;padding: 6px 0px;} .content-form input[type="text"]{width: 250px;height: 50px;float: left;border-left: 1px solid #ccc;border-top: 1px solid #ccc;border-bottom:1px solid #ccc;} .content-form .botton{width: 60px;height: 50px;float: left;border: 1px solid #ccc;} .content-form .content-form-a{position: absolute;top: 20px;right: 75px; width: 110px;} .content-form a {color: #aaa;width: 50px;font-size: 7px;background: #EBEBEB;padding: 3px;} .content-form a:hover {background:#FF6700;color: #fff;} .content-form i{position: absolute;top: 20px;right: 25px;font-size: 21px;color: #424242;} .content-form .botton:hover{border: none;width: 62px;height: 52px; background:#FF6700;color:#fff;} .content-form .botton:hover i{color:#fff;}/*下拉*/ .mi_phone{width:100%;height:230px;border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;position:absolute;left: 0px;z-index: 2; background: #fff;display: none;} .content_menu_ul li:hover .mi_phone{display: block;} .mi_phone_div .mi_phone_shop{width: 120px; height: 160px;margin-top: 30px;line-height: 30px;} .mi_phone_div{width: 1226px;height: 230px;margin:0px auto;} .mi_phone_div_1{margin:0px auto;/*border: 1px solid red;*/padding:0px 50px;} .mi_phone_div a{color: #000;font-size: 9px;/*margin-left: 15px;*/} .mi_phone_div span{border-right: 1px solid #ccc;margin:0px 30px;margin-top: 30px;height: 80px;width: 0px;float: left;} .new{width: 60px;height: 18px;font-size: 9px;position: absolute;top:0px;left:25px; border: 1px solid #FF6A00;color:#FF6A00; line-height: 18px;text-align: center;} .mi_phone_div .mi_phone1{float: left;width: 181px;height:230px; position: relative;text-align: center;} .mi_phone_shop {float: left}/*左邊導航*/ .content_pic{width: 1226px;height:460px;background:url(../img/mi.jpg) ;} .content_pic_menu{width: 246px;height:460px; float: left;background: #424242;position: relative; } .content_pic_img{width: 980px;height:460px;float: right; } .content_pic_ul{width: 246px;height: 440px; margin:30px 0px;} .content_pic_ul li{width: 246px;height: 40px;line-height: 40px;font-size:15px;color: #fff;} .content_pic_ul li i{font-size: 15px;font-weight: bold;float: right;margin-right:20px;margin-top: 13px;} .content_pic_ul li a{margin-left: 20px;} .content_pic_ul li:hover{background:#FF6A00; } .content_pic_div{height: 460px;width:900px;background: #fff;position: absolute;top: 0px; left:235px;display: none;} .content_pic_ul li:hover .content_pic_div {display: block;} .content_div_menu{width:880px; height:440px;margin: 10px 10px; } .content_div_1{width: 880px;height:70px; margin-top: 5px;} .content_div_1 div{width: 280px;float: left;height:70px;/*border: 1px solid #ccc;*/margin-right: 10px;} .content_div_1 div img{width:40px;height: 40px;margin: 15px 0px;float: left;} .content_div_1 div a{color:#000;float: left;margin-top: 17px;} .content_div_1 div:hover a{color:#FF6A00;} /* 小米閃購*/ .content-picli{height: 170px;width:1226px;margin-top: 10px;} .content-picli_1{height: 170px;width: 235px; float: left;background:#5F5750;margin-right: 14.3px;} .content-picli_2{height: 170px;width: 316px;float: left;background:url(../img/midAD1.jpg);margin-right:14.3px;} .content-picli_3{height: 170px;width: 316px;float: left;background:url(../img/midAD2.jpg);margin-right: 14.3px;} .content-picli_4{height: 170px;width: 316px;float: left;background:url(../img/midAD3.jpg);} .content-picshop1{height: 50px;width:1226px; } .content-picshop2{height: 340px;width:1226px; } .content-picshop3{float: left;height: 340px;width:235px; background:#ccc;margin-right:12.7px;} .content-picshop4{float: left;height: 340px;width:235px; background:#ccc;margin-right:12.7px;} .content-picshop5{float: left;height: 340px;width:235px; background:#ccc;margin-right:12.7px;} .content-picshop6{float: left;height: 340px;width:235px; background:#ccc;margin-right:12.7px;} .content-picshop7{float: left;height: 340px;width:235px; background:#ccc;} .content-pic{height: 119px;width: 1226px;background: url(../img/longAD1.jpg);margin: 40px 0px;} /*底部*/ .footer-top{} .footer-top_li{width: 1226px;margin: 0px auto;} .footer-top_li_1{width: 1126px;height: 80px;margin: 0px auto;line-height: 80px;} .footer-top_li_1 a{color:#616161;font-size: 16px; font-weight: 300;} .footer-top_li_1 a:hover{color:#FF6700;} .footer-top_li_1 a i{margin-right: 10px;font-size: 20px;} .footer-top_li_1 span{color:#616161;margin:0 56px;font-size: 20px;border-left: 1px solid #e0e0e0;} .footer-top_li .separate{display:block;width: 1226px;height:0;border-bottom: 1px solid #e0e0e0;} .footer-top_li_2 {width: 1226px;height: 100px;border:0;padding:40px 0;} .footer-top_li_2.footer-bottom{height:100px; background:#F5F5F5;} .footer-bottom_li{width: 1226px;margin: 0px auto;}二：圖片
三：js
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米商城</title><link rel="shortcut icon" type="image/x-icon" href="img/logo.png" /><link rel="stylesheet" type="text/css" href="css/mi.css"><link rel="stylesheet" type="text/css" href="css/content.css"><link rel="stylesheet" type="text/css" href="css/footer.css"> </head><body><div class="box"><!-- 頭部 --><div class="header"><div class="header_menu"><ul class="header_left"><li><a>小米商城</a><span>|</span></li><li><a>MIUI</a><span>|</span></li><li><a>IOT</a><span>|</span></li><li><a>云服務</a><span>|</span></li><li><a>小愛分享平臺</a><span>|</span></li><li><a>金融</a><span>|</span></li><li><a>有品</a><span>|</span></li><li><a>企業服務</a><span>|</span></li><li><a>SelectRegion</a></li></ul><div class="header_right"><ul><li><a>登錄</a><span>|</span></li><li><a>注冊</a><span>|</span></li><li><a>消息通知</a></li><li class="header_right_li"><i class="fa fa-shopping-cart" ></i> 購物車 ( 0 )<div>購物車中還沒有商品，趕緊選購吧！</div></li></ul></div> </div> </div><!-- 主體內容上半部分 --><div class="content-top"><div class="content"><div class="content_menu"><div class="content_menu_pic"><img src="img/logo.png" class="content_menu_img"style="margin: 5px 0px;margin-right: 10px;"></div><div class="content_menu_ul"><ul><li>小米手機</li> <li>紅米</li><li>電視</li><li>筆記本</li><li>盒子</li><li>新品</li><li>路由器</li><li>智能硬件</li><li>服務</li><li>社區</li></ul></div><div class="content-form"><form><input type="text" name=""><div class="content-form-a"><a href="">電視新品</a> <a href="">618預熱</a></div><div class="botton"><i class=" fa fa-search"></i></div></form></div><div class="clear"></div></div><div class="content_pic"><div class="content_pic_menu"><ul class="content_pic_ul"><li><a href="">手機 電話卡 </a><i class="fa fa-angle-right"></i></li><li><a href="">電視機 盒子</a><i class="fa fa-angle-right"></i></li><li><a href="">筆記本 </a><i class="fa fa-angle-right"></i></li><li><a href="">智能 家電 </a><i class="fa fa-angle-right"></i></li><li><a href="">健康 家居 </a><i class="fa fa-angle-right"></i></li><li><a href="">出行 兒童 </a><i class="fa fa-angle-right"></i></li><li><a href="">路由器 手機配件 </a><i class="fa fa-angle-right"></i></li><li><a href="">移動電源 插線板</a><i class="fa fa-angle-right"></i></li><li><a href="">耳機 音箱 </a><i class="fa fa-angle-right"></i></li><li><a href="">生活 米兔</a> <i class="fa fa-angle-right"></i></li></ul> </div><div class="content_pic_img"><img src="img\滾動欄.png" alt=""></div><div class="clear"></div></div> <!-- 以下部分樣式見 外部樣式 content.css --> <!--xin start--><!--一個小導航+三個小廣告--><div class="content-picli"><div class="content-picli_1"><ul><li><span class="fa fa-mobile-phone fa-2x"></span>選購手機</li><li><span class="fa fa-gift fa-2x"></span>企業團購</li><li><span class="fa fa-facebook fa-2x"></span>F碼通道</li><li><span class="fa fa-file-text fa-2x"></span>米粉卡</li><li><span class="fa fa-refresh fa-2x"></span>以舊換新</li><li><span class="fa fa-credit-card fa-2x"></span>話費充值</li></ul></div><div class="content-picli_2"><img src="img\1.png" alt=""></div><div class="content-picli_3"><img src="img\2.png" alt=""></div><div class="content-picli_4"><img src="img\3.png" alt=""></div></div><div class="clear"></div><!--小米閃購--><div class="content-picshop"><h2 class="content-picshop1">小米閃購</h2><div class="content-picshop2"><div class="content-picshop3"><div class="time">18:00 場</div><div class="flash fa fa-flash fa-4x" style="color: #ef3a3b;"></div><div class="detail">距離開始還有</div><div class="clock"><span class="hour">00</span><span class="maohao">:</span><span class="minute">00</span><span class="maohao">:</span><span class="second">00</span></div><div class="bg"></div></div><div class="content-picshop4"><img class="picshopImg" src="img\洗衣機.jpg" alt=""><h3 class="picshopTitle">米家滾筒洗衣機 白色</h3><p class="picshopDesc">直驅電機更安靜</p><p class="picshopPrice"><span style="color:#ff6709">1399 元</span> <del>1499元</del></p><div class="bg"></div></div><div class="content-picshop5"><img class="picshopImg" src="img\手環.jpg" alt=""><h3 class="picshopTitle">小米手環 2 黑色</h3><p class="picshopDesc">OLED 顯示屏，觸摸操作</p><p class="picshopPrice"><span style="color:#ff6709">142 元</span> <del>149元</del></p><div class="bg"></div></div><div class="content-picshop6"><img class="picshopImg" src="img\掃地機器人.jpg" alt=""><h3 class="picshopTitle">米家掃地機器人2 白色</h3><p class="picshopDesc">夠快才夠凈</p><p class="picshopPrice"><span style="color:#ff6709">1709 元</span> <del>1799元</del></p><div class="bg"></div></div><div class="content-picshop7"><img class="picshopImg" src="img\凈水器.jpg" alt=""><h3 class="picshopTitle">小米凈水器 白色 1200G</h3><p class="picshopDesc">3秒一杯純水</p><p class="picshopPrice"><span style="color:#ff6709">189 元</span> <del>199元</del></p><div class="bg"></div></div></div></div><div class="content-pic"></div></div></div><!-- 網頁底部 --><div class="footer-top"><div class="footer-top_li"><div class="footer-top_li_1"><a href="#"><i class="fa fa-wrench"></i>預約維修服務</a><span></span><a href="#"><i class="fa fa-rotate-right "></i>7天無理由退貨</a><span></span><a href="#"><i class="fa fa-refresh"></i>15天免費換貨</a><span></span><a href="#"><i class="fa fa-gift"></i>滿150元包郵</a><span></span><a href="#"><i class="fa fa-map-marker"></i>520余家售后網點</a></div><span class="separate"></span><div class="footer-top_li_2"><div class="footer-top_li_a"><dl><dt>幫助中心</dt><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></dl><dl><dt>線下門店</dt><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></dl><dl><dt>關注我們</dt><dd><a href="">新浪微博</a></dd><dd><a href="">官網微博</a></dd><dd><a href="">聯系我們</a></dd></dl><dl><dt>特色服務</dt><dd><a href="">F碼通道</a></dd><dd><a href="">禮物碼</a></dd><dd><a href="">防偽查詢</a></dd></dl><div class="connect"><p class="telephone">Feir-520-1314</p><p class="time">周一至周日 8:00-18:00<br>(僅收市話費)</p><button><span class="fa fa-commenting "></span> 聯系客服</button></div></div><div class="footer-top_li_b"></div></div></div></div><div class="footer-bottom"><div class="footer-bottom_li"><div class="footer-bottom_li_1"><img src="img/logo.png" alt="" class="logoBottom"></div><div class="footer-bottom_li_2"><div class="footer-bottom_li_a"><ul><li>小米商城<span></span></li><li>MIUI<span></span></li><li>米家<span></span></li><li>米聊<span></span></li><li>多看<span></span></li><li>游戲<span></span></li><li>路由器<span></span></li><li>米粉卡<span></span></li><li>政企服務<span></span></li><li>小米天貓店<span></span></li><li>隱私政策<span></span></li><li>問題反饋<span></span></li><li>Select Region</li></ul></div><div class="footer-bottom_li_b"><a href="">?mi.com</a>京ICP證110507號<a href="">京ICP備10046444號</a><a href="">京公網安備11010802020134號</a><a href="">京網文[2014]0059-0009號</a><br>違法和不良信息舉報電話：185-0130-1238，本網站所列數據，除特殊說明，所有數據均出自我司實驗室測試</div></div><div class="footer-bottom_li_3"><img src="img/logo.png" alt="" class="icon"><img src="img/logo.png" alt="" class="icon"><img src="img/logo.png" alt="" class="icon"><img src="img/logo.png" alt="" class="icon"><img src="img/logo.png" alt="" class="icon"></div><div class="footer-bottom_li_4">探索黑科技，小米為發燒而生！</div> </div> </div> </div> <div class="mi_phone"><div class="mi_phone_div"><div class="mi_phone_div_1"><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="img/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="img/phone2.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="img/phone3.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><div class="new">新品</div><div class="mi_phone_shop"><img src="img/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><!-- <div class="new">新品</div> --><div class="mi_phone_shop"><img src="img/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div><span></span></div><div class="mi_phone1"><!-- <div class="new">新品</div> --><div class="mi_phone_shop"><img src="img/phone1.png"><br><a href="">小米2s</a><br><a href="" style="color:#FF6A00;">3299元</a></div></div><div class="clear"></div></div> </div> </div> <div class="content_pic_div"><div class="content_div_menu"><div class="content_div_1"><div><img src="img/phone1.png"> <a href="">小米8</a></div><div><img src="img/phone2.png"> <a href="">小米MIX2</a></div><div><img src="img/phone4.jpg"> <a href="">移動4G+專區</a></div></div><div class="content_div_1"><div><img src="img/phone1.png"> <a href="">小米8</a></div><div><img src="img/phone2.png"> <a href="">小米MIX2</a></div><div><img src="img/phone4.jpg"> <a href="">移動4G+專區</a></div></div><div class="content_div_1"><div><img src="img/phone1.png"> <a href="">小米8</a></div><div><img src="img/phone2.png"> <a href="">小米MIX2</a></div><div><img src="img/phone4.jpg"> <a href="">移動4G+專區</a></div></div><div class="content_div_1"><div><img src="img/phone1.png"> <a href="">小米8</a></div><div><img src="img/phone2.png"> <a href="">小米MIX2</a></div><div><img src="img/phone4.jpg"> <a href="">移動4G+專區</a></div></div><div class="content_div_1"><div><img src="img/phone1.png"> <a href="">小米8</a></div><div><img src="img/phone2.png"> <a href="">小米MIX2</a></div><div><img src="img/phone4.jpg"> <a href="">移動4G+專區</a></div></div> <div class="content_div_1"><div><img src="img/phone1.png"> <a href="">小米8</a></div><div><img src="img/phone2.png"> <a href="">小米MIX2</a></div><div><img src="img/phone4.jpg"> <a href="">移動4G+專區</a></div></div></div> </div> </body></html>總結
- 上一篇： 常用的服务器系统,常用的服务器操作系统
- 下一篇： 适配ios7