首页>前端教程>CSS教程

CSS第八课:利用display:block做纵向导航和水平导航

一个网站,主导航的重要性不言而喻,美观、实用、交互、结构清晰都是要点。

前面我们已经学习了超链接a的基本样式,普通超链接的样式主要是鼠标经过的时候改变文字颜色和下划线。

而主导航的样式一般改变的是背景颜色或者背景图片。

这两年流行扁平化设计,几乎都是纯色为主了。

今天我们利用display:block这个关键的属性来完成导航的制作。

水平导航和纵向导航.jpg

查看案例 下载案例

一、内联对象转换为块状对象

a标签是一个典型的内联对象,可以并排在一起,可以为a设置背景颜色,但是默认的背景颜色和文字的范围是一致的。内联对象设置宽高的属性值是无效的。

.list a{
	color:#A00E39;
	background-color:#FDD9E8;
	text-decoration:none;}

为a添加背景颜色.jpg

如果此时把内联对象转换成块状对象,则可以设置宽高了。

也就是display这个属性,代表元素的显示方式。

display:inline(内联对象)转换成display:block(块状对象)。

.list a{
	display:block;/把a设置为块状对象。/
	width:100px;
	height:40px;
	line-height:40px;/*让文字纵向上居中对齐。*/
	margin-bottom:10px;/*让a和a之间产生间隔。*/
	color:#A00E39;
	background-color:#FDD9E8;
	text-decoration:none;}

把a标签设置display为block.jpg

此时的a变得和div一样,具有独占整个通栏的能力了,不能再并排。也可以设置宽高,文字默认在容器里是左上对齐的,利用line-heightheight的值一样,可以让文字纵向居中对齐。

二、纵向导航

1、HTML结构

    <div id="nav">
        <ul>
            <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
            <li><a href="#" class="current"><i class="fa fa-code"></i> HTML教程</a></li>
            <li><a href="#"><i class="fa fa-eye"></i> CSS教程</a></li>
            <li><a href="#"><i class="fa fa-gear"></i> javascript教程</a></li>
            <li><a href="#"><i class="fa fa-gears"></i> jQuery教程</a></li>
            <li><a href="#"><i class="fa fa-edit"></i> 教学反思</a></li>
            <li><a href="#"><i class="fa fa-star"></i> 学习笔记</a></li>
        </ul>
    </div>

在纵向导航上,利用font-awesome特殊字体实现了字体图标的插入。

如果不知道在导航栏的文字前如何插入小图标,可以查看这篇文章:

利用FontAwesome字体实现小图标的插入

2、主要CSS样式

#nav{
	width:180px;
	overflow:hidden;/*溢出隐藏*/}
#nav a{
	display:block;/*对a对象做宽高的前提是需要由内联对象(inline)转换成块状对象(block)。*/
	color:#ddd;
	padding:15px 25px;
	background-color:#000;
	}
#nav a:hover,#nav a.current{
	color:#fff;
	background-color:#0BC1C1;
	text-decoration:none;}

三、水平导航

纵向导航变水平导航的核心是为li设置浮动。

1、HTML结构

<div id="nav1" class="clearfix">
        <ul>
            <li><a href="#" class="current">HTML教程</a></li>
            <li><a href="#">CSS教程</a></li>
            <li><a href="#">javascript教程</a></li>
            <li><a href="#">jQuery教程</a></li>
            <li><a href="#">bootstrap框架</a></li>
            <li><a href="#">node.js教程</a></li>
        </ul>
    </div>

2、主要CSS样式

#nav1{
	width:780px;
	padding-left:20px;
	background-color:#000;
	border-bottom:5px solid #0BC1C1;
	}
#nav1 li{
	float:left;/*为li设置浮动是水平导航 的关键。*/
	}
#nav1 a{
	display:block;/*变成block区块,否则没有宽高,不能把范围撑开。*/
	color:#ddd;
	padding:12px 15px;
	}
#nav1 a:hover,#nav1 a.current{
	color:#fff;
	background-color:#0BC1C1;
	text-decoration:none;}

导航中还有一种下拉菜单,因为涉及到相对和绝对布局,暂且不表。

明天就是端午节啦,祝各位童鞋们端午节快乐!

端午节吃粽子喽.png

点赞


7
保存到:

相关文章

Top