关闭

CSS网站元素设计-横向导航

327人阅读 评论(0) 收藏 举报

网站导航是网站中最重要的元素,是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、纵向导航、下拉及多级菜单导航等3中常见形式.

1.       横向导航

使用CSS布局的形式制作导航与Tbale布局有很大的区别,网站除了页面布局之外,最重要的就是导航部分,在这一步应该先制作出个简单明快的导航系统,然后一步一步的完成具有设计效果的最终导航。

如下代码所示例

<ul id="nav">

<li><a href="#">首页</a></li>

<li><a href="#">文章</a></li>

<li><a href="#">参考</a></li>

<li><a href="#">BLOG</a></li>

<li><a href="#">论坛</a></li>

<li><a href="#">联系</a></li>

</ul>

元素ulCSS布局中使用得很广泛的一种元素,主要用来描述列表内容,每一个<ul></ul>表示其中的内容为一个列表块,块中的每一条列表数据用<li></li>来描述.

如上代码运行后所示,ul默认样式就加上了圆点状序号,而且默认为从上至下排列.

对于简单的 只有文字导航来说,相对于DIV的复杂实现,ul更为灵活.

加入如下样式

       #nav li{

       float:left;       

       }

       #nav li a{

       color:#000000;

       text-decoration:none;

       padding-top:4px;

       display:block;

       width:97px;

       height:22px;

       text-align:center;

       background-color:#ececec;

       margin-left:2px;           

       }

 

可以看到显示效果如下

在样式代码中,指定了float:left;属性,使得下一个对象贴进该对象的右边。

导航的关键在于a连接对象的样式控制,在这里使用#nav li a{} li下的每一个a链接对象编写了样式.

display:block 使得a链接对象的显示方式由一段文本改为一个块状对象,和div的特性相同,div默认状态下就是一个块状对象,而默认状态下a链接对象只是显示为一个普通文本,这样就没有办法使得a链接对象能够象一个方块状按钮一样去运作,使用display:block之后,就可以用CSS的外边距,内边距、边框等属性给a链接.

再给样式表中加上

       #nav li a:hover{

              background-color:#bbbbbb;

              color:#FFFFFF;

       }

可以看到,鼠标移的时候,就会出现响应而改变颜色了。

为了让某一个频道成为一个当前所属的频道,这个频道必须有一个和其他频道不一样的背景颜色。

<li><a href="#" id="current">首页</a></li>

 

       #nav li a#current{

              background-color:#2788da;

              color:#FFFFFF;

       }

       #nav {

              height:26px;

              border-bottom:2px solid #2788da;           

       }

修改后即可实现,每当切换一个频道页面时,只需将id=”current“移到当前频道所在a元素即可。 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:245126次
    • 积分:3373
    • 等级:
    • 排名:第9960名
    • 原创:21篇
    • 转载:306篇
    • 译文:3篇
    • 评论:42条