html+css:小米顶部菜单+二级菜单
1、源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
/*height:38px;*/
background-color: #333;
}
.header .menu{
float: left;
color: white;
/*height: 38px;*/
/*!*垂直居中*!*/
/*line-height: 38px;*/
}
.header .account{
float: right;
color: white;
/*height: 38px;*/
/*line-height: 38px;*/
}
/*将部件放到容器中，实现居中*/
.container{
width: 1000px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
.header a{
color:#b0b0b0;
line-height: 40px;
display: inline-block;
/*内部有了高度，外部就不用设置了*/
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover{
color: white;
}
.body{
margin: 0;
}
.sub-header{
height: 100px;
/*background-color: #b0b0b0;*/
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width: 234px;
float:left;
/*border: 1px solid red;*/
}
.sub-header .menu-list{
float: left;
line-height: 100px;
/*border: 1px solid red;*/
}
.sub-header .menu-list a{
display: inline-block;
padding: 0 10px;
color: #333333;
font-size: 16px;
/*去掉标签的下划线*/
text-decoration: none;
}
/*放上鼠标，改变颜色*/
.sub-header .menu-list a:hover{
color:#ff6700;
}
.sub-header .search{
float: right;
}
.sub-header .logo a{
/*图片居中只能使用内外边距*/
margin-top: 22px;
display:inline-block;
}
.sub-header .logo a img{
height: 56px;width: 56px
}
</style>
</head>
<body >
<div class = "header">
<div class="container">
<div class = "menu">
<a href="https://www.mi.com/index.html">小米商城</a>
<a href="https://www.mi.com/index.html">MIUI</a>
<a href="https://www.mi.com/index.html">云服务</a>
<div style="width: 200px;text-align: center"></div>
</div>
<div class = "account">
<a href="https://www.mi.com/index.html">登录</a>
<a href="https://www.mi.com/index.html">注册</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class = "ht logo">
<!--a标签默认为行内标签，设置高度、边距无效。->变成块级标签 || 块级+行内-->
<a href="https://www.mi.com/index.html">
<img src="/static/xiaomi.png">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/index.html" >小米手机</a>
<a href="https://www.mi.com/index.html">电视</a>
<a href="https://www.mi.com/index.html">笔记本</a>
</div>
<div class = "ht search"></div>
<div class="clear:both"></div>
</div>
</div>
</body>
</html>
2、效果展示
3、小结
