导航栏布局

实现如下导航栏：
在这里插入图片描述
首先进行页面需求分析，如图所示导航栏分为三部分，包括标志、导航、用户按钮。为了使结构看起来明显，我们使用色块表示，确保结构正确之后再往里面填充内容。

具体步骤如下：
（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>