导航栏布局
实现如下导航栏:
首先进行页面需求分析,如图所示导航栏分为三部分,包括标志、导航、用户按钮。为了使结构看起来明显,我们使用色块表示,确保结构正确之后再往里面填充内容。
具体步骤如下:
(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>