菜单导航/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 @ ...
随机推荐
- jsp中jstl标签的类似 if - else 语句 的语法
在jsp中引入jstl的标签库和函数库 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c&q ...
- 利用SSH传输文件
在linux下一般用scp这个命令来通过ssh传输文件. 1.从服务器上下载文件scp username@servername:/path/filename /var/www/local_dir(本地 ...
- web-app子元素
?表示可选,最多一个:*表示0个或多个. web-app (icon?, display-name?, description?, distributable?, context-param*, fi ...
- HTML5 十大新特性(六)——地理定位
简单地用一句话概括就是,使用js获取浏览器当前所在的地理坐标,实现LBS(Location Based Service,基于定位的服务). 下面写一下它的基本调用: if(navigator.geol ...
- iOS使用Security.framework进行RSA 加密解密签名和验证签名
iOS 上 Security.framework为我们提供了安全方面相关的api: Security框架提供的RSA在iOS上使用的一些小结 支持的RSA keySize 大小有:512,768,10 ...
- java网络编程,简单的客户端和服务器端
1.服务器端 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import ...
- Name jdbc is not bound in this Context
简介 今天接手中行一个交通罚款web工程时,从svn同步下来后,,启动竟然报找不到数据源错误,本来以为很简单解决找了两个小时,现在记录下来. Exception: Name jdbc is not b ...
- gulp入门教程(详细注解)
本文转载自http://www.ydcss.com/archives/18 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很 ...
- LabVIEW之生产者/消费者模式--队列操作 彭会锋
LabVIEW之生产者/消费者模式--队列操作 彭会锋 本文章主要是对学习LabVIEW之生产者/消费者模式的学习笔记,其中涉及到同步控制技术-队列.事件.状态机.生产者-消费者模式,这几种技术在在本 ...
- 获取sql server数据库表结构
if exists (select 1 from sysobjects where name = 'sysproperties'and xtype = 'V')begin DROP VIEW s ...