一、效果图

二、完整html代码

<!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>小米商城 - Xiaomi 12、Redmi K50、MIX FOLD,小米电视官方网站</title><link rel="stylesheet" href="./index.css"><link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body><div class=" container"><div class="topbar"><div class="menu-container"><div class="topbar-nav"><a rel="nofollow" href="" class="hover_white">小米官网</a><span class="sep">|</span><a rel="nofollow" href="" class="hover_white">小米商城</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">MIUI</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">IoT</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">云服务</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">天星数科</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">有品</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">小爱开放平台</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">企业团购</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">资质证照</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="hover_white">协议规则</a><span class="sep">|</span><a rel="nofollow" href="" target="_blank" class="topbar-download active hover_white">下载app<span class="appcode"><div class="sj"></div><img src="./img/小米app.png" width="90" height="90"><div class="text">小米商城APP</div></span></a><span class="sep">|</span><a rel="nofollow" href="javascript:;" class="J_siteGlobalRegion hover_white">Select Location</a></div><div class="topbar-cart"><a class="cart-mini" href=""><i class="fa fa-shopping-cart" aria-hidden="true"style="font-size:20px ;"></i><em class="iconfont-cart-full hide"></em>购物车(0)<span class="cart-mini-num J_cartNum"></span></a><div class="cart-menu " id="J_miniCartMenu"><div class="menu-content">购物车中还没有商品，赶紧选购吧!</div></div></div><div class="topbar-info" id="J_siteUserInfo"><a class="link hover_white" href="">登录</a><span class="sep">|</span><a class="link  hover_white " href="">注册</a><span class="sep">|</span><span class=" message"><a href="" class="J_needAgreement  hover_white">消息通知</a></span></div></div></div><div class="bottombar"><div class=" bottombar-container"><div class="logo-container"><a href="" style="display: block;"><img src="./img/logo-mi2.png" alt="" class="logo"></a></div><div class="header-nav"><ul class="nav-list"><li class="nav-item"><div><a href="">Xiaomi手机</a></div><div class="item-child"><a href=""><img src="./img/小米下拉栏.png" alt="" style="height: 270px;"></a></div></li><li class="nav-item"><div><a href="">Redmi红米</a></div><div class="item-child"><a href="" style="position: relative; left: -100px;"><img src="./img/redmi.png"alt="" style="height: 270px;"></a></div></li><li class="nav-item1"><div><a href="">电视</a></div><div class="item-child"><a href="" style="position: relative; left: -200px;"><img src="./img/电视.png" alt=""style="height: 270px;"></a></div></li><li class="nav-item"><div><a href="">笔记本</a></div><div class="item-child"><a href="" style="position: relative; left: -300px;"><img src="./img/笔记本.png" alt=""style="height: 270px;"></a></div></li><li class="nav-item1"><div><a href="">平板</a></div><div class="item-child"><a href="" style="position: relative; left: -300px;"><img src="./img/平板.png" alt=""style="height: 270px;"></a></div></li><li class="nav-item1"><div><a href="">家电</a></div><div class="item-child"><a href="" style="position: relative; left: -550px;"><img src="./img/家电.png" alt=""style="height: 270px;"></a></div></li><li class="nav-item"><div><a href="">路由器</a></div><div class="item-child"><a href="" style="position: relative; left:-580px;"><img src="./img/路由器.png" alt=""style="height: 270px;"></a></div></li><li class="nav-item"><div><a href="">服务中心</a></div></li><li class="nav-item1"><div><a href="">社区</a></div></li><li><input type="text" class="input"><button type="" class="bt"><i class="fa fa-search " aria-hidden="true"></i></button></li></ul></div></div></div><div class="third"><div class="left-list-container"><ul class="left-list"><li class="le"><a href="">手机<i class="fa fa-angle-right icon" aria-hidden="true"></i></a></li><li class="le"><a href="">电视<i class="fa fa-angle-right icon" aria-hidden="true"></i></a></li><li class="le"><a href="">笔记本&nbsp;平板<i class="fa fa-angle-right icon" aria-hidden="true"></i></a></li><li class="le"><a href="">出行&nbsp;穿戴<i class="fa fa-angle-right icon" aria-hidden="true"></i></a></li><li class="le"><a href="">耳机&nbsp;音箱<i class="fa fa-angle-right icon" aria-hidden="true"></i></a></li><li class="le"><a href="">家电<i class="fa fa-angle-right icon" aria-hidden="true"></i></a></li><li class="le"><a href="">智能&nbsp;路由器<i class="fa fa-angle-right icon" aria-hidden="true"></i></a></li><li class="le"><a href="">电源&nbsp;配件<i class="fa fa-angle-right icon" aria-hidden="true"></i></a></li><li class="le"><a href="">健康&nbsp;儿童<i class="fa fa-angle-right icon" aria-hidden="true"></i></a></li><li class="le"><a href="">生活&nbsp;箱包<i class="fa fa-angle-right icon" aria-hidden="true"></i></a></li></ul></div><div class="right-photo"><a href=""><img src="./img/右侧.png" alt=""></a></div></div><div class="bottom-container"><div class="bottom-1"><ul><li><div class="top"></div><div class="top"></div><div class="top" style="float:right ; position: relative; top:-6px"></div></li><li ><a href=""><div  class="bottom-1-container" ><div class="botton-1-icon"><i class="fa fa-clock-o" aria-hidden="true" style="font-size: 30px;"></i></div><div class="bottom-1-text">保障服务</div></div></a><div class="sp "></div><a href=""><div  class="bottom-1-container" ><div class="botton-1-icon"><i class="fa fa-black-tie" aria-hidden="true" style="font-size: 30px;"></i></div><div class="bottom-1-text">企业团购</div></div></a><div class="sp "></div><a href=""><div  class="bottom-1-container"  style="position: relative; top:-5px"><div class="botton-1-icon"><i class="fa fa-share-alt-square" aria-hidden="true" style="font-size: 30px;"></i></div><div class="bottom-1-text">F码通道</div></div></a></li><li><div class="middle"></div><div class="middle"></div><div class="middle" style="float:right ;"></div></li><li ><a href=""><div  class="bottom-1-container" ><div class="botton-1-icon"><i class="fa fa-viadeo" aria-hidden="true" style="font-size: 30px;"></i></div><div class="bottom-1-text">米粉卡</div></div></a><div class="sp "></div><a href=""><div  class="bottom-1-container" ><div class="botton-1-icon"><i class="fa fa-slideshare" aria-hidden="true" style="font-size: 30px;"></i></div><div class="bottom-1-text">以旧换新</div></div></a><div class="sp "></div><a href=""><div  class="bottom-1-container"  style="position: relative; top:-2px"><div class="botton-1-icon"><i class="fa fa-lastfm-square" aria-hidden="true" style="font-size: 30px;"></i></div><div class="bottom-1-text">话费充值</div></div></a></li><li><div class="last"></div><div class="last"></div><div class="last" style="float:right ; position: relative; top:-14px"></div></li></ul></div><div class="bottom-2"><a href=""><img src="./img/3.JPG" alt=""></a></div><div class="bottom-2"><a href=""><img src="./img/2.JPG" alt=""></a></div><div class="bottom-2"><a href=""> <img src="./img/1.JPG" alt=""></a></div></div></div>
</body>
</html>

三、css代码

ul{list-style: none;
}*{margin:0px;padding:0px;
}
a{text-decoration: none;color: black;}
div{display: block;
}body{color: #333;
}.topbar{position: relative;z-index: 30;height: 40px;font-size: 12px;color: #b0b0b0;background-color: #333;
}
.topbar a{color: #757575;
}.menu-container{width: 1226px;margin-right: auto;margin-left: auto;
}
.topbar  .topbar-nav {float: left;height: 40px;line-height: 40px;
}.menu-container a{color: #b0b0b0;line-height: 40px;display: inline-block;
}
.menu-container .sep {margin: 0 .3em;color: #424242;
}.topbar .topbar-download {position: relative;
}
.topbar .topbar-download .appcode {position: absolute;top: 40px;left: 50%;width: 124px;height: 148px;background: #fff;margin-left: -55px;text-align: center;font-size: 14px;color: #333;line-height: 1;display: none;}.hover_white:hover{color: rgb(255,255,255);
}
.topbar-cart:hover .cart-mini{background-color: white;color: rgb(255,103,0);}
.appcode>.sj{width: 0px;height: 0px;position: relative;border:10px solid  red;border-color: transparent transparent white transparent;left: 50px;top:-20px;}.appcode>img {position: relative;top:-20px
}
.text{position: relative;top:-20px;
}
.topbar .topbar-download img {display: block;margin: 18px auto 12px;
}.topbar .topbar-download:hover  .appcode{display: block;
}.topbar .topbar-cart {position: relative;float: right;width: 120px;height: 40px;margin-left: 15px;-webkit-transition: all .2s;transition: all .2s;font-size: 12px;
}.topbar .cart-mini {position: relative;z-index: 32;display: block;height: 40px;line-height: 40px;text-align: center;color: #b0b0b0;background: #424242;
}.topbar .cart-mini {position: relative;z-index: 32;display: block;height: 40px;line-height: 40px;text-align: center;color: #b0b0b0;background: #424242;
}.topbar .cart-menu {position: absolute;right: 0;top: 40px;z-index: 31;width: 316px;height: 100px;color: #424242;background: #fff;display: none;
}.topbar  .topbar-cart:hover  .cart-menu{display: block;border-left: 1px solid grey;border-bottom: 1px solid grey;border-right: 1px solid grey;
}.topbar .cart-menu .menu-content {text-align: center;line-height: 100px;
}.topbar .cart-menu .loading, .topbar .cart-menu .msg {text-align: center;line-height: 100px;
}.topbar .cart-list {margin: 0;padding: 0;list-style-type: none;
}.topbar .topbar-info {position: relative;float: right;height: 40px;line-height: 40px;
}.topbar .topbar-info .link {padding: 0 5px;text-align: center;
}.topbar .topbar-info .link, .topbar .topbar-info .message, .topbar .topbar-info .sep, .topbar .topbar-info .user {float: left;
}.bottombar{z-index: 20;height: 100px;
}.bottombar-container{width: 1226px;height: 100px;margin-right: auto;margin-left: auto;}.bottombar .logo {width: 56px;height: 56px;margin:20px 20px 20px 0px ;
}
.logo-container{width:60px;height: 60px
}.header-nav{width:850px;float: left;position: absolute;
}.nav-list{position: relative;z-index: 10;float: left;width: 1100px;height: 88px;margin: 0;padding: 12px 0 0 30px;list-style-type: none;font-size: 16px;right: -100px;top:-60px
}.nav-list .nav-item{float: left;width: 90px;height: 88px;line-height: 88px;
}.nav-list .nav-item1{text-align: center;float: left;width: 60px;height: 88px;line-height: 88px;}.nav-list .nav-item ,.nav-list .nav-item1{position: relative;left: 100px;
}.nav-item a{display: block;
}.nav-item:hover a,.nav-item1:hover a{color: rgb(255,103,0);
}.item-child{width: 3000px;height: 280px;display: none;background-color:white;z-index: 20;position: relative;left: -1000px;border-bottom: 1px solid grey;border-top: 1px solid grey;
}.nav-item:hover .item-child,.nav-item1:hover .item-child{display: block;
}
.nav-item>div{text-align:center ;
}.input{height: 35px;position: relative;top : 20px;left: 210px;
}.bt{border:1px solid black;background-color: white;position: relative;width: 30px;height:39px ;left:200px;top:20px
}.bt:hover{background-color:rgb(255,103,0) ;color: white;
}.third{width: 1226px;height: 460px;margin: auto;
}.third>.left-list-container{height: 460px;width: 234px;background-color: rgb(64,62,63);
}.left-list{display: block;position: relative;top: 20px;height: 420px;}.third .le{height: 42px;padding-left:15px;padding-right:15px;position: relative;
}.third .le>a{color: rgb(255,255,255);
}.third>.left-list-container>.left-list>.le:hover{background-color: rgb(255,103,0);
}.third a{height: 42px;line-height: 42px;display: block;
}
.icon{display: block;float: right;position: relative;top:15px
}.right-photo{width: 992px;height: 460px;position: relative;left:234px;top:-460px
}.bottom-container{width: 1226px;height: 150px;margin:20px auto 0px auto;
}.bottom-1{width: 234px;height: 150px;background-color: rgb(95,87,80);float: left;
}.bottom-1-container{width: 30%;float: left;margin:3px ;text-align: center;height: 60px;}.bottom-1 .sp{margin:10px 0px 10px 0px ;float: left;width: 1px;height: 45px;background-color: rgb(102,94,87);
}
.bottom-1-container{color: rgb(203,200,198);
}.bottom-1-container:hover{color: rgb(255,255,255);
}.middle{margin: 0px 10px 0px 10px;width: 60px;height:1px;background-color: rgb(102,94,87);float: left;}.top{margin: 5px 10px 0px 10px;width: 60px;height:1px;background-color: rgb(102,94,87);float: left;
}.last{margin: 5px 10px 0px 10px;width: 60px;height:1px;background-color: rgb(102,94,87);float: left;position: relative;top:-8px
}.bottom-2{width: 310px;height: 150px;background-color: green;float: right;margin-left: 20px;
}.bottom-2 img{width: 310px;height: 150px;
}

HTML+CSS实现静态小米商城首页（附完整代码）相关推荐

html5 css 3d动画效果代码,css3D+动画的例子（附完整代码）
本篇文章给大家带来的内容是关于css3D+动画的例子(附完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言最近玩了玩用css来构建3D效果,写了几个demo,所以博客总 ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（三）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(三) 本篇目录: 六.完整构建整个[旋转的精灵女孩]实例 (1).新建.启动webGL工程空间 (2).构建项目的目录层次结构 (2. ...
php 3d animation,css3D+动画的例子（附完整代码）
本篇文章给大家带来的内容是关于css3D+动画的例子(附完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言最近玩了玩用css来构建3D效果,写了几个demo,所以博客总 ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（二）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(二) 本篇目录: 五.实例中所使用的代码语法详细解释 (1).构建一个三维空间场景 (2).选择一个透视投影相机作为观察点 (a).创 ...
html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果（通俗易懂附完整代码）...
原文:Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码) 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果 ...
Py之pygame：有趣好玩—利用pygame库实现鱼儿自动实时目标跟踪(附完整代码)
Py之pygame:有趣好玩-利用pygame库实现鱼儿自动实时目标跟踪(附完整代码) 目录输出结果实现代码输出结果实现代码 #Py之pygame:利用pygame库实现鱼儿自动实时目标跟踪i ...
c++代码好玩_Py之pygame：有趣好玩—利用pygame库实现鱼儿自动实时目标跟踪(附完整代码)...
Py之pygame:有趣好玩-利用pygame库实现鱼儿自动实时目标跟踪(附完整代码) 目录输出结果实现代码输出结果实现代码 #Py之pygame:利用pygame库实现鱼儿自动实时目标跟 ...
OpenCV基本线性变换轨迹栏的实例(附完整代码)
OpenCV基本线性变换轨迹栏的实例 OpenCV基本线性变换轨迹栏的实例 OpenCV基本线性变换轨迹栏的实例 OpenCV基本线性变换轨迹栏的实例(附完整代码) #include "op ...
OpenCV差分二值化的实时场景文本检测的实例(附完整代码)
OpenCV差分二值化的实时场景文本检测的实例 OpenCV差分二值化的实时场景文本检测的实例 OpenCV差分二值化的实时场景文本检测的实例 OpenCV差分二值化的实时场景文本检测的实例(附完整代 ...
单选按钮_PerlTk教程之按钮Button、复选按钮Checkbutton、单选按钮Radiobutton（附完整代码）...
<Perl-Tk教程之按钮Button.复选按钮Checkbutton.单选按钮Radiobutton>Perl-Tk中有三种不同形式的按钮组件可供选择,它们分别是按钮(Button), ...

HTML+CSS实现静态小米商城首页（附完整代码）

一、效果图

二、完整html代码

三、css代码

HTML+CSS实现静态小米商城首页（附完整代码）相关推荐

最新文章

热门文章