admin管理员组文章数量:1566363
学习过程中并记录了这篇笔记
目录
css代码
html代码
效果
使用的图标字体在阿里iconfont下载,关于商城例如图片等素材在商城官网mi下载。
css代码
body{
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
.top-bar{
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333;
color: #b0b0b0;
font-size: 12px;
position: relative;
}
.container{
width: 1226px;
margin:0 auto;
}
.l-nav{
float: left;
}
.r-nav{
float: right;
}
.container li{
float: left;
position: relative;
}
.top-bar a{
color: #b0b0b0;
text-decoration: none;
}
.top-bar .sep{
color: #424242;
margin: 0 6px;
}
.top-bar a:hover{
color: #fff;
}
.cart{
width: 120px;
height: 40px;
text-align: center;
background-color: #424242;
margin-left: 25px;
cursor: pointer; /* 鼠标移入到这个区域,鼠标指针变为小手状态 */
transition: all 0.2s; /* 过渡效果 */
position: relative;
}
.cart:hover{
background-color: #fff;
}
.r-nav .cart:hover a{
color: #FF6700;
}
.cart:hover .cart-active{
height: 100px;
line-height: 100px;
}
.cart-active{
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 0.2s;
cursor: auto;
}
.download{
width: 124px;
height: 0px;
background-color: #fff;
box-shadow: 0 1px 5px #ccc;
position: absolute;
top: 40px;
left: 50%;
margin-left: -62px;
overflow: hidden;
transition: all .3s;
}
.download img{
width: 90px;
height: 90px;
margin: 18px 17px 12px;
}
.download p{
color: #444;
font-size: 14px;
line-height: 14px;
position: absolute;
top: 120px;
left: 20px;
}
.l-nav li:hover .download{
height: 148px;
}
.sanjiao{
display: none;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #e8e8e8;
position: absolute;
left: 17px;
bottom: 0;
}
.l-nav li:hover .sanjiao{
display: block;
}
.nav-wrap{
width: 100%;
height: 100px;
background-color: #fff;
}
.nav-bar{
width: 1226px;
height: 100%;
margin: 0 auto;
}
.logo{
width: 62px;
height: 56px;
float: left;
margin-top: 22px;
}
.logo img{
width: 56px;
height: 56px;
}
.search{
width: 296px;
height: 50px;
float: left;
margin-top: 25px;
}
.center-bar{
width: 868px;
height: 100px;
float: left;
padding-left: 172px;
box-sizing: border-box;
}
.center-bar>ul>li{
float: left;
padding: 38px 10px;
}
a{
color: #333;
text-decoration: none;
}
.center-bar>ul>li>a{
font-size: 16px;
}
.center-bar>ul>li>a:hover{
color: #FF6700;
}
.search>input{
width: 245px;
height: 50px;
border: 1px solid #e0e0e0;
border-right: none;
padding: 0 10px;
box-sizing: border-box;
float: left;
outline: none;
transition: all 0.2s;
}
.search>a{
width: 50px;
height: 50px;
float: left;
border: 1px solid #e0e0e0;
box-sizing: border-box;
font-size: 24px;
line-height: 2;
color: #616161;
text-align: center;
font-weight: 600;
transition: all 0.2s;
}
.search>a:hover{
background-color: #FF6700;
border-color: #FF6700;
color: #fff;
}
.search>input:hover , .search>input:hover+a{
border-color: #b0b0b0;
}
.search>input:focus , .search>input:focus+a{
border-color: #FF6700;
}
.nav-bar-list1{
width: 100%;
height: 229px;
background-color: #fff;
border-top: 1px solid #e0e0e0;
box-shadow: 0 3px 4px rgba(0,0,0,.18);
position: absolute;
left: 0;
top: 140px;
display: none;
}
.center-bar li:hover>.nav-bar-list1{
display: block;
}
.nav-bar-list1 li{
float: left;
width: 204px;
padding-top: 35px;
}
.img-list1{
width: 100%;
height: 110px;
border-right: 1px solid #e0e0e0;
box-sizing: border-box;
text-align: center;
margin-bottom: 16px;
}
.list1{
text-align: center;
font-size: 12px;
}
.prices{
color: #FF6700;
}
.wrap-list1 li:last-child .img-list1{
border-right: none;
}
.wrap-list1{
position: relative;
left: 150px
}
html代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Mi</title>
<!-- 网页图标-->
<link rel="icon" href="img/favicon.ico">
<!-- css样式重置文件-->
<link rel="stylesheet" href="css/reset.css">
<!-- 字体图标-->
<link rel="stylesheet" href="./css/iconfont/iconfont.css">
<!-- 引入外部样式-->
<link rel="stylesheet" href="css/mi.css">
</head>
<body>
<div >
<div >
<ul >
<li><a href="javascript:;">小米商城</a><span >|</span></li>
<li><a href="javascript:;">MIUI</a><span >|</span></li>
<li><a href="javascript:;">IoT</a><span >|</span></li>
<li><a href="javascript:;">云服务</a><span >|</span></li>
<li><a href="javascript:;">天星数科</a><span >|</span></li>
<li><a href="javascript:;">有品</a><span >|</span></li>
<li><a href="javascript:;">小爱开放平台</a><span >|</span></li>
<li><a href="javascript:;">企业团购</a><span >|</span></li>
<li><a href="javascript:;">资质证照</a><span >|</span></li>
<li><a href="javascript:;">协议规则</a><span >|</span></li>
<li>
<a href="javascript:;">下载app</a><span >|</span>
<div >
版权声明:本文标题:小米商城顶部导航栏练习 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1726414459a1069640.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论