`
firemmet
  • 浏览: 2546 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

工具条/导航栏样式

阅读更多
源于http://wallimn.iteye.com/blog/780822,分享下自己的想法,
方案一、
素材:



html结构:
<div class="linkbar">
    <a href="#" class="cur"><span>最新动态</span></a>|<a href="#"><span>最新动态</span></a>|<a href="#"><span>最新动态</span></a>|<a href="#"><span>最新动态</span></a>
</div>

css:
.linkbar{
    color: #000;
    font-size: 12px;
    line-height: 16px;
}
.linkbar a, .linkbar span{
    display: inline-block;
    height: 16px;
}
.linkbar a{
    margin: 0 5px;
    padding: 0 0 0 1px;
    color: #F00;
    text-decoration: none;
    cursor: pointer;
}
.linkbar a:hover, .linkbar a.cur{
    background: #999 url(bg.png) no-repeat 0 0;
    color: #FFF;
}
.linkbar a:hover span, .linkbar a.cur span{
    padding: 0 1px 0 0;
    background: #999 url(bg.png) no-repeat 100% 100%;
}

优点:比http://wallimn.iteye.com/blog/780822的结构更精简,图片使用更小巧
缺点:灵活性欠佳,此处使用的图片圆角弧度较小(仅一个像素),对使用环境没有太大要求,但当圆角增大时,使用场合将受到制约,不适宜用于背景复杂的环境。
  • 大小: 358 Bytes
分享到:
评论

相关推荐

    CSS网页导航栏样式制作软件

    【CSS网页导航栏样式制作软件】是一款专为不熟悉CSS编码的用户设计的工具,它可以帮助用户轻松创建和设计网页的导航栏样式。这款软件提供了一个直观的界面,让用户可以通过图形化的方式设置导航栏的各种元素,如字体...

    qt 制作的可以左右滑动的导航栏

    Qt提供了丰富的样式表(QSS)来定制导航栏的外观。通过设置颜色、边框、背景等属性,你可以让导航栏符合应用的整体风格。对于C++实现,可能需要重载`paintEvent`方法来自定义绘制。 5. **优化与性能**: 考虑到...

    qt实现导航栏Demo

    总结来说,"qt实现导航栏Demo"是一个展示Qt框架下如何构建交互式、美观的导航栏的实例,它充分利用了Qt的信号与槽机制、QSS样式表、QPainter绘图功能以及良好的接口设计,实现了切换特效、选中状态反馈和自定义风格...

    Qt 自定义导航栏

    在本文中,我们将深入探讨如何在Qt环境中自定义一个功能丰富、样式美观的树形导航栏。Qt是一个跨平台的应用程序开发框架,广泛用于创建GUI应用程序。自定义导航栏是提高用户界面(UI)吸引力和易用性的重要手段,...

    C#仿Windows可折叠导航栏

    在C#编程中,创建一个仿Windows风格的可折叠导航栏是一项常见的任务,尤其是在开发桌面应用程序时。这种导航栏能够提供清晰的用户界面,帮助用户更有效地浏览和操作各种功能。下面将详细介绍如何实现这样的功能,并...

    导航栏与MDI

    【导航栏与MDI】是Windows应用程序开发中的两个重要概念,尤其在使用Visual Studio 2012这样的集成开发环境中尤为常见。它们是构建用户界面(UI)的关键元素,为用户提供方便的操作和交互。 首先,我们来理解“导航...

    Qt - 导航栏的实现

    在Qt框架中,导航栏(通常称为ToolBar或NavBar)是一种常用的设计元素,它提供了一种直观的方式来展示和访问应用程序的主要功能。这篇博文的作者通过个人的实践,分享了如何在Qt中实现一个导航栏,虽然可能是一份...

    OC常用的导航栏和基础类

    4. **自定义导航栏**:可以修改导航栏的背景色、标题颜色、字体、返回按钮样式等。例如,使用`[self.navigationController.navigationBar setTitleTextAttributes:]`来设置标题的样式。 5. **导航条操作**:`...

    ios 导航栏放置多个按钮及引申的ivar变量的问题

    2. 使用UIBarButtonSystemItem:如果你的按钮需要系统提供的样式(如“刷新”、“加号”等),可以使用UIBarButtonSystemItem枚举创建UIBarButtonItem,然后添加到导航栏。 3. 自定义UIView:创建一个继承自UIView...

    Jquery左侧导航栏酷炫效果

    在网页设计中,一个吸引人的用户界面至关重要,而左侧导航栏是常见的布局元素,它能够帮助用户快速地浏览和访问网站的内容。"Jquery左侧导航栏酷炫效果"是一个专为初学者设计的教学示例,它展示了如何使用jQuery库来...

    HTML侧边浮动/固定栏

    HTML侧边浮动栏是网页设计中常见的布局方式,主要用于创建如侧边导航、广告条或工具栏等元素,使它们始终在页面滚动时保持可见。这种布局技术在现代网页设计中非常实用,因为它能提供良好的用户体验,让用户在浏览长...

    T型导航栏设置

    在IT行业中,尤其是在移动应用和网页设计领域,"T...总的来说,T型导航栏是提升用户在移动应用和网页中导航体验的重要工具。了解其设计原则和实现方法,以及如何有效利用开源资源,将有助于创建高效且用户友好的界面。

    C# 简单导航条

    4. **ToolStrip控件**:如果需要更简洁的样式,可以使用ToolStrip控件,它提供了工具栏样式的导航条。与MenuStrip类似,添加ToolStripButtons并为其绑定事件。 5. **TabControl控件**:对于需要在一个窗体中展示多...

    openlayers中自定义工具条

    2. **CSS样式**:为了使工具条美观且符合项目风格,需要编写CSS样式来控制按钮的外观和布局。 3. **JavaScript实现**:在JavaScript中,你需要创建OpenLayers的控制对象,并将其添加到工具条容器中。例如,创建一个...

    as3 导航栏

    在创建导航栏时,我们通常会定义一个类来代表导航条,包含各个导航项(如按钮或菜单项)。这些导航项可以是MovieClip或SimpleButton实例,每个都绑定到特定的事件处理函数,当用户点击时触发相应的行为。 在描述中...

    33种css导航样式

    CSS(层叠样式表)提供了强大的工具来定制导航栏的外观和交互效果,使之成为吸引用户注意力并提升用户体验的关键元素。"33种CSS导航样式"这个资源包含了多种创意和实用的设计案例,为设计师提供了丰富的灵感和实践...

    导航栏库项目

    总的来说,“导航栏库项目”提供了一个高效且灵活的工具,帮助开发者快速构建美观、易用的导航栏,提高应用的专业性和用户友好性。对于不熟悉自定义视图或者想要节省开发时间的开发者来说,这类库是极有价值的资源。

    openlayer4 工具条

    在压缩包中的"工具条"文件中,可能包含了实现这些功能的JavaScript源代码、CSS样式表和HTML模板。通过阅读和理解这些文件,你可以深入学习如何在OpenLayers 4中自定义工具条并集成测量功能。这对于开发复杂的地图...

    jQuery网易新闻头部下划线跟随导航栏代码

    【jQuery网易新闻头部下划线跟随导航栏代码】是一种常见的网页交互效果,它使得网站的导航栏在用户滚动页面时,当前选中的菜单项下方会有一条动态的下划线跟随,增强了用户体验,提升了网站的视觉吸引力。...

    网站导航栏

    "导航条"这个文件可能包含了预设的样式、代码片段或模板,可以帮助设计师快速构建导航栏。对于初学者来说,学习如何利用这些资源可以大大提升网页制作效率。同时,理解用户交互原则和网页设计的最佳实践也是构建有效...

Global site tag (gtag.js) - Google Analytics