实战项目 仿写小米商城 网页框架
生活随笔
收集整理的這篇文章主要介紹了
实战项目 仿写小米商城 网页框架
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>小米商城 - 小米MIX 3、紅米Note 7、小米8、小米電視官方網站</title><link rel="icon" href="images/favicon.ico"/><link rel="stylesheet" href="css/reset.css"/><link rel="stylesheet" href="css/xiaomiStyle.css"/><link rel="stylesheet" href="css/iconfont.css"/>
</head>
<body><!--黑手導航條開始--><div class="black_nav"><div class="wrap"><ul class="left_ul"><li><a href="#">小米商城</a><span></span>|</li><li><a href="#">MIUI</a><span></span>|</li><li><a href="#">IoT</a><span></span>|</li><li><a href="#">云服務</a><span></span>|</li><li><a href="#">金融</a><span></span>|</li><li><a href="#">有品</a><span></span>|</li><li><a href="#">小愛開放平臺</a><span></span>|</li><li><a href="#">政企服務</a><span></span>|</li><li><a href="#">資質證照</a><span></span>|</li><li><a href="#">協議規則</a><span></span>|</li><li><a href="#">下載app</a><span></span>|</li><li><a href="#">Select Region</a><span></span>|</li></ul><ul class="right_ul"><li><a href="#">登陸</a><span>|</span></li><li><a href="#">注冊</a><span>|</span></li><li><a href="#">消息通知</a></li><li class="cart"><a href="#"><i class="iconfont"></i>購物車(0)</a><div class="hidden_cart">購物車中還沒有商品，趕緊選購吧！</div></li></ul></div></div><!--黑手導航條結束--><!--白色導航欄開始--><div class="white_nav"><div class="wrap"><img src="images/logo-footer.png" alt="" class="logo"/><ul class="mi_nav"><li><a href="#">小米手機</a><div class="mi_nav_hidden"></div></li><li><a href="#">紅米</a> <div class="mi_nav_hidden"></div></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><li><a href="#">社區</a></li><li class="search"><input type="text"/><button class="iconfont"></button></li></ul></div></div><!--白色導航欄結束--><!--輪播圖和滑動門開始--><div class="wrap carousel"><div class="hdm"><ul><li><a href="#">手機 電話卡</a><i class="iconfont"></i><div class="hdm_hidden"></div></li><li><a href="#">電視 盒子</a><i class="iconfont"></i><div class="hdm_hidden"></div></li><li><a href="#">筆記本 平板</a><i class="iconfont"></i></li><li><a href="#">家電 插線板</a><i class="iconfont"></i></li><li><a href="#">家電 插線板</a><i class="iconfont"></i></li><li><a href="#">家電 插線板</a><i class="iconfont"></i></li><li><a href="#">家電 插線板</a><i class="iconfont"></i></li><li><a href="#">家電 插線板</a><i class="iconfont"></i></li><li><a href="#">家電 插線板</a><i class="iconfont"></i></li><li><a href="#">家電 插線板</a><i class="iconfont"></i></li></ul></div><div class="prev"></div><div class="next"></div></div><!--輪播圖和滑動門結束-><!--小米小廣告位開始--><div class="wrap ad"><ul><li class="before"><i class="iconfont"></i><br/>選購手機</li><li class="before"><i class="iconfont"></i><br/>選購手機</li><li class="before"><i class="iconfont"></i><br/>選購手機</li><li><i class="iconfont"></i><br/>選購手機</li><li><i class="iconfont"></i><br/>選購手機</li><li><i class="iconfont"></i><br/>選購手機</li></ul><img src="images/xmad_15500580021576_iymFx.jpg" alt=""/><img src="images/xmad_15410029988871_TdzPQ.jpg" alt=""/><img src="images/xmad_1550022313197_PMtDb.jpg" alt=""/></div><!--小米小廣告位結束-->
<!--小米閃購開始--><div class="wrap sg"><div><h2>小米閃購</h2><div class="sg_arrow"><span><</span><span>></span></div></div><div class="sg_box"><div><img src="images/sj.png" alt=""/> </div><div class="sg_item"><img src="images/pms_1538031692.35815325!220x220.jpg" alt=""/><h4>米家只能家庭家居看護套裝</h4><p>智能家庭家具</p><span>259元<s>296元</s></span></div><div class="sg_item"><img src="images/pms_1538031692.35815325!220x220.jpg" alt=""/><h4>米家只能家庭家居看護套裝</h4><p>智能家庭家具</p><span>259元<s>296元</s></span></div><div class="sg_item"><img src="images/pms_1538031692.35815325!220x220.jpg" alt=""/><h4>米家只能家庭家居看護套裝</h4><p>智能家庭家具</p><span>259元<s>296元</s></span></div><div class="sg_item"><img src="images/pms_1538031692.35815325!220x220.jpg" alt=""/><h4>米家只能家庭家居看護套裝</h4><p>智能家庭家具</p><span>259元<s>296元</s></span></div></div><img src="images/xmad_15500232485691_uYPkv.jpg" alt="" class="ad_img"/></div>
<!--小米閃購結束-->
<!--手機開始--><div class="phone_container"><div class="wrap"><div class="phone_box"><h2>手機 <a href="#">查看全部 <i class="iconfont"></i></a></h2></div><div class="phone_item"><div class="item_left"><img src="images/xmad_1544580545953_UvEXK.jpg" alt=""/></div><div class="item_right"><div><b>新品</b><img src="images/pms_1545457703.71734471!220x220.png" alt=""/><h4>米家只能家庭家居看護套裝</h4><p>智能家庭家具</p><span>259元<s>296元</s></span></div><div> <b>新品</b><img src="images/pms_1545457703.71734471!220x220.png" alt=""/><h4>米家只能家庭家居看護套裝</h4><p>智能家庭家具</p><span>259元<s>296元</s></span></div><div> <b>新品</b><img src="images/pms_1545457703.71734471!220x220.png" alt=""/><h4>米家只能家庭家居看護套裝</h4><p>智能家庭家具</p><span>259元<s>296元</s></span></div><div> <b>新品</b><img src="images/pms_1545457703.71734471!220x220.png" alt=""/><h4>米家只能家庭家居看護套裝</h4><p>智能家庭家具</p><span>259元<s>296元</s></span></div><div> <b>新品</b><img src="images/pms_1545457703.71734471!220x220.png" alt=""/><h4>米家只能家庭家居看護套裝</h4><p>智能家庭家具</p><span>259元<s>296元</s></span></div><div> <b>新品</b><img src="images/pms_1545457703.71734471!220x220.png" alt=""/><h4>米家只能家庭家居看護套裝</h4><p>智能家庭家具</p><span>259元<s>296元</s></span></div><div> <b>新品</b><img src="images/pms_1545457703.71734471!220x220.png" alt=""/><h4>米家只能家庭家居看護套裝</h4><p>智能家庭家具</p><span>259元<s>296元</s></span></div><div> <b>新品</b><img src="images/pms_1545457703.71734471!220x220.png" alt=""/><h4>米家只能家庭家居看護套裝</h4><p>智能家庭家具</p><span>259元<s>296元</s></span></div></div></div><img src="images/xmad_15486596829568_opVwS.jpg" alt="" class="ad_img"/></div></div>
<!--手機結束-->
</body>
</html>
CSS樣式表
reset
iconfont
@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1550044414267'); /* IE9 */src: url('iconfont.eot?t=1550044414267#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAW0AAsAAAAACmAAAAVoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHgqHeIZqATYCJAMUCwwABCAFhG0HYRv7CBEVpPGR/RxwN4PLn5OikqJl24I+W5mhkR5JmZm5g+f/136/zz13hHmIN7XoSVQbnkS7WaQ0CAlCYpHEo3wL9c8QnnaDks1JR7Ed1A5iOuihgXrIwQvY2hT9hxERiiWxXX56Rn6s0JDvEFo2AA6OmS6aNrA82mwuFbfIxtLNBjjBAUW01Rf+2/M/2aP+Up7FhKNS4bf5MAQISKcUafTwCwM+FqSXvGw5PZUFfM+OreEIvskFFlqRC8CDbw45L1BxLn9f/jAIPxgcBU3snXVPArVfRf9Dxf5jxHACUI7nBXbLQIFSwIJMg/5RVOtKJQYQ2nqdux8lmK+1ZxX/Q0o7rFO+Rx3jn+eCMDqn1hYsfK1RMRS+dkSwxMm2F0Tide4HmBKd/YIAiAdpB8gNQObcMf9Kg+IliBlwm2lxyPDKCwoGUYmKiRt2zgxg/dPrbbtmB9lDc7tZwWbxGyZ6upGw/j2Q8JDIBoBNawi3zaan0BgkA2qb7O3lYM+pw/UeVLqDVMln59CzKzcQiIHhnSHoiAZ1zrLn4A2oJNVSOYNN6tpAL0bvGEXWN0tbJDnYyWuTMfwKDrWd09GbPnJEax6Xm5djDBkuUa5zx4/rOi7Wf9x1agNxlSiPh6BhBhQWJgi6hiLaO+BE1oYuyajwcHZnXmKCEJNVONnXRRkcwpH1XtkhMgzHETIFJQg6QYVTZBJOMigldb04HgWx20e0s47HybDxBU7TnJrBpsPbOzv7ujo6uhOH7MhBPSJt7VgHTD0gvHPULhxB2rsBNoNKdmEfQV/xpbso3DEl26q7X5qEfvcjzUc9BloKPbKmW/4Qh4R9z8OI5aD5mR72yB92l/tH+tZ+d2/UyssIRfMa6yAOy9LIqt6ogeE/8VSpGn+RgJOeELqPmYpuvKrtJKlgz+iMwjhU99AAmQOVMcPupaVuQ3uIVEjNhjFCvL08D1tUSsW580Gkvc6SybKq21FYmMxc254fFM+0rOuQc00TEm8WE+Qf8UHjzKM73VZzj46iT4qPkq4q3r4iwWyEOnSDPlp+TeN6PWNlmcSKen5EFdxX6yh6p/oo0HNtqpoEqmpjg3gzd+r4Fj2gpT8Q3yOAZ990uzqdr06ENovO8iWUmtOHWpxM+ZQOBpj/VjTaCX1IsQVf5Z2mIeIu1x7VqybryFRrWLoy5VN0NvdqWQULpymjjXfTSnmq+P9PFalayXGxBUFlXEOJnEGcgUNZZbxl3MMMfQfO4OGyLs1cVLk5gmP5s7tqrUIgw2ZbP8HCNQ6HbKM07rgv5stVK/35VGVUfR+67XPpTpPsJHwv9R4cDAlNesFvPYNpL95jdWuPhUTdPqyMjH2rkDN0p/M6adjoKDiLHrFVA/mX9f2gDAh/hjP6Vt3yLKZHtFLyGvSBuVEc1x9m+Zs7iP/ftYXxInZf+eFPc+r58O2/Qtbfh1nQz4n/XgYEvqcJyx3+P51NQDnHAjUKqaKKFgKHbbysAQKcghCgcCKf4xhTWiv/BsYUCwaPNFB8comWWgoOEcrAxacGAkpoWR4hiRUUsVFAMbsZCPFcgSGWW1DiuSNa6gc4pPIPXOKFCwKGRWLDCPkicerAOAmuMP/ALZQ1cYlS5Vc0JU7sqiX3iby7FPRNF5YumJHHmLK/zSCiQTMlOGfHYYwEG5PHRRorso1tq6EnNQulSnFgnARXmH/gFsqatxYV/fwVTYkT19S9SD6Rd9c+9E3XgnjB3KruWrrvbzOI6HKYZkpwzr0YcZ5gg/t5XKSxPbLb2BbNdFts5jemx1j5e2mILnLEiIoVR1zqOSqfslgMlE0tyHp9S/6gm0m9XnG1d1Ouvy5HgQayVRU=') format('woff2'),url('iconfont.woff?t=1550044414267') format('woff'),url('iconfont.ttf?t=1550044414267') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1550044414267#iconfont') format('svg'); /* iOS 4.1- */ }.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-gouwuchekong:before {content: "\f0179"; }.icon-tengxunweibo:before {content: "\f01b0"; }.icon-qqkongjian:before {content: "\e674"; }.icon-xinlangweibo:before {content: "\e67a"; }xiaomiStyle
/*黑色導航條開始*/ .black_nav{width: 100%;height: 40px;line-height: 40px;background-color: #333;color: #424242; } .wrap{width: 1226px;margin: 0 auto; } .left_ul,.left_ul>li,.right_ul>li{float: left; } .left_ul a,.right_ul a{color: #b0b0b0;font-size: 12px;margin: 0 5px; } .left_ul a:hover,.right_ul a:hover{color: #fff; } .right_ul{float: right; } .cart i{margin-right: 5px; } .cart{width: 120px;height: 40px;background-color: #424242;position: relative; } .cart:hover{background-color: #fff; } .cart:hover a{color:orange; } .hidden_cart{width: 320px;height: 0;background-color: #fff;position: absolute;right: 0;top:40px;overflow: hidden;transition: all .5s;z-index: 88;/*line-height: 100px;*/ } .cart:hover .hidden_cart{height: 100px;line-height: 100px;box-shadow: 0 2px 10px rgba(0,0,0,.2); } /*黑色導航條結束*/ /*白色導航欄開始*/ .white_nav{clear: both;width: 100%;height: 100px;line-height: 100px;position:relative; } .logo,.mi_nav{float: left; } .mi_nav>li{float: left; } .logo{margin-top: 21.5px;margin-right: 190px; } .mi_nav>li>a{color: #757575;font-size: 16px;margin-right: 20px; } .mi_nav>li>a:hover{color: #ff6700; } .mi_nav{width: 980px; } .mi_nav>.search{float: right; } .search>input{width: 243px;height: 48px;border: 1px solid #e0e0e0;float: left;border-right: none;outline: none;transition: all .3s; } .search{margin-top: 25px; } .search>button{width: 50px;height: 50px;border: 1px solid #e0e0e0;float: left;background-color: #fff;font-weight: bold;outline: none;font-size: 20px;transition: all .3s; } .search>button:hover{background-color: #ff6700;color: #fff;border-color: #ff6700; } .search>input:focus,.search>input:focus+button{border-color: #ff6700; } .mi_nav_hidden{width: 100%;height: 230px;background-color: red;position: absolute;left: 0;top: 100px;display: none; } .mi_nav>li:hover>.mi_nav_hidden{display: block; } /*白色導航欄結束*/ /*輪播圖和滑動門開始*/ .carousel{width: 1226px;height: 460px;background: url("../images/xmad_15481253648514_fHtzd.jpg");background-size: cover;-webkit-animation:carousel 10s infinite ;position: relative; } @-webkit-keyframes carousel {0%{background-image: url("../images/xmad_15481253648514_fHtzd.jpg");} 25%{background-image: url("../images/xmad_15486597522208_HOEjJ.jpg");} 50%{background-image: url("../images/xmad_15489036241498_XVwut.jpg");} 75%{background-image: url("../images/xmad_15500560064953_Bgumq.jpg");}100%{background-image: url("../images/xmad_15488151829917_hENZU.jpg");} } .hdm{width: 234px;height: 460px;background-color: rgba(0,0,0,.5);padding: 20px 0;box-sizing: border-box;position: relative; } .hdm li{height: 42px;line-height: 42px;text-align: left;padding-left: 30px; } .hdm li a{color: #fff; } .hdm li:hover{background-color: #ff6700; } .hdm i{float: right;margin-right: 30px;color: rgba(255,255,255,.5);font-weight: bold;font-size: 20px; } .hdm_hidden{width: 992px;height: 460px;background-color: #fff;position: absolute;top: 0;left: 234px;box-shadow: 5px 5px 10px rgba(0,0,0,.2);display: none;z-index: 66; } .hdm li:hover>.hdm_hidden{display: block; } .prev,.next{width: 41px;height: 69px;background: url("../images/icon-slides.png");position: absolute;top:50%;margin-top: -34.5px;cursor: pointer; } .prev{left: 234px;background-position: -83px 0; } .next{right: 0;background-position: -124px 0; } .prev:hover{background-position: 0 0; } .next:hover{background-position: -42px 0; } /*輪播圖和滑動門結束*/ /*小米小廣告位開始*/ .ad{margin-top: 15px;overflow: hidden; } .ad>ul,.ad>img{float: left; } .ad>img{width: 316px;height: 170px; } .ad>ul{width: 234px;height: 170px;background-color: #5f5750;; } .ad>ul>li{float: left;width: 70px;color: rgba(255,255,255,0.7);padding: 25px 0;font-size: 12px;border-right: 3px solid #665e57; } .ad>ul>li:nth-child(3),.ad>ul>li:nth-child(6){border-right:0; } .ad .before{border-bottom:3px solid #665e57; } .ad>img{margin-left: 14.6px; } /*小米小廣告位結束*/ /*小米閃購開始*/ .sg{margin-top: 40px; } .sg h2{text-align: left;float: left;font-weight: normal; } .sg_arrow{float: right; } .sg_arrow>span{width: 36px;height: 24px;border: 1px solid #e0e0e0;display: inline-block;line-height: 24px;float: left;font-weight: bold;color:#e0e0e0; } .sg_box{clear: both;padding-top: 20px; } .sg_box>div{width: 234px;height: 339px;background-color: #fafafa;float: left;margin-right: 14px; } .sg_box>div:last-child{margin-right: 0; } .sg_box>div:first-child{border-top:1px solid #e53935; } .sg_box>div:nth-child(2){border-top:1px solid #ffac13; } .sg_box>div:nth-child(3){border-top:1px solid #83c44e; }.sg_box>div:nth-child(4){border-top:1px solid #2196f3; }.sg_box>div:nth-child(5){border-top:1px solid #83c44e; }.sg_item>img,.item_right img{width: 160px;margin: 30px 0 25px 0;} .sg_item>h4,.item_right h4{font-weight: normal;margin-bottom: 10px; } .sg_item>p,.item_right p{font-size: 12px;color: #b0b0b0;margin-bottom: 20px; } .sg_item>span,.item_right span{color: #ff6700; } .sg_item>span>s,.item_right s{color: #b0b0b0;display: inline-block;margin-left: 10px; } .ad_img{width: 100%;margin: 40px 0; } /*小米閃購結束*/ /*手機開始*/ .phone_container{width: 100%;background-color: #f5f5f5;padding-top: 40px;overflow: hidden; } .phone_box>h2{text-align: left;font-weight: normal; } .phone_box>h2>a{float: right;font-size: 16px;color: #333333; } .phone_box>h2>a:hover{color: #ff6700; } .phone_box>h2 i{font-size: 20px; } .item_left,.item_right{height: 614px;float: left; } .item_left{width: 234px;transition: all .5s; } .item_left>img{width: 100%; } .phone_item{margin-top: 20px; } .item_right{width: 992px; } .item_right>div{width: 234px;height: 300px;background-color: #fff;float: left;margin-left: 14px;margin-bottom: 14px;position:relative;transition: all .5s; } .item_right b{width: 64px;height: 20px;background-color: #83c44e;;display: inline-block;color: #fff;font-weight: normal;font-size: 12px;line-height: 20px;position: absolute;top: 0;left: 50%;margin-left: -32px; } .item_left:hover,.item_right>div:hover{transform: translate(0,-5px);box-shadow: 0 15px 30px rgba(0,0,0,.2); } /*手機結束*/總結
以上是生活随笔為你收集整理的实战项目 仿写小米商城 网页框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [BZOJ 1046] [HAOI200
- 下一篇： 「OC」类的深入研究、descripti