导航栏布局
实现如下导航栏：
首先进行页面需求分析，如图所示导航栏分为三部分，包括标志、导航、用户按钮。为了使结构看起来明显，我们使用色块表示，确保结构正确之后再往里面填充内容。
具体步骤如下：
（1） 在页面中引入reset.css文件（前两篇博客里有介绍），清除默认样式。
HTML代码如下：
<link rel="stylesheet" href="css/reset.css" />
（2） 设置向左和向右的浮动属性的CSS公共样式。
CSS代码如下：
/* 公共属性 */.fl{float: left;}.fr{float: right;}
（3） 创建最外层盒子。在页面中创建一个div元素，class名为nav，表示整个导航栏，设置高度和下边框，并添加临时的背景颜色。
HTML代码如下：
<div class="nav clearfix"></div>
CSS代码如下：
.nav{height: 88px;border-bottom: 2px solid #e8e8e8;border-top: 100px;background-color: #fdf5de;}
（4）在HTML的最外层盒子中创建三个元素，标志与导航向左浮动，用户按钮向右浮动。为了检查他们的位置，设置宽高与背景颜色。
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;border-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）在色块中填充详细内容。
HTML代码如下：
<div class="nav clearfix"><div class="logo fl"><img src="img/test3.png" 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>
效果图如下：
（6）删除之前为色块临时设置的宽度，由于设置的浮动属性，宽度由子元素撑开。
效果图如下：
（7）使元素垂直居中。给色块添加CSS属性line-height，设置其与height的值相等，这样元素就会垂直居中显示。
CSS代码如下：
line-height: 88px;
效果图如下：
（8）调整细节部分的CSS样式，具体见相关代码。
CSS代码如下：
.nav .main a{margin: 0 12px;}.nav .user{margin: 0 16px 0 60px;height: 88px;line-height: 88px;background-color: #86d5bf;}.nav .user a{font-size: 14px;width: 100px;height: 40px;line-height: 40px;text-align: center;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;}
效果图如下：
（9）删除多余的背景颜色。
最终效果图如下：
完整代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>D5</title><link rel="stylesheet" href="css/reset.css" /><style>/* 公共属性 */.fl{float: left;}.fr{float: right;}.clearfix:after{content: "";display: block;clear: both;}.nav{height: 88px;border-bottom: 2px solid #e8e8e8;border-top: 100px;background-color: #fdf5de;}.nav .logo{margin: 0 0 0 80px;height: 88px;line-height: 88px;}.nav .main{margin-left: 60px;height: 88px;line-height: 88px;}.nav .main a{margin: 0 12px;}.nav .user{margin: 0 16px 0 60px;height: 88px;line-height: 88px;}.nav .user a{font-size: 14px;width: 100px;height: 40px;line-height: 40px;text-align: center;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;}</style></head><body><div class="nav clearfix"><div class="logo fl"><img src="img/test3.png" 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></body></html>
