<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米</title>
<!-- 外部引入,首选 rel为icon左上角网页图标,icon一般是16*16像素-->
<link rel="icon" href="images/favicon.ico">
<!--外部引入,href里全局样式-->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mi1.css">
</head>
<body>
<!--
准备工作:
1)css样式提前存好,备调用
2)页面图片下载
首先用火狐浏览器下载页面全部图片,方法:浏览器页面找空白的地方---右击查看页面信息---找标签---媒体---全选---另存为---
-->
<!--头部开始-->
<div class="header">
<a href="#">
<img src="images/a2a9e6db5e3c5374301827435d8595c6.jpg" alt="">
</a>
</div>
<!--头部结束-->
<!--黑色导航开始-->
<div class="black-nav">
<div class="wrap">
<!--左侧的无序列表-->
<ul class="black-nav-left">
<li><a href="#">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">loT</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>
<div class="download">
<img src="images/download.png" alt="">
<p>小米商城APP</p>
</div>
<div class="stri"></div>
</li>
<li><a href="#">智能生活</a><span>|</span></li>
<li><a href="#">SelectLocation</a></li>
</ul>
<!--右侧的无序列表-->
<ul class="black-nav-right">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a></li>
<!--cart是购物车-->
<li class="cart">
<a href="#">购物车(0)</a>
<div class="cart-list">
购物车中还没有商品,赶紧选购吧!
</div>
</li>
</ul>
</div>
</div>
<!--黑色导航结束-->
</body>
</html>
/*头部样式开始*/
.header{
width: 100%;
height: 120px;
/*background-color: red ;*/
/*溢出部分隐藏掉*/
overflow: hidden;
position: relative;
}
.header img{
/*只设置高度,宽度等比例缩放*/
height: 120px;
position: absolute;
left: 50%;
transform: translate(-50%);
}
/*头部样式结束*/
/*黑色导航样式开始*/
.black-nav{
width: 100%;
height: 40px;
line-height: 40%;
background-color:#333 ;
color:#b0b0b0;
font-size: 12px;
}
.wrap{
width: 1226px;
margin: 0 auto;
}
.black-nav-left{
float: left;
}
/*整个容器右浮*/
.black-nav-right{
float: right;
}
.black-nav li{
float: left;
/*是相对于download的父元素进行定位*/
position: relative;
}
.black-nav a{
color: #b0b0b0;
}
.black-nav a:hover{
color: #fff;
}
.black-nav span{
color: #424242;
margin: 0 3.6px;
}
.cart{
width: 120px;
height: 40px;
background-color: #424242;
margin-left: 25px;
position: relative;
}
.cart:hover{
background-color: #fff;
}
.cart:hover a{
color: #ff6700;
}
.cart-list{
width: 316px;
height: 0;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
position: absolute;
right: 0;
top: 40px;
color: #424242;
/* 隐藏溢出的文字*/
overflow: hidden;
transition: all .3s ;
}
/*鼠标悬停在cart,指向cart-list显示*/
.cart:hover>.cart-list{
height: 100px;
/*一行文字垂直居中,行高等于高*/
line-height: 100px;
}
/*下载APP*/
.download{
width: 124px;
/*本身是设置了高度,因为需要实现文字溢出隐藏,故先把高度变为0*/
height: 0;
background-color: #fff;
box-shadow: 0 1px 5px #aaa;
/* 为了下载APP不自动撑开父元素宽度,进行绝对定位*/
position: absolute;
top: 40px;
left: 50%;
margin-left: -62px;
/*高度设置为0后,设置文字溢出部分隐藏*/
overflow: hidden;
transition: all .3s;
position: relative;
}
.download>img{
width: 90px;
margin:18px auto 12px ;
}
.download>p{
color: #333;
font-size: 14px;
line-height: 14px;
}
.black-nav-left>li:hover>.download{
height: 148px;
}
.stri{
/*绘制下三角形*/
width: 0;
height: 0;
border-bottom: 8px solid #fff;
border-left:8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -8px;
/*元素隐藏*/
display: none;
}
.black-nav-left>li:hover>.stri{
display: block;
}
/*黑色导航样式结束*/
京公网安备 11011402011233号