目录
一 实现效果
完整代码
1 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>Document</title>
<link rel="stylesheet" href="./xiaomi.css">
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="const">
<div class="title">
<ul class="left">
<li class="a1">
<a href="#">小米官网</a>
</li>
<li>|</li>
<li class="a1">
<a href="#">小米商城</a>
</li>
<li>|</li>
<li class="a1">
<a href="#">MIUI</a>
</li>
<li>|</li>
<li class="a1">
<a href="#">loT</a>
</li>
<li>|</li>
<li class="a1">
<a href="#">云服务</a>
</li>
<li>|</li>
<li class="a1">
<a href="#">天星科技</a>
</li>
<li>|</li>
<li class="a1">
<a href="#">有品</a>
</li>
<li>|</li>
<li class="a1">
<a href="#">小爱开放平台</a>
</li>
<li>|</li>
<li class="a1">
<a href="#">企业团购</a>
</li>
<li>|</li>
<li class="a1">
<a href="#">资质证件照</a>
</li>
<li>|</li>
<li class="a1">
<a href="#">协议规则</a>
</li>
<li>|</li>
<li class="a2">
<a href="#">下载app</a>
<span class="app"><a href="#">
<div class="sanjiao"></div>
<img src="./image/小米app.png" alt="11">
<div class="mi">
小米商城APP
</div>
</a></span>
</li>
<li>|</li>
<li class="a1">
<a href="#">Select Location</a>
</li>
</ul>
<ul class="right">
<li class="a3">
<a href="#"> <i class="fa fa-cart-plus" aria-hidden="true"></i> 购物车</a>
<div class="shop">还没有商品赶紧选购吧！</div>
</li>
<li>|</li>
<li class="a1">
<a href="#">小题通知</a>
</li>
<li>|</li>
<li class="a1">
<a href="#">注册</a>
</li>
<li class="a1">
<a href="#">登录</a>
</li>
</ul>
</div>
</div>
<div class="nav">
<div class="nav-1">
<div class="logo">
<a href="#" style="z-index: 12;"><img src="./image/logo-mi2.png" alt="11"></a>
</div>
<div class="nav-2">
<div class="shequ"><a href="#">社区</a>
</div>
<div><a href="#">服务中心</a></div>
<div> <a href="#">路由器</a></div>
<div> <a href="#">家电</a></div>
<div> <a href="#">笔记本</a></div>
<div class="tv"> <a href="#">电视</a>
<div class="nav-4">
<div class="nav-5">
<ul>
<li><a href="#">
<img src="./image/logo-mi2.png" alt="11" width="100px">
<div class="font" style="color: black;">一口价</div>
<div style="color: red;">2000000￥</div>
</a></li>
<li class="xian"> </li>
<li><a href="#">
<img src="./image/logo-mi2.png" alt="11" width="100px">
<div class="font" style="color: black;">一口价</div>
<div style="color: red;">2000000￥</div>
</a></li>
<li class="xian"> </li>
<li><a href="#">
<img src="./image/logo-mi2.png" alt="11" width="100px">
<div class="font" style="color: black;">一口价</div>
<div style="color: red;">2000000￥</div>
</a></li>
</ul>
</div>
</div>
</div>
<div class="Redmi"> <a href="#">Redmi红米</a>
<div class="nav-4">
<div class="nav-5">
<ul>
<li><a href="#">
<img src="./image/logo-mi2.png" alt="11" width="100px">
<div class="font" style="color: black;">一口价</div>
<div style="color: red;">2000000￥</div>
</a></li>
<li class="xian"> </li>
<li><a href="#">
<img src="./image/logo-mi2.png" alt="11" width="100px">
<div class="font" style="color: black;">一口价</div>
<div style="color: red;">2000000￥</div>
</a></li>
<li class="xian"> </li>
<li><a href="#">
<img src="./image/logo-mi2.png" alt="11" width="100px">
<div class="font" style="color: black;">一口价</div>
<div style="color: red;">2000000￥</div>
</a></li>
<li class="xian"> </li>
<li><a href="#">
<img src="./image/logo-mi2.png" alt="11" width="100px">
<div class="font" style="color: black;">一口价</div>
<div style="color: red;">2000000￥</div>
</a></li>
</ul>
</div>
</div>
</div>
<div class="shouji"> <a href="#">小米手机</a>
<div class="nav-4">
<div class="nav-5">
<ul>
<li><a href="#">
<img src="./image/logo-mi2.png" alt="11" width="100px">
<div class="font" style="color: black;">一口价</div>
<div style="color: red;">2000000￥</div>
</a></li>
<li class="xian"> </li>
<li><a href="#">
<img src="./image/logo-mi2.png" alt="11" width="100px">
<div class="font" style="color: black;">一口价</div>
<div style="color: red;">2000000￥</div>
</a></li>
<li class="xian"> </li>
<li><a href="#">
<img src="./image/logo-mi2.png" alt="11" width="100px">
<div class="font" style="color: black;">一口价</div>
<div style="color: red;">2000000￥</div>
</a></li>
<li class="xian"> </li>
<li><a href="#">
<img src="./image/logo-mi2.png" alt="11" width="100px">
<div class="font" style="color: black;">一口价</div>
<div style="color: red;">2000000￥</div>
</a></li>
<li class="xian"> </li>
<li><a href="#">
<img src="./image/logo-mi2.png" alt="11" width="100px">
<div class="font" style="color: black;">一口价</div>
<div style="color: red;">2000000￥</div>
</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="nav-3">
<a href="#">
<div class="box2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</a>
<div class="box1"></div>
<div class="box12">
<div>小米</div>
<div>大米</div>
<div>紫米</div>
<div>红米</div>
<div>黑米</div>
<div>陈米</div>
</div>
</div>
</div>
</div>
<div class="zhong">
<div class="zhong-l">
<div class="zhong-3"> </div>
<div class="zhong-1">
<div class="zhong-2">
<a href="#">
<span>手机</span>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
<div class="zhong-2">
<a href="#">
<span>电视</span>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
<div class="zhong-2">
<a href="#">
<span>笔记本 平板</span>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
<div class="zhong-2">
<a href="#">
<span>出行 穿戴</span>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
<div class="zhong-2">
<a href="#">
<span>耳机 音箱</span>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
<div class="zhong-2">
<a href="#">
<span>家电</span>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
<div class="zhong-2">
<a href="#">
<span>智能 路由器</span>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
<div class="zhong-2">
<a href="#">
<span>电源 配件</span>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
<div class="zhong-2">
<a href="#">
<span>健康 儿童</span>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
<div class="zhong-2">
<a href="#">
<span>生活 箱包</span>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="zhong-4"></div>
</div>
<div class="zhong-r">
<a href="#"><img src="./image/zhong-r.png" alt="111"></a>
</div>
</div>
<div class="xia">
<ul>
<li class="xia1">
<a href="#">
<img src="./image/xia3.png" alt="">
</a>
</li>
<li class="xia1">
<a href="#">
<img src="./image/xia2.png" alt="">
</a>
</li>
<li class="xia1">
<a href="#">
<img src="./image/xia1.png" alt="">
</a>
</li>
<li class="xia2">
<div class="xia3">
<a href="#">
<div class="xia4">
<i class="fa fa-clock-o" aria-hidden="true"></i>
<div>保障服务</div>
</div>
</a>
</div>
<div class="xia3">
<a href="#">
<div class="xia4">
<i class="fa fa-university" aria-hidden="true"></i>
<div>企业团购</div>
</div>
</a>
</div>
<div class="xia3">
<a href="#">
<div class="xia4">
<i class="fa fa-wpexplorer" aria-hidden="true"></i>
<div>F码通道</div>
</div>
</a>
</div>
<div class="xia3">
<a href="#">
<div class="xia4">
<i class="fa fa-credit-card-alt" aria-hidden="true"></i>
<div>米粉卡</div>
</div>
</a>
</div>
<div class="xia3">
<a href="#">
<div class="xia4">
<i class="fa fa-usd" aria-hidden="true"></i>
<div>以旧换新</div>
</div>
</a>
</div>
<div class="xia3">
<a href="#">
<div class="xia4">
<i class="fa fa-mobile" aria-hidden="true"></i>
<div>话费充值</div>
</div>
</a>
</div>
</li>
</div>
</body>
</html>2 CSS
*{
margin: 0;
padding: 0;
}
/* 顶层设计 */
.const{
height:40px;
background-color: rgb(51,51,51);
}
/* 顶层标题设置 */
.title{
height: 40px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
/* 顶层超链接浏览 */
.const>.title>.left:hover .a1{
color: white;
}
.title{
font-size: 10px;
width: 1226px;
margin: auto ;
}
/* 标题链接处理左边浮动对齐 */
.left>li{
float: left;
line-height: 40px;
padding: 0 5px 0 5px;
}
/* 颜色左边 */
.left>li>a{
color: rgb(176,176,176);
}
.right>li{
padding: 0 5px 0 5px;
float: right;
line-height: 40px;
}
/* 右边标题颜色 */
.right>li>a{
color: rgb(176,176,176);
}
/* 标题浏览 */
.left>li:hover a{
color: white;
}
.right>li:hover a{
color: white;
}
.a2{
position: relative;
}
/* 下拉整体框架 */
.a2>span{
display: none;
z-index: 10;
position: absolute;
width: 120px;
height: 140px;
border: 1px solid rgba(128, 128, 128, 0.575);
background-color: white;
top: 40px;
left: -40px;
}
/* 三角 */
.a2 .sanjiao{
position: absolute;
z-index: 9;
width: 0px;
height: 0px;
border: 8px solid white;
border-color: transparent transparent white transparent;
top: -18px;
right:50px;
}
/* 二维码 */
.a2 img{
position: absolute;
width: 80px;
top: 20px;
right: 20px;
}
/* 二维码下面文字 */
.a2 .mi{
color: black;
position: absolute;
top: 100px;
left: 20px;
font-size: 13px;
}
.a2:hover .mi{
color: black;
}
/* 浏览显示 下载图片 */
.a2:hover span {
display: block;
}
/* 购物车 */
.a3{
width: 100px;
text-align: center;
position: relative;
padding: 0 40px 0 40px;
background-color:rgb(66,66,66);
}
/* 购物车下选框 */
.shop{
z-index: 10;
position:absolute;
width: 200px;
text-align: center;
background-color: white;
border-left: 1px solid rgba(128, 128, 128, 0.37);
border-right: 1px solid rgba(128, 128, 128, 0.37);
border-bottom: 1px solid rgba(128, 128, 128, 0.37);
left: -90px;
line-height: 100px;
font-size: 15px;
display: none;
}
/* 浏览购物车显示 */
.a3:hover .shop{
display: block;
}
.a3:hover{
background-color: white;
border-bottom: 1px solid white;
}
.right>.a3:hover a{
color: rgb(255,103,0);
}
.right>.a3 a{
display: block;
}
/* 中间导航栏 */
/* 背景参数 */
.nav{
height: 100px;
}
/* 导航条 实际位置 */
.nav-1{
position: relative;
width: 1226px;
height: 100px;
margin: auto;
}
/* logo */
.logo>a>img{
z-index: 12;
width: 55px;
height: 55px;
margin-top:22.5px;
}
/* nav 中间文字超链接 */
/* 一个框放在一起 */
.nav-2 {
position: absolute;
top: 0;
line-height: 100px;
text-align: center;
height: 100px;
width: 750px;
left: 100px;
margin: auto;
}
/* 超链接大小 浮动对齐 */
.nav-2 a{
font-size: 16px;
padding: 0 15px 0 15px;
color: black;
float: right;
}
/* 浏览 超链接 */
.nav-2>div:hover a{
color: red;
}
/* 搜索框 整体*/
.nav-3{
position: relative;
margin-top: -50px;
}
/* 框 一*/
.box1{
position: relative;
width: 244px;
height: 50px;
border: 1px solid rgb(224,224,224);
float: right;
}
/* 点击 出现的下拉框 */
.box12{
z-index: 9;
display: none;
padding: 0 20px 0 20px;
position: absolute;
width: 204px;
line-height: 30px;
border: 1px solid rgb(255,103,0);
left: 927px;
top: 52px;
background-color: white;
}
/* 框 */
.box2{
text-align: center;
width: 52px;
height: 50px;
border: 1px solid rgb(224,224,224);
float: right;
}
/* 小搜索图标 */
.box2>i{
margin-top:15px ;
color: rgb(97,97,97);
}
/* 浏览 搜索框 */
/* 小图标变色 */
.box2:hover i{
color: white;
}
/* 框二 */
.box2:hover{
background-color: rgb(255,103,0);
}
/* 浏览整个框 变化 */
.nav-3:hover .box1{
color: red;
box-shadow: 0px 0px 1px gray;
}
.nav-3:hover .box2:not(i){
color: red;
box-shadow: 0px 0px 1px gray;
}
/* 点击 */
.nav-3:active .box1{
border: 1px solid rgb(255,103,0);
}
.nav-3:active .box2:not(i){
border: 1px solid rgb(255,103,0);
}
/* 显示 下拉框 */
.nav-3:active .box12{
display: block;
}
.nav-4{
position: absolute;
display: none;
z-index: 8;
width:1350px;
height: 230px;
background-color: white;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
top: 100px;
left: -120px;
}
/* 图片 */
.nav-5>ul>li{
margin: 0 8px 0 8px;
margin-top: 35px;
margin-left: 60px;
color: black;
float: left;
}
.nav-5>ul>li div{
margin-top: -70px;
}
.nav-5>ul>li:hover .font {
color: black;
}
.tv:hover .nav-4{
display: block;
}
.shouji:hover .nav-4{
display: block;
}
.Redmi:hover .nav-4{
display: block;
}
/* 中间竖线 */
.nav-5>ul .xian{
width:1px;
height: 100px;
background-color:gray;
margin-top: 40px;
}
/* 中间 实际位置 */
.zhong{
position: relative;
width: 1226px;
height: 460px;
margin: auto;
border-bottom: 15px solid white;
}
.zhong-1{
width:234px;
height: 420px;
padding-top: 20px solid red;
padding-bottom: 20px solid #ff0000;
}
/* 中左栏框 超链接处理*/
.zhong-1 a{
width: 204px;
display: block;
line-height:42px ;
color: white;
padding :0 15px 0 15px;
background-color: rgb(149,154,152);
}
.zhong-1 i{
float: right;
margin-top: 13px;
}
/* 中左 上下留白 */
.zhong-3,.zhong-4{
width: 234px;
height: 20px;
background-color: rgb(149,154,152);
}
/* 浏览 左边栏 */
.zhong-2:hover a{
background-color: rgb(255,103,0);
}
/* 中左栏小图标 */
.zhong-2:hover i{
color: rgb(255,179,128);
}
/* 中间图片 */
.zhong-r img{
width: 992px;
height: 460px;
}
/* 浮动对齐 */
.zhong-l{
float: left;
}
/* 侧边栏的浏览 */
.zhong-2:hover .nav-4{
display: block;
}
/* 下面一层 */
.xia{
position: relative;
width: 1226px;
height: 170px ;
margin: auto;
border-bottom: 15px solid white;
}
/* 右边三个图 */
.xia>ul>.xia1 img{
width: 310px;
height: 170px;
border-left:20px solid white ;
background-size: cover ;
}
.xia>ul>li{
float: right;
}
/* 左边 */
.xia2{
position: relative;
width: 234px;
height: 170px;
background-color: rgb(95,87,80);
}
.xia2 .xia3{
float: right;
height: 90px;
width: 75px;
}
.xia5{
float: left;
}
.xia2 a{
width: 68px;
height: 64px;
margin-top: 13px;
text-align: center;
display: block;
color: rgb(207,204,202);
border-bottom: 1px solid rgb(102,94,87);
border-left: 1px solid rgb(102,94,87);
border-image: -webkit-linear-gradient( rgb(95,87,80),rgb(102,94,87) 30 30);
}
.xia2 i{
font-size: 28px;
}
.xia3:hover .xia4{
color: white;
}
1513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
