比如我们要写一个菜单导航/URHere/面包屑,如:

  首页 > 个人中心 > 修改密码

代码:

<ul>
<li><a href="javascript:void(0);">首页</a></li>
<li><span>></span></li>
<li><a href="javascript:void(0);">个人中心</a></li>
<li><span>></span></li>
<li><a href="javascript:void(0);">修改密码</a></li>
</ul>

现在,通过CSS中的content,可以如下写法:

<style>
ul>li+li:before {content:">"; color:gray; padding: 0 5px;}
</style> <ul>
<li><a href="javascript:void(0);">首页</a></li>
<li><a href="javascript:void(0);">个人中心</a></li>
<li><a href="javascript:void(0);">修改密码</a></li>
</ul>

菜单导航/URHere/面包屑,通过CSS中的content简洁表达代码的更多相关文章

  1. Django - 权限(5)- 非菜单权限对应的一级菜单展开、面包屑导航

    一.非菜单权限对应的一级菜单展开 需求:客户列表和账单列表页面中都有添加按钮,当点击添加客户(或编辑客户.删除客户)时,客户列表所属的一级菜单展开,当点击添加账单(或编辑账单.删除账单)时,账单列表所 ...

  2. Layui导航、面包屑

    物不在多,有用则精! 学习使用链接 导航:导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在.面包屑结构简单,支持自定义分隔符.千万不要忘了加载 elem ...

  3. 理解css中的 content:" " 是什么意思

    css中的属性是插入生成的内容,它一般与伪元素:befor和 :after 配合使用. content:"." 就表示在需要的地方插入"." 注意:如果已经规定 ...

  4. CSS中的content和attr的用法

    问题缘起 在闲看别人网站时发现了这样的代码 <span class="hamburger icon" data-icon="C"> .icon:be ...

  5. MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航

    上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇文章我们要开发另一个实用组件:面包屑导航. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱 ...

  6. JQuery攻略(六)菜单导航

    jQuery菜单导航的基础应用 此章节有 1.0 页面导航 1.01面包屑菜单 1.02菜单悬停 1.03菜单快捷键 1.04两个单独的菜单 1.05折叠菜单 1.01面包屑菜单 html <b ...

  7. 《手把手教你》系列技巧篇(五十二)-java+ selenium自动化测试-处理面包屑(详细教程)

    1.简介 面包屑(Breadcrumb),又称面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特",当汉赛尔和格莱特穿过森林时,不小心迷路了 ...

  8. css中的名词

    用到的单词 current 当前 hover 悬停 selected 挑选 disabled 禁用 focus 得到焦点 blur 失去焦点 checked 勾选 success 成功 error 出 ...

  9. Android Training精要(一)ActionBar上级菜单导航图标

    Navigation Up(ActionBar中的上级菜单导航图标) 在android 4.0中,我们需要自己维护activity之间的父子关系. 导航图标ID为android.R.id.home @ ...

随机推荐

  1. CSS 文字两端对齐

    <!DOCTYPE HTML> <html> <head> <title></title> <meta http-equiv=&quo ...

  2. go并发和并行

    Go语言的并发和并行 不知道你有没有注意到一个现象,还是这段代码,如果我跑在两个goroutines里面的话: var quit chan int = make(chan int) func loop ...

  3. 使用layer.open时content属性传值记录

    最近在做一个后台项目,正好碰上了要使用layer.open,就顺手记录一下,方便以后遇到了有个参考 - 2016/11/7 layer 这个是一个web弹层组件,挺好用的...然后项目框架是SSM.. ...

  4. C# 实现 Excel文件的数据导入

    前台 <asp:FileUpload ID="fuFile" runat="server" /> 后台 public string GetExcel ...

  5. medoo–高效的轻量级PHP数据库操作类

    网址:http://medoo.lvtao.net/ /*medoo.php*/ class medoo { protected $database_type = ‘mysql’; protected ...

  6. 有用的css片段

    1.背景渐变动画 CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色.透明度.元素大小添加动画.目前,你不能为渐变添加动画,但下面的代码可能有帮助.它通过改变背景位置,让它看起来有动 ...

  7. sqlite字段属性删除方法

    Sqlite 不支持直接修改字段的名称. 我们可以使用别的方法来实现修改字段名. 1.修改原表的名称 ALTER TABLE table RENAME TO tableOld; 2.新建修改字段后的表 ...

  8. XSS 初识

    xss(跨站脚本攻击)xss是指攻击者在网页中嵌入客户端脚本,通常是javascript编写的恶意代码,当用户使用浏览器浏览被嵌入恶意代码的网页时,恶意代码将在用户的浏览器上被解析执行.重点是“脚本” ...

  9. js创建标签的方法--依赖于jquery

    /** * 创建标签,传入一个对象,返回一个完整的标签 * @param {Object.attribute} tag 标签 * @param {Object.attribute} attribute ...

  10. PL/SQL导出到execl中,数据前面的0发生丢失的解决办法

    ERR出现的场景再现: 使用 PL/SQL导出按钮,选择‘CSV文件’,保存为1.csv,后用execl打开,复制到VuGen中作为login脚本的参数化文件username. ERR及发现过程: 在 ...