`

CSS橫向导航

CSS 
阅读更多
CSS导航样式

导航条的制作可以采用一个列表，并对之中的列表项浮动定位，再加上细节上的样式设计，一个导航就完成了，下面根据不同的导航实例分析一下。

横向导航

BADY部分

<body>   <!—以列表作为导航条，列表项作为导航频道，很好的利用了列表标签-->

        <ul id="nav">

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

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

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

                <li><a href="#">博客</a></li>

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

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

        </ul>

</body>

CSS部分

<style type="text/css" >

<!--

#nav {      

        height:26px;

        border-bottom:2px solid #2788da;

}


#nav li {      /*针对列表项，去除列表前面的样式，并使之浮动定位，形成横向导航条*/

        float:left;

        list-style-type:none;

}

#nav li a {     /*将导航文字作为块级元素，使之可以像一个方块按钮一样去运作，对之进行样式设计*/

        color:#000;

        text-decoration:none;

        padding-top:4px;

        display:block;

        width:97px;

        height:22px;

        text-align:center;

        background-color:#eee;

        margin-left:2px;

}

#nav li a#current { /*此样式是想模仿一种文件夹样式，当前文档所在频道会显示为与其他频道不同的样式*/

       background-color:#2788da;

      color:#fff;

}

#nav li a:hover{ /*设置鼠标悬在按钮上的样式，注意，a:hover只有在a标签中有href属性中的才有效*/

        background-color:#bbb;

        color:#fff;

}

-->

</style>

分享到：
| 屏蔽网页JS错误提示代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css横向导航菜单样式

    css 横向导航菜单样式 css 横向导航菜单是指在网页中使用 CSS 语言来实现的横向导航菜单样式，该样式可以使网页导航菜单更加美观、易用。该样式主要通过使用 CSS 语言来设置菜单的样式，包括菜单的背景颜色、文字...

    css横向导航菜单代码

    【CSS横向导航菜单】是一种常见的网页布局元素，用于在页面顶部提供多个链接或选项，方便用户快速访问网站的不同部分。创建CSS横向导航菜单的核心在于利用CSS（层叠样式表）来控制HTML元素的布局和样式，使其水平...

    8款流行经典的企业网站常见css横向导航菜单

    "8款流行经典的企业网站常见css横向导航菜单"提供了多种样式的选择，帮助设计师们为网站增添专业感和交互性。这些CSS（层叠样式表）设计通常用于创建水平布局的菜单，使得用户能轻松地浏览和访问网站的不同部分。 ...

    完美的二级css横向导航条

    本文将深入探讨如何创建一个完美的二级CSS横向导航条，结合实际案例“完美的二级css横向导航条”进行详细讲解。 首先，我们来理解一下二级导航条的概念。一级导航条通常位于页面顶部，包含网站的主要分类；二级导航...

    CSS横向导航条-5

    本教程将深入探讨如何创建美观且功能完善的CSS横向导航条。 首先，我们需要了解HTML基础结构。一个简单的导航条通常包含`&lt;ul&gt;`（无序列表）和`&lt;li&gt;`（列表项）元素，它们会被用作导航链接的容器。例如： ```html ...

    二级css横向导航条

    在网页设计中，二级CSS横向导航条是一种常见的交互元素，用于提供清晰的网站结构和方便的用户导航。这种导航条通常包含一级菜单项，当用户悬停在一级菜单上时，会显示对应的二级子菜单。在本文中，我们将深入探讨...

    CSS横向导航条-3

    "CSS横向导航条-3"这个主题聚焦于使用纯CSS来创建美观且功能强大的水平导航菜单。下面我们将深入探讨CSS在构建横向导航条时的关键知识点。 1. **CSS盒模型**：理解CSS盒模型是制作任何网页元素的基础，包括导航条。...

    css横向导航条

    NULL 博文链接：https://virgoooos.iteye.com/blog/274358

    纯css打造漂亮蓝白色横向导航条代码.rar

    【标题】中的“纯css打造漂亮蓝白色横向导航条代码”揭示了这个压缩包内容的核心：它包含了一组使用纯CSS编写的代码，用于创建一个美观的蓝白色横置的导航条。在网页设计中，导航条是必不可少的元素，它帮助用户在...

    div+css布局制作横向带箭头步骤流程样式

    `div+css`布局能够实现灵活、可维护的网页设计，对于创建横向带箭头的步骤流程展示尤为适用。以下是制作此类布局的具体步骤和相关知识点： 1. **创建HTML结构**：首先，我们需要用`&lt;div&gt;`元素来表示每个步骤，每个...

    纯css制作的简单的二级横向导航条

    用纯div+css布局，来制作的一个比较简单实用的下拉横向的导航条

    五款漂亮的CSS横向下拉菜单导航条

    总结来说，这些CSS横向下拉菜单导航条的设计不仅注重美观，还兼顾了实用性与交互性。通过灵活运用CSS3特性，我们可以创造出既满足视觉需求，又能提供优质用户体验的导航条，提升网站的整体品质。

    纯CSS实现横向导航栏

    纯CSS实现横向导航栏，导航栏分三级子菜单，主要所用的html标签为ul与li

    div+css+ul-li制作横向导航栏

    在网页设计中，导航栏是页面布局的重要...总之，通过`div+css+ul-li`，我们可以轻松地创建出具有专业外观的横向导航栏。随着技术的发展，可以进一步探索更高级的布局技巧和动态效果，以满足不断进化的网页设计需求。

    五款漂亮的CSS横向下拉菜单导航条.rar

    本文将详细探讨标题“五款漂亮的CSS横向下拉菜单导航条”所涵盖的知识点，以及如何利用CSS来创建这样的效果。 一、CSS基础 CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、XHTML等）文档样式的语言。通过CSS...

    js+css经典横向导航栏

    在“js+css经典横向导航栏”中，我们主要探讨的是如何结合JavaScript和CSS来创建一个功能丰富、视觉效果良好的横幅导航。 **CSS（层叠样式表）** 是用于控制网页外观的关键技术。在创建横向导航栏时，CSS可以用来...

    五款WEB2.0漂亮的CSS横向下拉菜单导航条

    WEB2.0时代的到来，使得网站设计更加注重用户体验和交互性，CSS横向下拉菜单导航条便是这一趋势的典型体现。下面我们将详细探讨这五款WEB2.0漂亮的CSS横向下拉菜单导航条的设计原理、实现方法以及它们各自的特色。 ...

    音乐横向css导航菜单

    "音乐横向css导航菜单"是一个专为音乐类网站设计的横置样式导航菜单，利用CSS（Cascading Style Sheets）技术实现，强调美观与功能的结合。下面将详细解析这一主题的相关知识点。 首先，CSS是网页设计中的样式表...

Magicbox
Global site tag (gtag.js) - Google Analytics