导航栏布局

实现如下导航栏：

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

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

更多推荐

HTML网页入门练习——导航栏布局设计