菜单导航/URHere/面包屑,通过CSS中的content简洁表达代码
比如我们要写一个菜单导航/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简洁表达代码的更多相关文章
- Django - 权限(5)- 非菜单权限对应的一级菜单展开、面包屑导航
一.非菜单权限对应的一级菜单展开 需求:客户列表和账单列表页面中都有添加按钮,当点击添加客户(或编辑客户.删除客户)时,客户列表所属的一级菜单展开,当点击添加账单(或编辑账单.删除账单)时,账单列表所 ...
- Layui导航、面包屑
物不在多,有用则精! 学习使用链接 导航:导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在.面包屑结构简单,支持自定义分隔符.千万不要忘了加载 elem ...
- 理解css中的 content:" " 是什么意思
css中的属性是插入生成的内容,它一般与伪元素:befor和 :after 配合使用. content:"." 就表示在需要的地方插入"." 注意:如果已经规定 ...
- CSS中的content和attr的用法
问题缘起 在闲看别人网站时发现了这样的代码 <span class="hamburger icon" data-icon="C"> .icon:be ...
- MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航
上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇文章我们要开发另一个实用组件:面包屑导航. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱 ...
- JQuery攻略(六)菜单导航
jQuery菜单导航的基础应用 此章节有 1.0 页面导航 1.01面包屑菜单 1.02菜单悬停 1.03菜单快捷键 1.04两个单独的菜单 1.05折叠菜单 1.01面包屑菜单 html <b ...
- 《手把手教你》系列技巧篇(五十二)-java+ selenium自动化测试-处理面包屑(详细教程)
1.简介 面包屑(Breadcrumb),又称面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特",当汉赛尔和格莱特穿过森林时,不小心迷路了 ...
- css中的名词
用到的单词 current 当前 hover 悬停 selected 挑选 disabled 禁用 focus 得到焦点 blur 失去焦点 checked 勾选 success 成功 error 出 ...
- Android Training精要(一)ActionBar上级菜单导航图标
Navigation Up(ActionBar中的上级菜单导航图标) 在android 4.0中,我们需要自己维护activity之间的父子关系. 导航图标ID为android.R.id.home @ ...
随机推荐
- Javascript 数组常用操作方法
一.数组 Array 1.创建数组 /* 构造函数 */ var arr1 = new Array(); //创建一个空数组 var arr1 = new Array(5); //创建指定长度数组(数 ...
- Dom 概览
前言 我们已经接触并使用了很多api去操作html文档,例如:appendChild,getElementById, 等等.但是,每当我在浏览器输入document,window 按下回车,会发现还有 ...
- 从github获取代码
以duilib为例: 1 建立一个文件夹,右键 git bash here. 2 git init 3 git clone https://github.com/duilib/duilib.git
- ORACLE迁移votedisk,spfile以及OCRfile的方法
在安装GUI时,创建了第一块ASM磁盘,命名为DATA1,上面存放了spfile文件,ocrfile文件,并且作为了vote盘.感觉名字和实际不符,容易搞混,所以想删除这个磁盘,直接删除会报错: OR ...
- Windows 7 封装篇(一)【母盘定制】[手动制作]定制合适的系统母盘
Windows 7 封装篇(一)[母盘定制][手动制作]定制合适的系统母盘 http://www.win10u.com/article/html/10.html Windows 7 封装篇(一)[母盘 ...
- npm install报错Error: ENOENT
E:\projects\ueditor\ueditor1_4_3_3-src>npm installError: ENOENT, stat 'C:\Users\Lucas\AppData\Roa ...
- JQuery实现table分页
1.直接贴代码: ; //每页显示的记录条数 ; //显示第curPage页 var len; //总行数 var page; //总页数 $(function(){ len =$(; //去掉表头 ...
- 贪婪 vs 不贪婪
当重复一个正则表达式时,如用 a*,操作结果是尽可能多地匹配模式.当你试着匹配一对对称的定界符,如 HTML 标志中的尖括号时这个事实经常困扰你.匹配单个 HTML 标志的模式不能正常工作,因为 .* ...
- nexus离线安装索引及一些问题
安装私服~~~ 整体流程: 服务器安装私服 配置私服(主要是安装索引) 本地maven配置指向私服 安装私服 win & linux 网上教程很多,不在阐述: 配置私服(及安装index) 1 ...
- 解决Strokeit在win8下的图标问题和开机启动问题
Strokeit目前和Windows 8有一点不兼容,就是运行之后,任务栏会有它的图标,看着很不爽,用兼容模式运行可解决这个问题,但是这样一来就不能开机自动运行了,本文主要解决这个问题. (参考资料 ...