html:
（1）设置第二排导航条宽度为100%
（2）对于logo标签的使用，用h1去装
（3）对于logo用a标签去放，在css中使用backgroud-image: url(‘’);去设置图片地址
代码：
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站</title><link rel="stylesheet" href="../css/reset.css"><link rel="stylesheet" href="../css/base.css"><link rel="stylesheet" href="../css/index.css"><link rel="stylesheet" href="../fa/css/all.css"></head><body><div class="wrapper"><div class="top-bar-wrapper"><ul class="top-bar-left"><li class="top-left-wrapper"><a href="javascript:;">小米商城</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">MIUI</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">loT</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">云服务</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">天星数科</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">有品</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">小爱开放平台</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">企业团购</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">资质证照</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">协议规则</a></li><li class="line-space">|</li><!-- 在父子元素中嵌入三角和download图片 --><li class="top-left-wrapper"><a class="app" href="javascript:;">下载app<div class="download"><img src="../img/download.png" alt="download_app"><span>小米商城APP</span></div></a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">智能生活</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">Select Location</a></li></ul><!-- 两个同时float: right;那么必须排在右边的写在前面，因为会把写在前面的优先放到右边去 --><ul class="top-bar-right"><li class="top-left-wrapper"><a href="javascript:;"><i class="fas fa-shopping-cart"></i>购物车（0）<div class="shopping-cart"><span>购物车中还没有商品，赶紧选购吧！</span></div></a></li></ul><ul class="top-bar-center"><li class="top-left-wrapper"><a href="javascript:;">登录</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">注册</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">消息通知</a></li></ul></div></div><div class="head-wrapper"><h1 class="logo" title="小米"><a class="mi-logo" href="/"></a><a class="mi-home" href="/"></a></div><div class="head-center-wrapper"></div><div class="head-right-wrapper"></div></div><div class="body"></div></body></html>
css:
（1）设置好h1的宽高，为了定位好，设置为relative，同时为了掩盖第二张图，设置overflow:hidden;
（2）引入第一张和第二张图片，同时因为设置第二张图为绝对定位，使之脱离文档流，同时向左浮动-55px
（3）设置好hover浮动，要在h1中设置好初始位置，然后在hover中设置好最后位置和transition
过渡三要素，起始位置，过渡时间，终止位置
代码：
/* 整个板块float */
.top-bar-left {
float: left;
margin-left: 338px;
margin-right: 160px;
position: relative;
}
/* 当需要超链接上下部分也显示hover效果，将超链接设置为display: block;即可达到效果 */
a {
display: block;
}
a:hover {
color: white;
}
/* 里面的li 也要设置float,否者下面的li只会竖直排列 */
.top-bar-left li {
float: left;
height: 40px;
line-height: 40px
}
/* 三个border设置为 rgba(0,0,0,0),剩下一个设置颜色，宽高设置为0，即可，将display设置为none,,在hover中设置block;即可动态显示*/
.app {
position: relative;
}
/* 设置app下的小三角 */
.app::after {
content: ''; /* content CSS属性用生成的值替换元素。使用content属性插入的对象是匿名替换的元素。 */
position: absolute;/*开启绝对定位，同时将父元素设置为相对定位，那么可在父元素周围使用left等来移动 */
display: none;
width: 0px;
height: 0px;
border: 7px solid transparent;
border-top: none;
border-bottom-color: #fff;
bottom: 0px;
/* 使用left right = 0 ,margin: auto;来自动对齐 */
left: 0px;
right: 0px;
margin: auto;
}
/* 对文字设置居中，如果是行内元素，应在其父元素（块）中进行设置 */
.download {
/* display: none; */
position: absolute;
left: -40px;
width: 124px;
height: 0px;
line-height: 1px;
text-align: center;
background-color: #fffafa;
box-shadow: 0 0 10 rgba(0,0,0.3);
overflow: hidden;
}
.top-left-wrapper:hover .app::after,
.app:hover .download {
height: 148px;
transition: all 0.3s;
display: block;
}
/* 写入hover时，对于需要移入部分唤出隐藏部分，那么对移入部分hover,然后空格 需要唤醒的部分 */
.top-bar-left .download img {
width: 90px;
height: 90px;
margin: 17px;
}
.top-bar-left .download span {
font-size: 14px;
color: #333333;
}
/* 如果设置nth-child，反而找不到该li标签，因为后面 */
/* .top-bar-left:hover .triangle{
display: block;
}
.top-bar-left :nth-child(1) :hover .download{
display: block;
} */
/* 单独对中线设置，并标好颜色，否者无法显示分割线 */
.line-space {
width: 1px;
height: 13px;
color: #424242;
margin: 0 8px;
}
.top-bar-center {
float: right;
}
.top-bar-center li {
float: right;
height: 40px;
line-height: 40px
}
/* 此处是设置水平居中，水平居中是text-align,当时错误设置为vertical-align,同时因为line-height 和 height一致，所以直接废掉了vertical-align */
.top-bar-right {
float: right;
height: 40px;
line-height: 40px;
width: 120px;
text-align: center;
margin-right: 338px;
position: relative;
display: block;
}
.top-bar-right .fas.fa-shopping-cart {
margin-right: 2px;
}
.shopping-cart {
background-color: blueviolet;
width: 396px;
height: 125px;
position: absolute;
right: 0px;
}
/* 设置第二排导航条 */
.head-wrapper {
width: 100%;
height: 100px;
}
.head-wrapper .logo {
width:55px;
height: 55px;
float: left;
position: relative;
margin-top: 22px;
margin-left: 190px;
left: 0px;
overflow: hidden;
}
.head-wrapper .logo a{
width:55px;
height: 55px;
position: absolute;
background-image: url('../img/mi-logo.png');
}
.head-wrapper .logo .mi-logo{
background-color: #FF6700;
}
.head-wrapper .logo .mi-home{
position: absolute;
left:-55px;
background-image: url('../img/mi-home.png');
background-color: #FF6700;
}
.head-wrapper .logo:hover .mi-logo{
transition: left 0.3s;
right: 55px;
}
.head-wrapper .logo:hover .mi-home{
transition: left 0.3s;
left: 0px;
}
若有收获，就点个赞吧
0 人点赞
