`
firemmet
  • 浏览: 2461 次
  • 性别: 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
分享到:
评论

相关推荐

    Bootstrap左侧下拉三级菜单导航

    Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航

    bootstrap-easy-sidebar, 围绕主题集成和灵活性设计的Bootstrap 工具条.zip

    bootstrap-easy-sidebar, 围绕主题集成和灵活性设计的Bootstrap 工具条 bootstrap-easy-sidebar我看到了 Bootstrap的几个... 通过继承导航栏的所有样式,然后在需要的地方更改,尝试完全集成侧栏。应该支持任何类型的Bo

    WPF编程宝典 part2

    17.5.2 修改滚动条 445 17.5.3 控件模板示例 450 17.6 可视化状态 451 17.7 小结 452 第18章 自定义元素 453 18.1 理解WPF中的自定义元素 454 18.2 构建基本的用户控件 456 18.2.1 定义依赖项属性 456 18.2.2 定义...

    CSS3悬停凸起菜单工具条特效

    CSS3悬停凸起菜单工具条特效是一款黑色3D质感的图标菜单工具条,图标导航栏悬停高亮突出显示特效。

    Ext Js权威指南(.zip.001

    9.3.3 面板标题栏构件:ext.panel.header与ext.panel.tool / 438 9.3.4 记录和恢复面板属性:ext.util.memento / 439 9.3.5 面板常用的配置项、方法和事件 / 439 9.4 布局 / 441 9.4.1 布局概述 / 441 9.4.2 ...

    Nav-Bar-React:使用React的样式化的响应式下拉导航栏

    Create React App入门 该项目是通过引导的。 可用脚本 ... 如果您对构建工具和配置选择不满意,则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反,它将所有配置文件和传递依赖项(we

    Foundation 图标

    图标可用于文本,按钮,工具条,导航栏,表单等。 以下是 Foundation 图标的实例: 刷新按钮: 检测图标: 主页图标: 图标语法 创建图标语法格式如下: name 部分替换为图标的名字。 要使用图标我们需要在 部分...

    JAVA上百实例源码以及开源项目

     [ConfigLine.java] 控制条类  [RoundBox.java] 限定选择控件  [MonthMaker.java] 月份表算法类  [Pallet.java] 调色板,统一配色类 Java扫雷源码 Java生成自定义控件源代码 2个目标文件 Java实现HTTP...

    CAXA电子图板培训教程.pdf

    在"命令"栏选择合适的命令图标拖到"标准工具条"中,定制 自己的常用工具条; 3、 界面配置。在"自定义"工具条中的"工具栏"里调出常用的工具条,移动到合适的位置;在"工 具" 、 "界面操作"中选择"保存界面配置" ,...

    软件界面设计工具3款合集

    预制了六十多个界面元素,从简单的输入框,下拉框,到经常用得到的导航条,日历,表格,到复杂的Tag Cloud,Cover Flow, 地图,WYSWYG的格式工具栏等,有了这些不用从头画起,其实比用白板都快; 界面元素的修改很...

    【最新版】wechat_devtools_1.02.2004020.dmg【亲测可用】最好的微信开发者工具

    F 修复 模拟器工具栏样式异常 F 修复 wx.addPhoneContact时顶部按钮显示错误的问题 反馈详情 F 修复 标题栏文字过长覆盖胶囊按钮的问题 F 修复 文件系统读取代码包内文件规则与真机不一致的问题 F 修复 关闭多...

    400个DreamWeaver插件

    mxp/看看本页导航栏的效果,这个插件就是做这个效果的。修正了测试版中OnMouseOut鼠标事件无效的错误,过渡更平滑。控制参数更丰富 mxp/给选择的文字迅速加上连接。比如选择的文字为microsoft,那么将加上一个到...

    深度学习(asp)网址导航系统 3.1.2(最新更新完美版)

    ·重写左侧侧栏“名站导航”“实用工具”实现后台任意栏目前台左侧或酷站大全位置设定 ·修改数据库 栏目表-fview字段类型改为数字 ·优化频道内容页 ver2.2.5 ·修订首页firefox显示错误 ·修订网站二级页面样式 ·...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    7.jquery+div实用漂亮精致的多级导航栏菜单插件代码示例 8.jQuery+ul实现漂亮竖直下拉菜单 9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的...

    mall-xiaohongshu-小程序模仿小红书.zip

    Markdown:在线编辑器GifCam:Gif录制工具 微信小程序开发文档Iconfont-阿里巴巴矢量图标库:各种需要的小图标都有哦遇到的几个问题1、首页导航栏左右滑动效果图: 这部分,是通过微信小程序的scroll-view组件来...

    免费友情链接网自动收录

    2.优化分类,调用到导航栏上面,实现改分类不用手动在修改! 3.内页调用代码一个显示不正常,进行了修复! 4.首页加入设为首页,加入收藏等代码功能! 5.特别提醒所有客户,网站上传后一定要修改data下在数据库名(改了...

    《CSS全程指南》随书光盘

    5.2.2 “滑动门”标签式导航栏实例 129 5.3 打造个性折叠菜单 132 5.4 创建下拉菜单 137 5.5 CSS图像映射 141 5.6 小结 149 第6章 表格样式设计 150 6.1 变换背景色 151 6.1.1 变换表格背景色 151 6.1.2 变换表格行...

    Visual C++ 编程资源大全(控件 窗体)

    owner_drawn_menu4.zip 自动使用工具条的位图资源制作自绘菜单(109KB)&lt;END&gt;&lt;br&gt;12,contentmenu.zip 一个非常COOL的导航菜单(3KB)&lt;END&gt;&lt;br&gt;13,contentmenu_demo.zip 一个非常COOL的导航菜单演示程序(37KB)...

    fCC-p4-technical_documentation_page:Airbnb CSSStyle指南的技术文档页面

    使用CSS网格更改为垂直导航栏布局 结语专栏 我参加这个项目时认为这很容易。 虽然总体上来说,设计工作和编码较少,但是仍然存在一些棘手的布局和间距问题。 使垂直导航条占据整个左侧并具有适当的间距需要一些思考...

    commit-history:Web应用程序以查看项目的提交历史记录

    它由两条路径组成:主页和提交页面,都可以从导航栏中访问它们。 提交页面是显示提交的地方。 有一个搜索输入,可使用短语或单词通过消息过滤提交。 该项目的样式是使用bootstrap实现的。 指导 如前所述,该项目...

Global site tag (gtag.js) - Google Analytics