比如我们要写一个菜单导航/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. 《C++ Primer》学习笔记【第一部分 C++基础】

    第2章  整型的赋值:当我们试着把一个超出其范围的值赋给一个指定类型的对象时,结果如何?答案取决于类型是signed还是unsigned的.对于unsigned,编译器会将该值对unsigned类型的 ...

  2. virsh创建和恢复快照

    virsh创建快照: virsh snapshot-create-as image的名称 snapshot的名称 例如: virsh snapshot-create-as 172.16.1.1_cen ...

  3. ORACLE误删除ASM磁盘修复

    在数据库运维中,总会遇到一些粗心大意的DBA,一不小心删除一些东西,这里举例讲解在误删除ASM磁盘之后,如果用KFED工具进行恢复: [grid@RAC1 ~]$ sqlplus / as sysas ...

  4. Loading加载小插件,用户可以选择html格式或canvas格式,自定义loading图片,canvas色彩搭配可根据个人喜好

    ;(function($) { $.Loading = function(options) { //暴漏插件默认值 $.Loading.defaults = { speed: 200, //弹出层淡出 ...

  5. zookeeper 安装 测试及集群

    centos 安装 zookeeper-3.5.2-alpha.tar.gz 网上搜索了 一下 安装教程 其实很简单 主要总结一下 中间遇到的坑 1.zookeeper 3.4.6 启动失败. 很有可 ...

  6. ime-mode

    2016-08-18 ime-mode 用户输入法控制,主要是防止用户输入文本符号等(比如电话号码输入时) (设定值) auto・・・和没设定一样 active・・・激活本地输入法(如中文),用户可以 ...

  7. 正则表达式入门(六)匹配unicode和其他字符

    匹配unicode字符有时候我们需要匹配ASCII范围之外的字符. "Qu'est-ce que la tolérance? c'est l'apanage de l'humanité. N ...

  8. Leetcode--Merge Two Sorted Lists

    static ListNode *mergeTwoLists(ListNode *l1, ListNode *l2) { ListNode *temp = ); ListNode *head = te ...

  9. RapidJson读取json文档

    Json格式定义如下 Object: { _Name:_Data,... } 最后一项后面没有逗号 Array: [_Data,_Data,...] 最后一项后面没有逗号 _Name: String ...

  10. 并列统计CASE WHEN

    select sum(case when depart = 'Physical' then 1 else 0 end) PhyTotal, sum(case when depart = 'Chemis ...