多语言展示
当前在线:1414今日阅读:103今日分享:49

如何使用CSS 导航条

我们知道每一个网站都有着自己的导航条,这个导航条完全可以通过CSS工具来实现,我们就来学学用CSS工具做不同的导航条。
工具/原料

dreamweaver

方法/步骤
1

链接列表。我们可以使用这个链接列表的理论来建设自己的导航栏,从而让我们获得更多丰富的网页效果。

2

更多的应用形式;通过对于CSS语句进行一定的转换,我们还可以使用更多的语句形式。ul { list-style-type:none; margin:0; padding:0; }

3

垂直导航栏。这也是一个网页中常常出现的现象,我们可以通过简单的代码来实现这样的一个样式。a { display:block; width:60px; }

4

水平导航栏。对于这样的一个形态的导航栏我们是非常容易实现的,这种实现的办法也是分为两种来完成。一种就是行内列表项,另外一种就是浮动列表项。li { display:inline; }li { float:left; } a { display:block; width:60px; }

5

实例。我们在实际的网页设计当中会应用到一个有变化的导航条,这个导航条在代码的设计上更加的复杂一些。

6

媒介类型。同样的网页在不同的媒介上同的显示是不一样的,我们就需要分别为这些媒介设置不同的显示方式。'voice-family' 针对听觉,'font-size' 针对显示器等等。

推荐信息