csc实例:用UL制作横向CSS导航菜单

前互联网站前端页面的大趋势是采用DIV+CSS构架,因为它不仅能更受搜索引擎青睐,而且一个良好结构的DIV架构网站可以从一定程度上提高页面的展示速度。

在本教程中,我们将通过实例来给大家介绍:如何使用(X)HTML中的

    标签来制作一个简单横向导航菜单

    为什么要用

      标签来制作导航栏和菜单栏?用UL做导航菜单之所以被广泛采用,主要是因为它的代码清晰,布局方便,更重要的是具有“语义”效果,能够方便进一步SEO。

       

      查看演示UL Menu

      下载实例Demo Rar

      第一步、编写横向菜单的HTML代码架构

      请将以下代码添加到HTML文档的导航栏区域中。

       

      第二步、编写CSS代码

      1、设置公共样式

      请将以下CSS代码添加到HTML文档的...标签范围中。

      大家都知道,

        中的各条目
      • 默认都是纵向排列的,我们需要定义CSS来让其横向排列起来。

        Tips:因为我们现在将导航栏拉出来独立讲解,所以需要设置一些公共样式,如果您在 body 或其他地方已经重设了默认效果,以上代码可以去掉

        2、让文字横排

        大家都知道,

          标签下的项目
        • 默认是纵向排列的,我们需要定义额外的CSS属性让其横向排列。

          3、设置链接样式:

          我们用内边距(即填充padding)的方式,让每个菜单变得宽一些,如果你的菜单是中英文混排的,建议设置单个菜单的高宽,这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式:

          4、链接悬停效果:

          通过以上几步的综合作用,一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果,让导航栏更美观。当然,如果要让导航栏更炫丽,你可以在CSS悬停属性上定义背景图片。

          这里的代码一个缺陷,最右边会多出来一个边框,由于 :first-child 伪类不被IE系列浏览器所支持,我们只能单独写一个样式,将最后一个边框去掉,同时要给 HTML 代码增加一个额外选择符。



          好了,到这里一个简单的横向导航菜单就制作完成了,是不是很简单? 下面给出完整代码:

           

你可能感兴趣的:(css)