Html5+Css前端开发小米官网-顶部导航
程序员文章站
2022-04-21 20:14:08
...
实战后的效果
大家好，我是小叶同学，如今都大二了，跟着学校老师只学到皮毛，不如自己自学，说起来也惭愧，今天实战Html+CSS小米官网顶部导航开发，后面也会一点点对小米官网全部开发，欢迎前来坐坐沙发
思路详解
下载App提示框：通过"子绝父相"，给li标签设置相对定位，提示框设置绝对定位，让它对文字下面进行居中，然后用display:none和block进行显示隐藏，跟轮播图一个原理。
购物车效果：一开始我们都会想用display来进行显示隐藏，这是不行的，display转成块元素后，transition的过渡动画就不能设置了，这里可以用overflow: hidden来隐藏显示，购物车也就一行字，overflow: hidden是根据高度溢出隐藏的，但是我们把高度设置成0，是不是就隐藏了呢。再通过hover进行设置高度就能隐藏显示了，也可以用过度动画展示效果。
废话不多说，代码奉上
Html代码
<body>
<div class="black_nav">
<div class="warp">
<div class="black_nav_left">
<ul>
<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="triangle"></div>
<div class="litel-box">
<img src="./img/download.png">
<p>小米商城APP</p>
</div>
<div class="triangle"></div>
</li>
<li><a href="">Select Region</a><span>|</span></li>
</ul>
</div>
<div class="black_nav-right">
<ul>
<li><a href="">登录</a><span>|</span></li>
<li><a href="">注册</a><span>|</span></li>
<li><a href="">消息通知</a><span>|</span></li>
<li class="shopping_car">
<a href="">
<i class="iconfont">󰅹</i>购物车(0)
</a>
<div class="cart">购物车中还没有商品，赶紧选购吧!</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS代码详解
文字的布局
大盒子里的 li标签设置左浮动，a标签设置颜色和大小，span标签设置一竖外边距左右 6像素
效果图
下载App设置
接下来设置下载App的提示框了，通过子绝父相，给父元素Li标签相对定位，提示框绝对定位，定位好后，想要图片垂直居中，用padding填充上下位置，img是行内元素,用text-align: center居中就行了。
文字的话margin-top搞定就行了，三角形也是通过子绝父相进行设置
想要显示隐藏，用display的none和block来设置，给下载提示框none,鼠标移进来hover来给block显示
文字的布局和购物车设置
登录，注册、消息通知和购物车用一个ul和li搞定，文字继承了大盒子li的属性，只需要设置一下它右浮动就行了。购物车同理跟提示框一个道理，只不过不是用display设置，而是用overflow: hidden;溢出来达到显示隐藏，高度设置成0，购物车也就3个文字，没有了高度，就被溢出隐藏了，鼠标移进去再给高度就行了
效果图
CSS文件
CSS样式注释也加了，希望能帮助各位同学
/*========== 公共样式 ==========*/
html, body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td {margin: 0 auto; padding: 0;font-family: "Microsoft YaHei";}
img { border: 0 none; vertical-align: top;}
ul,li,dl,dd,dt { list-style-type: none; }
i,em,cite { font-style: normal; }
body { -webkit-text-size-adjust:none; font-family:"Helvetica Neue",Helvetica,Arial,"sans-serif","PingFang SC";}
a{ text-decoration: none; }
a:focus,input:focus,select:focus { outline: none; }
/*黑色顶部 Strat*/
.black_nav{
width: 100%;
height: 40px;
background: #333;
line-height: 40px;
}
/*给一个小的盒子，水平居中*/
.warp{
width: 1226px;
height: 10px;
margin: 0 auto;
}
/*给大盒子里面的li标签左浮动*/
.black_nav li {
float: left;
position: relative;
}
.black_nav a{
color: #b0b0b0;
font-size: 12px;
}
/*让span标签外边距的填充，字体就居中了*/
.black_nav span{
margin: 0 6px;
color: #424242;
}
.black_nav a:hover{
color: #fff;
}
/*接下来设置下载APP的二维码提示*/
/*设置绝对定位，li设置了相对定位，子绝父相*/
/*设置display: none;进行隐藏*/
.litel-box{
width: 124px;
height: 150px;
background-color: #fff;
position: absolute;
top:40px;
left: 50%;
margin-left: -65px;
box-shadow: 0 1px 5px rgb(170,170,170);
padding: 18px 0;
box-sizing: border-box;
text-align: center; /*img是行内元素，让齐居中*/
display: none;
}
/*鼠标移动显示提示框*/
.black_nav li:hover>.litel-box{
display: block;
}
.litel-box>img{
width: 90px;
}
.litel-box P{
font-size: 14px;
color: #333;
margin-top: 14px;
line-height: 14px;
}
/*提示框三角形*/
/*知识点提示：绝对定位是找父元素定位，不会找子元素定位的*/
/*一定要记住子绝父相*/
.black_nav .triangle{
width: 0;
height: 0;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -16px;
display: none;
}
.black_nav li:hover>.triangle{
display: block;
}
/*登录注册消息通知购物车右浮动。不设置只会左浮动*/
/*字体继承了a标签的属性*/
.black_nav-right{
float: right;
}
/*购物车*/
.shopping_car{
width: 120px;
height: 40px;
background-color: #424242;
text-align: center;
margin-left: 25px;
cursor: pointer;
position: relative;
}
/*购物车图标*/
/*vertical-align: middle;是根据父元素进行垂直对齐*/
.shopping_car i{
margin-right: 5px;
font-size: 20px;
vertical-align: middle;
}
.shopping_car:hover{
background-color: #fff;
}
.shopping_car:hover a{
color: #ff6700;
}
/*让高度变0，溢出隐藏字体，相当于display:none，可以使用过渡效果*/
/*使用display将行内转成块元素，不能使用transition过渡效果*/
.shopping_car .cart{
width: 316px;
height: 0;
background-color: #fff;
position: absolute;
top: 100%;
right: 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
color: #424242;
font-size: 12px;
overflow: hidden;
transition: all 1s;
}
/*当鼠标移到时，高度恢复*/
.shopping_car:hover>.cart{
height: 98px;
line-height: 98px;
}
上一篇： HTML（四）