css导航栏怎么制作?用浮动属性完成如图1所示的导航栏布局。
图1 导航栏
要求:
(1)标志与导航在页面的左侧,按钮位于页面最右侧;
(2)导航栏中的元素都垂直居中;
(3)按钮中的文字水平居中;
(4)使用浮动属性,请不要用内联块代替浮动;
(5)按钮颜色分别为#28292a、#ffd40d。
制作页面之前,要学会分析页面需求。
如图2所示,导航栏分为3部分,包括标志、导航、用户按钮。在新手阶段,推荐使用色块表示结构,确保结构正确之后再往里面填充内容。遇到问题时,使用开发者工具检查是最佳的解决方法。
图2 导航栏拆分
制作导航栏的具体步骤如下。
(1)在页面中引入reset.css文件,清除默认样式,HTML代码如下。
<link rel="stylesheet" href="http://www.ux20.com/news/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="/news/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 删除背景色块