css导航栏怎么制作？用浮动属性完成如图1所示的导航栏布局。
图1 导航栏
要求：
（1）标志与导航在页面的左侧，按钮位于页面最右侧；
（2）导航栏中的元素都垂直居中；
（3）按钮中的文字水平居中；
（4）使用浮动属性，请不要用内联块代替浮动；
（5）按钮颜色分别为#28292a、#ffd40d。
制作页面之前，要学会分析页面需求。
如图2所示，导航栏分为3部分，包括标志、导航、用户按钮。在新手阶段，推荐使用色块表示结构，确保结构正确之后再往里面填充内容。遇到问题时，使用开发者工具检查是最佳的解决方法。
图2 导航栏拆分
制作导航栏的具体步骤如下。
（1）在页面中引入reset.css文件，清除默认样式，HTML代码如下。
<link rel="stylesheet" href="CSS/reset.css" />
（2）设置公共CSS样式。CSS代码如下。
/*公共属性 */
.fl{
float: left;
}
.fr{
float: right;
}
/*公共属性 */
使用浮动属性时，为了避免页面频繁出现相同的CSS语句，一般将浮动语句与清除浮动的语句都写成公共CSS样式。使用的时候，只需要在元素的class属性中添加对应的class名即可。
（3）创建最外层盒子。
在页面中创建一个div元素，class名为nav，表示整个导航栏，设置高度和下边框。为了更清楚地看到内容在整个导航栏中的位置，添加临时的背景颜色，运行结果如图3所示。CSS代码如下。
.nav{
height: 88px;
border-bottom:2px solid #e8e8e8 ;
background-color: #fdf5de;
}
图3 创建最外层盒子
HTML代码如下。
<div class="nav clearfix"></div>
（4）分别在HTML结构中创建3个元素，标志与导航向左浮动，用户按钮向右浮动，为了查看它们的位置，设置宽、高与背景颜色，运行结果如图4所示。
图4 用色块标识各部分的位置
使用浮动之后，要给浮动元素的父级元素清除浮动，否则会造成高度塌陷。HTML代码如下。
<div class="nav clearfix">
<div class="logo fl">
图片
</div>
<div class="main fl">
导航
</div>
<div class="user fr">
按钮
</div>
</div>
CSS代码如下。
.nav{
height: 88px;
border-bottom:2px solid #e8e8e8 ;
margin-top: 100px;
background-color: #fdf5de;
}
.nav .logo{
margin: 0 0 0 80px;
width: 100px;
height: 88px;
background-color: #f9809f;
}
.nav .main{
margin-left: 60px;
width: 100px;
height: 88px;
background-color: #2fbdbf;
}
.nav .user{
margin: 0 16px 0 60px;
width: 100px;
height: 88px;
background-color: #86d5bf;
}
（5）检查色块位置是否正确，在色块中填充详细内容，如图5所示。HTML代码如下。
<div class="nav clearfix">
<div class="logo fl">
<img src="img/logo1.jpg" alt=""/>
</div>
<div class="main fl">
<a href=""> 品牌讯息</a>
<a href=""> 服务指南 </a>
<a href=""> 工厂信息 </a>
<a href=""> 公司简介 </a>
<a href=""> 招聘 </a>
</div>
<div class="user fr">
<a href="" class="fl"> 联系我们 </a>
<a href="" class="fl"> 登录 </a>
</div>
</div>
图5 填充内容
（6）删掉之前为色块临时设置的宽度，由于设置了浮动属性，宽度由子元素撑开，如图6所示。CSS代码如下。
.nav .logo{
margin: 0 0 0 80px;
height: 88px;
background-color: #f9809f;
}
.nav .main{
margin-left: 60px;
height: 88px;
background-color: #2fbdbf;
}
.nav .user{
margin: 0 16px 0 60px;
height: 88px;
background-color: #86d5bf;
}
图6 宽度由内容撑开
（7）使元素垂直居中。给色块添加CSS属性line-height，当line-height与height相等时，元素垂直居中显示，如图7所示。CSS代码如下。
.nav .logo{
margin: 0 0 0 80px;
height: 88px;
line-height: 88px;
background-color: #f9809f;
}
.nav .main{
margin-left: 60px;
height: 88px;
line-height: 88px;
background-color: #2fbdbf;
}
.nav .user{
margin: 0 16px 0 60px;
height: 88px;
line-height: 88px;
background-color: #86d5bf;
}
图7 元素垂直居中显示
（8）调整细节部分的CSS样式，如图8所示。CSS代码如下。
.nav .main a{
text-decoration: none;
margin: 0 12px;
}
.nav .user a{
font-size: 14px;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
border-radius: 18px;
margin: 22px 0;
}
.nav .user a:nth-of-type (1){
background-color: #28292a;
margin-right: 20px;
color: #ffffff;
}
.nav .user a:nth-of-type (2){
background-color: #ffd40d;
color: #000000;
}
图8 调整细节部分的CSS样式
（9）删除多余的背景颜色，如图9所示。CSS代码如下。
.nav{
height: 88px;
border-bottom:2px solid #e8e8e8 ;
margin-top: 100px;
}
.nav .logo{
margin: 0 0 0 80px;
height: 88px;
line-height: 88px;
}
.nav .main{
margin-left: 60px;
height: 88px;
line-height: 88px;
}
.nav .user{
margin: 0 16px 0 60px;
height: 80px;
line-height: 88px;
}
图9 删除背景色块
