css3+html仿小米官网商城项目。

效果图:

代码:
html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小米商城 - 小米11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 处理默认样式 --><link rel="stylesheet" href="../css/reset.css"><!-- 公共的css --><link rel="stylesheet" href="../css/style.css"><!-- 首页的css --><link rel="stylesheet" href="../css/index.css"><!-- 引入网页标题图标 --><link rel="stylesheet" href="../css/iconfont.css">
</head>
<body><!-- 顶部 S --><div class="page-top"><div class="container"><div class="top_left"><a href="#">小米商城</a><span>|</span><a href="#">MIUI</a><span>|</span><a href="#">IoT</a><span>|</span><a href="#">云服务</a><span>|</span><a href="#">天星数科</a><span>|</span><a href="#">有品</a><span>|</span><a href="#">小爱开放平台</a><span>|</span><a href="#">企业团购</a><span>|</span><a href="#">资质证照</a><span>|</span><a href="#">协议规则</a><span>|</span><a href="#" class="download">下载app<div class="down_bottom"><p class="arrow"></p><img src="../image/download.png" alt=""><p>小米商城App</p></div></a><span>|</span><a href="#">智能生活</a><span>|</span><a href="#">Select Location</a><span>|</span></div><div class="top_right"><div class="car_box"><div class="shop_tit"><a href="#"  class="tit"><i class="iconfont icon-gouwuche2"></i>购物车(<span class="num_size">0</span>)</a><div class="pop"><!-- else --><!-- <p class="no-good">购物车中还没有商品,赶紧选购吧！<a href="#" class=""></a></p> --><!-- if --><ul class="list"><li><a href="#" class="pic"><img src="../image/image_1.jpg" alt=""></a><div class="txt"> 小米9 全网通版</div><div class="num"><h4>3299元 X 1</h4><i>X</i></div></li><li><a href="#" class="pic"><img src="../image/image_1.jpg" alt=""></a><div class="txt"> 小米9 全网通版</div><div class="num"><h4>3299元 X 1</h4><i>X</i></div></li><li><a href="#" class="pic"><img src="../image/image_1.jpg" alt=""></a><div class="txt"> 小米9 全网通版</div><div class="num"><h4>3299元 X 1</h4><i>X</i></div></li><li><a href="#" class="pic"><img src="../image/image_1.jpg" alt=""></a><div class="txt"> 小米9 全网通版</div><div class="num"><h4>3299元 X 1</h4><i>X</i></div></li><li><a href="#" class="pic"><img src="../image/image_1.jpg" alt=""></a><div class="txt"> 小米9 全网通版</div><div class="num"><h4>3299元 X 1</h4><i>X</i></div></li><li><a href="#" class="pic"><img src="../image/image_1.jpg" alt=""></a><div class="txt"> 小米9 全网通版</div><div class="num"><h4>3299元 X 1</h4><i>X</i></div></li></ul><div class="total"><div class="price"><p>共8件商品</p><h3>6062元</h3></div><a href="#" class="btn">立即结算</a></div></div></div></div><div class="login"><a href="#">登录</a><span>|</span><a href="#">注册</a><span>|</span><a href="#">消息通知</a></div><!-- <div class="userinfo"><div class="user"><a href="#" class="tit">用户 ~ ~</a><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></ul></div><a href="#" class="link">消息通知</a><span>|</span><a href="#" class="link">我的订单</a><span>|</span></div> --></div></div></div><!-- 顶部 E --><!-- 导航 S --><div class="page-nav"><div class="container"><a href="#" class="logo"><i class="iconfont icon-icon-xiaomiguishu"></i></a><!-- 导航 --><ul class="nav"><li class="nav-item" id="page-all-nav"><a href="#" class="tit">全部商品分类</a><div class="slider-nav"><ul class="slider-ui"><li class="slider-li"><a href="" class="name"><span>手机</span><span>电话卡</span><i class="iconfont icon-youbianjiantou"></i></a><div class="slider-pop"><a href="" class="pop-li"><img src="../image/image_3.png" alt=""><p>xiaomi Civi</p></a><a href="" class="pop-li"><img src="../image/image_3.png" alt=""><p>xiaomi Civi</p></a><a href="" class="pop-li"><img src="../image/image_3.png" alt=""><p>xiaomi Civi</p></a><a href="" class="pop-li"><img src="../image/image_3.png" alt=""><p>xiaomi Civi</p></a><a href="" class="pop-li"><img src="../image/image_3.png" alt=""><p>xiaomi Civi</p></a><a href="" class="pop-li"><img src="../image/image_3.png" alt=""><p>xiaomi Civi</p></a><a href="" class="pop-li"><img src="../image/image_3.png" alt=""><p>xiaomi Civi</p></a><a href="" class="pop-li"><img src="../image/image_3.png" alt=""><p>xiaomi Civi</p></a></div></li><li class="slider-li"><a href="" class="name"><span>手机</span><span>电话卡</span><i class="iconfont icon-youbianjiantou"></i></a></li><li class="slider-li"><a href="" class="name"><span>手机</span><span>电话卡</span><i class="iconfont icon-youbianjiantou"></i></a></li><li class="slider-li"><a href="" class="name"><span>手机</span><span>电话卡</span><i class="iconfont icon-youbianjiantou"></i></a></li><li class="slider-li"><a href="" class="name"><span>手机</span><span>电话卡</span><i class="iconfont icon-youbianjiantou"></i></a></li><li class="slider-li"><a href="" class="name"><span>手机</span><span>电话卡</span><i class="iconfont icon-youbianjiantou"></i></a></li><li class="slider-li"><a href="" class="name"><span>手机</span><span>电话卡</span><i class="iconfont icon-youbianjiantou"></i></a></li><li class="slider-li"><a href="" class="name"><span>手机</span><span>电话卡</span><i class="iconfont icon-youbianjiantou"></i></a></li><li class="slider-li"><a href="" class="name"><span>手机</span><span>电话卡</span><i class="iconfont icon-youbianjiantou"></i></a></li><li class="slider-li"><a href="" class="name"><span>手机</span><span>电话卡</span><i class="iconfont icon-youbianjiantou"></i></a></li></ul></div></li><li class="nav-item"><a href="#" class="tit">小米手机</a><div class="pop"><ul class="down-ul container"><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米9</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米9</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米9</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米9</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米9</h3><p class="price">2999元</p><i></i></li><li class="down-li last"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米9</h3><p class="price">2999元</p><i></i></li></ul></div></li><li class="nav-item"><a href="#" class="tit">Redmi 红米</a><div class="pop"><ul class="down-ul container"><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">Redmi Note</h3><p class="price">299元起</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">Redmi Note</h3><p class="price">299元起</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">Redmi Note</h3><p class="price">299元起</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">Redmi Note</h3><p class="price">299元起</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">Redmi Note</h3><p class="price">299元起</p><i></i></li><li class="down-li last"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">Redmi Note</h3><p class="price">299元起</p><i></i></li></ul></div></li><li class="nav-item"><a href="#" class="tit">电视</a><div class="pop"><ul class="down-ul container"><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米电视 6 55 OLED</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米电视 6 55 OLED</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米电视 6 55 OLED</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米电视 6 55 OLED</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米电视 6 55 OLED</h3><p class="price">2999元</p><i></i></li><li class="down-li last"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米电视 6 55 OLED</h3><p class="price">2999元</p><i></i></li></ul></div></li><li class="nav-item"><a href="#" class="tit">笔记本</a><div class="pop"><ul class="down-ul container"><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">笔记本</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">笔记本</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">笔记本</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">笔记本</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">笔记本</h3><p class="price">2999元</p><i></i></li><li class="down-li last"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">笔记本</h3><p class="price">2999元</p><i></i></li></ul></div></li><li class="nav-item"><a href="#" class="tit">平板</a><div class="pop"><ul class="down-ul container"><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">平板</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">平板</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">平板</h3><p class="price">2999元</p><i></i></li></ul></div></li><li class="nav-item"><a href="#" class="tit">家电</a><div class="pop"><ul class="down-ul container"><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">米家扫拖机器人</h3><p class="price">2999元</p><i></i></li><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">米家净化器</h3><p class="price">2999元</p><i></i></li></ul></div></li><li class="nav-item"><a href="#" class="tit">路由器</a><div class="pop"><ul class="down-ul container"><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米路由器</h3><p class="price">2999元</p><i></i></li></ul></div></li><li class="nav-item"><a href="#" class="tit">智能硬件</a><div class="pop"><ul class="down-ul container"><li class="down-li"><span class="tags">新品</span><a href="#" class="pic"><img src="../image/image_2.png" alt=""></a><h3 class="name">小米只能门锁 1S</h3><p class="price">2999元</p><i></i></li></ul></div></li><li class="nav-item"><a href="#" class="tit">服务</a></li><li class="nav-item"><a href="#" class="tit">社区</a></li></ul><!-- 搜索 --><div class="search"><form action="" method="POST"><input type="text" class="q"><input type="submit" value="" class="btn" /><i class="iconfont icon-sousuo search-i"></i><div class="tags"><span>小米9</span><span>小米9SE</span></div></form><ul class="hot"><li><a href="#"><span>小米6X </span><i>约有6件</i></a></li><li><a href="#"><span>小米MIX  </span><i>约有6件</i></a></li><li><a href="#"><span>小米6X </span><i>约有6件</i></a></li><li><a href="#"><span>小米6X </span><i>约有6件</i></a></li><li><a href="#"><span>小米6X </span><i>约有6件</i></a></li><li><a href="#"><span>小米6X </span><i>约有6件</i></a></li><li><a href="#"><span>小米6X </span><i>约有6件</i></a></li><li><a href="#"><span>小米6X </span><i>约有6件</i></a></li></ul></div></div></div><!-- 导航 E--><!-- 轮播S --><div class="center_s"><div class="idx-banner container"><ul class="banner-list"><li><img src="../image/banner_1.jpg" alt=""><a href=""></a></li><li><img src="../image/bannner_2.jpg" alt=""><a href=""></a></li><li><img src="../image/bannner_3.jpg" alt=""><a href=""></a></li><li><img src="../image/banner_4.jpg" alt=""><a href=""></a></li></ul><a href="" class="btn prev"><i class="iconfont icon-youbianjiantou left_i"></i></a><a href="" class="btn next"><i class="iconfont icon-youbianjiantou"></i></a><div class="page"><a href="#"><span></span></a><a href="#"><span></span></a><a href="#"><span></span></a><a href="#"><span></span></a></div></div><!-- 菜单 --><div class="idx-menu-dev container"><ul class="menu"><li class="br"><a hr ef=""><i class="iconfont icon-dingshi"></i><span>保障服务</span></a></li><li class="br"><a href=""><i class="iconfont icon-qiye"></i><span>企业团购</span></a></li><li class=" "><a href=""><i class="iconfont icon-F"></i><span>F码通道</span></a></li><li class="bb br"><a href=""><i class="iconfont icon-simqia ka_ka"></i><span>米粉卡</span></a></li><li class="bb br"><a href=""><i class="iconfont icon-chongzhi"></i><span>以旧换新</span></a></li><li class="bb"><a href=""><i class="iconfont icon-chongzhi"></i><span>话费充值</span></a></li></ul><a href="" class="pic"><img src="../image/mi_1.jpg" alt=""></a><a href="" class="pic"><img src="../image/mi_2.jpg" alt=""></a><a href="" class="pic"><img src="../image/mi_3.png" alt=""></a></div></div><!-- 轮播E -->
</body>
</html>

iconfont.css

@font-face {font-family: "iconfont"; /* Project id 2840586 */src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),url('//at.alicdn.com/t/font_2840586_gqjhruttff.woff?t=1632819481708') format('woff'),url('//at.alicdn.com/t/font_2840586_gqjhruttff.ttf?t=1632819481708') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-shouji:before {content: "\e601";
}.icon-chongzhi:before {content: "\e602";
}.icon-F:before {content: "\e603";
}.icon-gouwuche2:before {content: "\e604";
}.icon-tianmaoqitiantuihuo:before {content: "\e605";
}.icon-huidaodingbu:before {content: "\e606";
}.icon-simqia:before {content: "\e647";
}.icon-31dingwei:before {content: "\e607";
}.icon-weixin:before {content: "\e660";
}.icon-liwu:before {content: "\e685";
}.icon-15tianbaotui01:before {content: "\e688";
}.icon-youbianjiantou:before {content: "\e637";
}.icon-35_xiangxiajiantou:before {content: "\e615";
}.icon-weibo:before {content: "\e65a";
}.icon-kefu:before {content: "\e88f";
}.icon-dingshi:before {content: "\e649";
}.icon-weixiu:before {content: "\e62d";
}.icon-youjiantou:before {content: "\e61a";
}.icon-qiye:before {content: "\e91d";
}.icon-geren:before {content: "\e60d";
}.icon-right-circle-fill:before {content: "\eb22";
}.icon-icon-xiaomiguishu:before {content: "\e613";
}.icon-sousuo:before {content: "\e600";
}

index.css

/* 全部菜单样式 */
.slider-nav{background-color: rgb(0, 0, 0,0.18);width: 234px;height: 420px;border:none;
}
.slider-nav .slider-li .name{color:#fff;}
#page-all-nav .slider-nav{/* visibility: hidden; */
}
/* 首页轮播样式 */
.center_s{width: 100%;background-color: #fff;
}
.idx-banner{height: 420px;position: relative;
}
.idx-banner ul{width: 2000px;height: 420px;overflow: hidden;
}
.idx-banner li{width: 1206px;height: 460px;float: left;position: relative;
}
.idx-banner li img{width: 1206px;height: 420px;
}
.idx-banner li a{position: absolute;width: 972px;height: 420px;top:0;right:0;
}
.idx-banner .btn{position: absolute;top:50%;margin-top: -35px;width: 40px;height: 70px;line-height: 70px;text-align: center;/* background-color: red; */
}
.idx-banner .btn i{font-size: 30px;display: block;
}
.idx-banner .prev{left: 233px;
}
.idx-banner .prev:hover{background-color: #9e9d9f;
}
.idx-banner .prev:hover i{color:#fff;
}
.idx-banner .next{right: -2px;
}
.idx-banner .next:hover{background-color: #9e9d9f;}
.idx-banner .next:hover i{color:#fff;
}
.idx-banner .left_i{transform: rotate(180deg);
}.idx-banner .page{position: absolute;bottom: 12px;right:0;padding-right: 31px;
}
.idx-banner .page a,.idx-banner .page a span{display: inline-block;
}
.idx-banner .page a{width: 10px;height: 10px;border: 2px solid #fff;border-color: hsla(0,0%,100%,.3);border-radius: 10px;background: rgba(0,0,0,.4);opacity: 1;margin: 0 4px;
}
.idx-banner .page a:hover{background: hsla(0,0%,100%,.4);border-color: rgba(0,0,0,.4);
}
.idx-banner .page a span{visibility: hidden;
}
/* 菜单 */
.idx-menu-dev{padding-top: 14px;padding-bottom: 26px;overflow: hidden;
}
.idx-menu-dev .menu{width: 234px;padding: 3px;background-color: #5f5750;float: left;
}
.idx-menu-dev .menu li{float: left;width: 70px;height: 82px;padding: 0 3px;text-align: center;position: relative;color:#c3c0bd;
}
.idx-menu-dev .menu li a{padding-top: 14px;display: block;
}
.idx-menu-dev .menu li i{font-size: 26px;display: block;
}
.idx-menu-dev .menu li span{display: block;
}
.idx-menu-dev .menu li.bb:before{width: 54px;height: 1px;content: '';display: block;background-color: #665e57;position: absolute;top: 0;right: 8px;
}
.idx-menu-dev .menu li.br:after{width:1px;height: 72px;content:'';display: block;background-color:#665e57;position: absolute;top: 5px;right:0;
}
.idx-menu-dev .menu li:hover{color:#fff;
}
.idx-menu-dev .pic{display: block;width: 304px;height: 165px;margin-left: 20px;float: left;
}
.idx-menu-dev .pic img{display: block;width: 100%;height: 100%;
}
.ka_ka{transform: rotate(90deg);
}

reset.css

html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,address,em,img,ol,ul,li,fieldset,form,label,legend,table,tbody,tfoot,thead,tr,th,td,i,b,s{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-family:Helvetica,Arial; word-break: break-all;}html,body{height: 100%;}.font-yahei{font-family: "微软雅黑";}body>.main{overflow-y: auto;}select{appearance: none;-webkit-appearance: none;-ms-appearance: none;-moz-appearance: none;background-color: transparent;}
a{color:inherit;text-decoration: none;
}
ul,ol{list-style:none}a img{border:none;}button{overflow:visible;padding:0;margin:0;border:0 none;background-color:transparent;appearance: none;-webkit-appearance:none;}button::-moz-focus-inner{padding:0}textarea,input{background:none;padding:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}input[type=number]{appearance: none;-webkit-appearance: none; border: 0;}input[type=search]{appearance: none;-webkit-appearance: none; border: 0;}input[type=text]{appearance: none;-webkit-appearance: none; border: 0;}input[type=tel]{appearance: none;-webkit-appearance: none; border: 0;}input[type=button]{appearance: none;-webkit-appearance: none;}input[type=password]{-webkit-text-security:disc;appearance: none;-webkit-appearance: none; border: 0;}input[type=submit]{appearance: none;-webkit-appearance: none; border: 0;}textarea:focus,input:focus,button:focus{outline:none}body{word-wrap:break-word;font-size:14px;color:#000;line-height:1.5;font-family:Helvetica}*{-webkit-tap-highlight-color:rgba(0,0,0,0);overflow-scrolling: touch;-webkit-overflow-scrolling: touch;backface-visibility: hidden;-webkit-backface-visibility: hidden;box-sizing: border-box;}[v-cloak]{opacity: 0!important;}.w-1200{width: 1200px;margin: 0 auto;}.inline_div{ display: inline-block;}.block{ display: block!important;}

style.css


body{font-size: 12px;color:#333333;background-color: #f5f5f5;
}
/* 顶部样式 */
.container{width: 1206px;margin-left:auto;margin-right: auto;
}
.page-top{height: 38px;background-color: #323232;
}
.page-top .top_left{color: #a2a2a2;;line-height: 38px;float: left;
}
.page-top .top_left span{color: #393f1a;padding: 0 3px;
}
.page-top .top_left a:hover{color: #fff;}
.page-top .top_left .download{position: relative;
}
.arrow{position: absolute;top: -21px;left: 50%;margin-left: -9px;width: 0;height: 0;line-height: 0;border-style: solid;border-width: 10px;font-size: 0;border-color: transparent transparent #fff transparent;
}
.down_bottom{position: absolute;top: 40px;left: 50%;width: 124px;height: auto;background: #fff;margin-left: -55px;-webkit-box-shadow: rgb(170, 170, 170) 0 1px 5px;box-shadow: rgb(170, 170, 170) 0 1px 5px;text-align: center;font-size: 14px;color: #333;line-height: 1;-webkit-transition: height .3s;transition: height .3s;padding-bottom: 18px;display: none;z-index: 2;
}
.page-top .top_left a{display: inline-block;
}
.page-top .top_left .down_bottom img{width: 88px;height: 88px;display: block;margin: 18px auto 12px;
}
.page-top .top_left .down_bottom p{text-align: center;
}
.page-top .top_left .down_bottom:hover p{color:#323232;
}
.page-top .top_left a.download:hover .down_bottom{display: block;
}
.page-top .top_right{float:right;
}
.page-top .top_right .login{color: #a2a2a2;line-height: 38px;float: right;margin-right: 20px;
}
.page-top .top_right  span{color: #393f1a;padding: 0 3px;
}.page-top .top_right .userinfo{float: right;line-height: 39px;
}
.page-top .top_right .userinfo .user{width: 120px;display: inline-block;position: relative;
}
.page-top .top_right .userinfo .user .tit{text-align: center;display: inline-block;width: 100%;
}
.page-top .top_right .userinfo .user .tit:hover{color:#f76b1b;
}
.page-top .top_right .userinfo .user ul{position: absolute;top:38px;left: 0;width: 120px;background-color: #fff;-webkit-transition: height .3s;transition: height .3s;background: #fff;-webkit-box-shadow: 0 1px 0px 1px rgb(0 0 0 / 3%);box-shadow: 0 1px 0px 1px rgb(0 0 0 / 3%);text-align: center;display: none;
}
.page-top .top_right .userinfo a{color: #a2a2a2;
}
.page-top .top_right .userinfo .user ul li{line-height: 30px;
}
.page-top .top_right .userinfo  li:hover{background-color: #f5f5f5;
}
.page-top .top_right .userinfo  li:hover a{color:#f76b1b;
}
.page-top .top_right .userinfo .user:hover{background-color: #fff;
}
.page-top .top_right .userinfo .user:hover ul{display: block;
}
.page-top .top_right .car_box{width: 118px;background-color: #424242;float: right;height: 38px;color: #a2a2a2;line-height: 39px;position: relative;text-align: center;
}
.page-top .top_right .car_box .shop_tit:hover{background-color: #fff;
}
.page-top .top_right .car_box .num_size{color:#a2a2a2;
}
.page-top .top_right .car_box  .pop{width: 316px;position: absolute;top:38px;right:0;background-color: #fff;-webkit-box-shadow: 0 1px 0px 1px rgb(0 0 0 / 3%);box-shadow: 0 1px 0px 1px rgb(0 0 0 / 3%);text-align: center;display: none;z-index: 3;
}
.page-top .top_right .car_box:hover .pop .no-goood{color:#a2a2a2;font-size: 13px;padding: 40px 0;
}
.page-top .top_right .car_box:hover .tit{background-color: #fff;color:#ff6700;
}
.page-top .top_right .car_box:hover .num_size{color:#ff6700;
}.page-top .top_right .car_box:hover .pop{display: block;
}
.page-top .pop .list{padding:0 20px;margin-top: 15px;max-height: 450px;overflow-y: scroll;
}
.page-top .pop .list  li{border-bottom: 1px solid #e0e0e0;padding:10px 0;overflow: hidden;
}
.page-top .pop .list  li:last-child{border:none;
}.page-top .pop .list  li .pic{float: left;
}
.page-top .pop .list img{width: 60px;height: 60px;
}.page-top .pop .list .txt{width: 130px;float: left;line-height: 60px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.page-top .pop .list .txt:hover{color:#ff6700;
}
.page-top .pop .list .num{float: right;text-align: right;line-height: 14px;
}
.page-top .pop .list .num h4{margin-top: 26px;font-weight: normal;font-size: 12px;
}
.page-top .pop .list .num i{font-style: normal;cursor: pointer;color:#aaa;
}
.page-top .pop .list .num i:hover{color:#333;
}
.page-top .pop .total{background-color: #fafafa;padding: 15px 10px;overflow: hidden;
}.page-top .pop .total .price{float: left;line-height: 20px;
}
.page-top .pop .total .price p{color:#7e7e7e;
}
.page-top .pop .total .price h3{font-size: 20px;color:#ff6700;font-weight: normal;
}
.page-top .pop .total .btn{width: 132px;height: 40px;background-color: #ff6700;color:#fff;text-align: center;line-height: 40px;float:right;display: block;
}
/* 导航样式 */
.page-nav{height: 96px;line-height: 96px;position: relative;background-color: #fff;
}
.page-nav .container a.logo{float: left;
}
.page-nav .container a.logo i{color:#ff6700;display: block;font-size: 50px;
}
.page-nav  .nav .nav-item{margin-left: 16px;padding: 0 4px;float: left;
}
.page-nav  .nav .nav-item .tit{font-size: 16px;color:#666;
}
.page-nav  .nav .nav-item:hover .tit{color:#ff6700;
}.page-nav  .nav .nav-item .pop{position: absolute;width: 100%;height: 230px;left:0;top:96px;background-color: #fff;-webkit-box-shadow: 0 3px 4px rgb(0, 0, 0,0.18);box-shadow: 0 3px 4px rgb(0, 0, 0,0.18);border-top:1px solid #e0e0e0;z-index: 4;display: none;
}.page-nav .down-ui{overflow: hidden;
}
.page-nav .down-li{width: 200px;float: left;padding-top: 30px;text-align: center;position: relative;
}
.page-nav .down-li .name{font-weight: normal;font-size: 13px;
}
.page-nav .down-li .name,.page-nav .down-li .price{line-height: 20px;
}
.page-nav .down-li .price{color:#ff6700;
}
.page-nav .down-li .pic img{width: 160px;height: 110px;
}
.page-nav .down-li .tags{width: 64px;height: 20px;border:1px solid #ff6700;text-align: center;line-height: 20px;position: absolute;left:50%;margin-left: -32px;top:0;color:#ff6700;z-index: 10;
}
.page-nav .down-li i{background-color: #e0e0e0;width: 1px;height: 100px;position: absolute;right: 0;top:36px;
}
.page-nav .down-ul li:last-child i{display: none;
}
.page-nav  .nav .nav-item:hover .pop{display: block;
}
#page-all-nav{/* visibility: hidden; */position: relative;
}
#page-all-nav .tit{visibility: hidden;
}/* 全部分类菜单样式 */
.slider-nav{position: absolute;width: 232px;height: 418px;border:1px solid #ff6700;background-color: #fff;right: -63px;top:96px;padding:20px 0;z-index: 3;
}
.slider-nav .slider-ui .slider-li{line-height: 37px;
}
.slider-nav .slider-ui .slider-li .name{font-size: 13px;display: block;padding:0 24px 0 30px;
}
.slider-nav .slider-ui .slider-li .name span{margin-right: 5px;
}
.slider-nav .slider-ui .slider-li i{float: right;
}
.slider-nav .slider-pop{position: absolute;width: 980px;height: 420px;background-color: #fff;left: 231px;top:0;-webkit-box-shadow: 0 8px 16px rgb(0, 0, 0,0.18);box-shadow: 0 8px 16px rgb(0, 0, 0,0.18);border:1px solid #e0e0e0;display: none;border:1px solid #e0e0e0;border-left:none;
}
.slider-nav .slider-ui .slider-li:hover .name{background-color: #ff6700;color:#fff;
}
.slider-nav .pop-li{float: left;width: 223px;text-align: center;overflow: hidden;padding-left: 24px;height: 56px;margin-bottom: 10px;padding-top: 26px;
}
.slider-nav .pop-li img{width: 40px;height: 40px;float: left;margin-right: 16px;
}
.slider-nav .pop-li:hover p{color:#ff6700;
}
.slider-nav .slider-li:hover .slider-pop{display: block;
}
/* 搜索样式 */
.page-nav .search{float: right;position: relative;margin-top: 24px;
}
.page-nav .search .q{width: 230px;height: 50px;border:1px solid #e0e0e0;outline: none;line-height: 50px;padding-left: 4px;float: left;border-right:none;}.page-nav .search .tags{position: absolute;top:0;right: 55px;width: 130px;text-align: right;line-height: 48px;
}
.page-nav .search .tags span{line-height: 18px;padding:0 5px;background-color: #eee;font-size: 12px;cursor: pointer;
}
.page-nav .search .tags span:hover{background-color: #ff6700;color:#fff;
}.page-nav .search ul{position: absolute;top:50px;
}.page-nav .search .btn{width: 50px;height: 50px;border:1px solid #e0e0e0;float: left;background-color: #fff;cursor: pointer;
}.page-nav .search .search-i{position: absolute;top:0;right:0;width: 50px;height: 50px;line-height: 50px;text-align: center;font-weight: bold;
}
.page-nav .search .search-i:hover{background-color: #ff6700;color:#fff;font-weight: bold;border-color: #ff6700;
}.search.active .q,.search.active .btn{border-color: #ff6700;
}
.search:hover .q,.search:hover .btn{border-color:#b0b0b0;
}
.search .hot{width: 230px;border:1px solid #ff6700;border-top:none;display: none;
}
.search .hot li{line-height: 30px;
}
.search .hot li a{display: block;padding:0 15px;color:#535353;
}
.search .hot li:hover{background-color: #fafafa;
}
.search .hot li i{float:right;font-weight: normal;color: #b0b0b0;
}

image：
图片自定去官网下载即可。
总结:这里简单写个布局，js动态效果暂时未添加,以后再补充。轮播效果之前的文章中有写过可以参考。

css3+html仿小米官网商城项目。相关推荐

仿小米官网php源码,精仿小米官网商城整站完美运营版源码Laravel内核
源码预览源码介绍运行环境:WIN-LINUX+APACHE2.4+PHP7.0+MYSQL5.5+伪静态服务器要求: 本系统Laravel框架对PHP版本和扩展有一定要求,有必要了解下这些以便确 ...
仿小米官网源码，2021年9月最新版
部分源码: <div class="header"><div class="page-top"><div class=" ...
Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
前端学习之仿小米官网HTML+CSS
一个简单的仿小米官网 index.css /* 主页index.html样式表 */ .topbar-wrapper{width: 100%;background-color:#333;height: ...
html制作小米官网代码,仿小米官网(html+js+css)
[实例简介] 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 [实例截图] [核心代码] 小米官网(高仿) └── xiaomi ├── css_1 │ ├── financ ...
HTML5响应式手机模板：【超炫购物模板】——仿拍鞋网商城手机网站模板( HTML+CSS+JavaScript) 企业手机网站模板
HTML5响应式手机模板:电商网站设计--仿拍鞋网商城手机网站模板( HTML+CSS+JavaScript) 企业手机网站模板手机网站模板电商网站手机模板响应式手机网站 html5手机网站模板 ...
电商项目：仿小米官网纯HTML+css布局
前言时间过得很快,已经步入大三下学期了,浪了大学这几年,这几个星期从新把之前学的html+css系统性复习了一遍,虽然之前也学习过,但Monto觉得无论任何事情,基础是最重要的,任何框架千变万变,但 ...
仿小米官网登录功能的实现
效果图如下: 首先我们需要搭建好页面布局 html的代码如下: <div class="contentrightbottom"><div class=&quo ...
20个期末作业——学生个人html静态网页制作基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
水果超市php代码,【PHP源码】ECSHOP仿本来生活网商城源码，水果特产生鲜超市模板源码，含微信分销手机版...
仿本来生活商城多商户多地区B2B2C电商系统(PC+WAP+微信) swtshop这套源码是由ecshop二次开发而来,pc+wap+app+微信端,挺不错的,外面卖一千多. 特色说明:ECSHOP官 ...

css3+html仿小米官网商城项目。

css3+html仿小米官网商城项目。相关推荐

最新文章

热门文章