仿新浪首页顶部导航条_下拉菜单

abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>仿新浪首页顶部导航条</title> <link rel="

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿新浪首页顶部导航条</title>
<link rel="stylesheet" type="text/css" href="CssTest01.css">
<link rel="stylesheet" type="text/css" href="fa/css/font-awesome.min.css">
</head>
<body>
<div class="header">

<div class="header_top"></div>
<div class="header_bottom">
<div class="header_content">
<div class="header_left">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端  <i class="fa fa-angle-down" ></i>
<ul>
<li>新浪微博</li>
<li>新浪新闻</li>
</ul>
</a>
</div>
<div class="header_right">
<a href="#">登录</a>
<a href="#">微博  <i class="fa fa-angle-down" ></i>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</a>
<a href="#">博客  <i class="fa fa-angle-down" ></i>
<ul>
<li>博客评论</li>
<li>未读提醒</li>
</ul></a>
<a href="#">邮箱  <i class="fa fa-angle-down" ></i>
<ul>
<li>免费邮箱</li>
<li>VIP邮箱</li>
<li>企业邮箱</li>
</ul></a>
<a href="#">网站导航</a>
</div>
<div class="clear_float"></div>
</div>

</div>
</div>
</body>
</html>

* {
margin: 0px;
padding: 0px
}

.header_top {
width: 100%;
height: 3px;
background: #FF8500;
}

.header_bottom {
width: 100%;
height: 40px;
background: #FCFCFC;
}

.header_content {
height: 40px;
width: 1020px;
margin: 0px auto; /**居中：上下无间隙，左右自动*/
}

.header_left {
height: 40px; /**没内容的时候不会自己撑开，要设置宽高*/
float: left;
font-size: 0px;
/**清除a标签之间的默认留白间距有3种方法
方法一：font-size:0
方法二：a标签内容写在一行
方法三：float浮动：父级元素设置display: flex;
方法四：letter-spacing：父级-999px 本身0px;
*/
}

.header_right {
height: 40px;
float: right;
}

.clear_float {
clear: both;/**清除浮动*/
}

a {
width: 90px;
height: 40px;
line-height: 40px;
text-decoration: none;
font-size: 13px;
color: #4C4C4C;
position: relative;
text-align: center;
display: inline-block; /**将a标签转行内块元素可设置宽高*/
}

a:hover {
color: #FF8500;
background: #EDEEF0;
}

i{
color: #FF8500;
}

ul {
width: 100px;
position: absolute;
border: #FF8500 solid 1px;
border-top: none;
border-bottom: none;
display: none;
}

a:hover ul{
display: block;
}

li{
list-style: none;
height: 30px;
line-height: 30px;
border-bottom: #FF8500 solid 1px;
padding: 0px 10px;
text-align: left;
color: #4C4C4C;
}

li:hover{
background: #FFF5DA;
color: #FF8500;
}

总结：还是要细心吧，特别是设置pading和margin的时候像a设置了padding ，ul会受影响，一开始设置隐藏了就老搞不明白为什么有间距，还有一个问题是有没有办法让a标签和li标签自动填充宽度对齐，而不是设置固定的宽度，强迫症觉得不对齐不好看，回头我再想想。

Correcting teacher：天蓬老师Correction time：2019-03-05 13:28:43
Teacher's summary：<a>标签与<li>标签属于不同的标签类型 , 有着自己原始的样式, 可以通过浏览器中的CSS查看器, 来了解他们区别

仿新浪首页顶部导航条_下拉菜单

Popular Entries