Sitemap Celebration(使用嵌套列表的树形导航)
2024-05-24 05:01:01
为什么80%的码农都做不了架构师？>>> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sitemap Celebration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="all">
<!--
body {font-size: 83%; line-height: 173%; font-family: Geneva, Arial, Helvetica, Sans-Serif}
h1 {font-size: 140%;}
p {line-height: 165%;}
p span {font-size: 10px; color: #333;}.nav {padding: 0; margin: 50px 0 0 70px;font-family: Arial, Helvetica, Sans-Serif;overflow: visible;}.nav ul { display: block;list-style: none;margin: -11px 0; padding: 0;border: 0;}/* HACK >>> IE 5 Positioning with position relative <ul> Part I */
html + body .nav ul {position: relative; top: -10px;}/* HACK >>> first margin for IE 6, after voice-family the hacks for gecko-based browsers and IE 5 (Win & Mac?) */
.nav ul li {position: relative; top: 0px; left: -11px;margin: 10px 0 5px 0; padding: 0; border: 0;voice-family: "\"}\""; /* Gecko Stuff follows */margin: 10px 0 5px 10px; }/* HACK >>> IE 5 Positioning with position relativ, display: inline fixes an ugly margin-effect in IE 5 */
html + body .nav ul li {display: inline; width: 100%; position: relative; top: 0px; left: -12px; margin: 10px 0 5px 0;}.nav a, .nav a:visited {width: 18.4em; height: 1.5em;display: block; margin: 0 0 0 3px; padding: 1px;font-weight: bold; font-size: 110%; line-height: 1.5em; text-indent: 0.5em; text-align: left; text-decoration: none;voice-family: "\"}\""; /* Gecko Stuff follows */margin: 0 0 0 -10px;}/* HACK >>> IE 5 (avoids an ugly effect with text-indent ) */
html + body .nav a, html + body .nav a:visited { text-indent: 0; padding: 0 0 0 8px; }.nav ul ul { padding: 12px 0 18px 0;background: none;}/* HACK >>> IE 5 Positioning with position relative <ul> Part II */
html + body .nav ul ul {position: relative; top: 0px; }.nav ul li li {position: relative; top: 0px; left: 10px;margin: 10px 0 5px 1px; padding: 0 0 0 25px;voice-family: "\"}\""; /* Gecko Stuff follows */left: 0px;/* margin: 10px 0 5px 1px; padding: 0 0 0 25px; */}/* HACK >>> IE 5 */
html + body .nav ul li li {position: relative; left: 12px; margin: 10px 0 5px 0;}.nav ul li .sub-sub {/* position: relative; top: 0px; */ left: 10px;margin: 10px 0 0 1px; /* padding: 0 0 0 25px; */voice-family: "\"}\"";position: relative; top: 0px; left: 0px;}.nav ul ul a, .nav ul ul a:visited {width: 15.9em; height: 1.3em;margin: 0; /* padding: 1px; */font-size: 110%; line-height: 1.3em; font-weight: normal; text-indent: 0.4em; }.nav ul ul ul {margin: 0 0 30px 12px; padding: 12px 0 0 0;}.nav ul li li li {position: relative; top: 10px; left: 0px;margin: 10px 0 5px 0; padding: 0 0 0 20px; }/* 1 Pixel Difference position relative <ul> for gecko-based Browsers */
html>body .nav ul li li li {top: 10px;}/* HACK >>> IE 5 Positioning with position relative <ul> Part II */
html + body .nav ul li li li {top: 14px;}.nav ul ul ul a, .nav ul ul ul a:visited {width: 14.9em;padding: 1px;font-size: 100%;}/* HACK >>> IE 5 (avoids an ugly effect with text-indent ) */
html + body .nav ul ul a, html + body .nav ul ul a:visited {text-indent: 0; padding: 0 0 0 8px; }/* ### Global Settings >>> colors, borders and images ### */
.nav { border: 0; border-left: 1px solid #2A71E4; }
.nav ul li li {color: #000; background: url("http://www.zabdesign.de/pro/public/sitemap/images/line-01.gif") left center no-repeat;}
.nav ul ul ul {border-left: 1px solid #2A71E4; }
.nav ul li .sub-sub {background: url("http://www.zabdesign.de/pro/public/sitemap/images/line-01.gif") top left no-repeat;}
.nav a, .nav a:visited {color: #4F4F4F; border: 1px solid #2A71E4; background: #FFF; }
.nav a:active, .nav a:hover, .nav a:focus, a:focus .sffocus {color: #000; border: 1px solid #000; background: #FAFAFA;}
.nav ul ul a, .nav ul ul a:visited {color: #4F4F4F; border: 1px solid #9292A1;background: #FFF;}
.nav ul ul a:active, .nav ul ul a:hover, .nav ul ul a:focus {color: #000; border: 1px solid #000; background: #FAFAFA; } -->
</style> </head> <body>
<div id="main-container"> <h1>Sitemap Celebration</h1> <p>Based on <abbr title="Cascading Style Sheets">CSS</abbr>-styled nested lists.<br /> <span>Tested an works fine with: Mozilla 1.4 (win), Firefox 1.0 (win), Netscape 7.1 (win), Opera 7.02 (win), Internet Explorer 5, 5.5, 6 (win), Safari 1.0, 1.2 (mac)</span></p> <div class="nav"> <ul> <li><a href="#now-here">Fruits</a></li> <li><a href="#now-here">Vegetables</a></li> <li><a href="#now-here">Corn</a> <!-- Second Level Start --> <ul> <li><a href="#now-here">Bread</a></li> <li><a href="#now-here">Cake</a></li> <li class="sub-sub"><a href="#now-here">Cookies</a> <!-- Third Level Start --> <ul> <li><a href="#now-here">Cookies With Marmelade</a></li> <li><a href="#now-here">Cookies With Chocolate</a></li> <li><a href="#now-here">Pure Cookies</a></li> </ul> </li> </ul> </li> <li><a href="#now-here">Water</a> <ul> <li><a href="#now-here">Pure Water</a></li> <li><a href="#now-here">Clean Water</a></li> <li><a href="#now-here">Fresh Water</a></li> </ul> </li> <li><a href="#">This is the end!</a></li> </ul> </div> <br/><br/><br/><br/></div>
</body>
</html>转载于:https://my.oschina.net/jsan/blog/13908
Sitemap Celebration(使用嵌套列表的树形导航)相关推荐
- SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据（树形导航）的webpart开发及问题...
转:http://blog.csdn.net/miragesky2049/article/details/7204882 SharePoint2010沙盒解决方案基础开发--关于TreeView树形控 ...
- html语言中项目列表的嵌套,做HTML嵌套列表的正确方法？
选项2是正确的:嵌套的 是 它属于我.如果你验证,选项1在html 5中出现错误-信用:用户3272456 正确: 作为.的孩子 生成HTML嵌套列表的正确方法是使用嵌套的 作为一个孩子 它属于它的. ...
- 在ASP.NET MVC下实现树形导航菜单
在需要处理很多分类以及导航的时候,树形导航菜单就比较适合.例如在汽车之家上: 页面主要分两部分,左边是导航菜单,右边显示对应的内容.现在,我们就在ASP.NET MVC 4 下临摹一个,如下: 实现的 ...
- 自己写一个树形导航菜单
自己写一个树形导航菜单 转载于:https://www.cnblogs.com/jellyfish/p/3995186.html
- python嵌套列表知多少
今天在创建嵌套列表时遇到一个问题,决定看看到底是谁在背后捣鬼 >>> board1 = [[0]*3 for _ in range(3)] [[0, 0, 0], [0, 0, 0] ...
- python压平嵌套列表
list 是 Python 中使用最频繁的数据类型, 标准库里面有丰富的函数可以使用. 不过,如果把多维列表转换成一维列表(不知道这种需求多不多),还真不容易找到好用的函数, 要知道Ruby.Math ...
- python列表的嵌套_Python中关于列表嵌套列表的处理
在处理列表的时候我们经常会遇到列表中嵌套列表的结构,如果我们要把所有元素放入一个新列表,或者要计算所有元素的个数的话应该怎么做呢? 第一个例子 对于上图中的这样一组数据,如果我们要知道这个CSV文件中 ...
- 力扣--扁平化嵌套列表迭代器
扁平化嵌套列表迭代器 文章目录 扁平化嵌套列表迭代器 一.题目描述 二.分析 方法一: 代码一: 方法二: 代码二: C++代码: 一.题目描述 /*** // This is the interfa ...
- leetcode 341. Flatten Nested List Iterator | 341. 扁平化嵌套列表迭代器（Java）
题目 https://leetcode.com/problems/flatten-nested-list-iterator/ 这标题,翻译的是人话吗?啥叫扁平化嵌套列表迭代器?.. 题解 比较像深度优 ...
最新文章
- w ndows10防火墙在哪,Win10防火墙在哪里,怎么关闭Win10防火墙?
- 一些通讯知识、TCP/IP、三次握手四次分手（正确的图，网上很多错了）、HTTP\HTTPS、DNS、UDP
- python去噪算法
- 分布式共识四】POW共识算法
- sqlserver 事务日志已满和'PRIMARY'
- thrift介绍及应用（四）—hadoop的thrift接口
- desktop docker 无法卸载_关于Docker：Docker – 无法移除死容器
- JSK-7 奇怪的国家【入门】
- ListT的RemoveAll方法
- BZOJ3224 Tyvj 1728 普通平衡树
- 史上最全的Maven Pom文件标签详解
- 做项目管理需要哪些技能？
- 分享一些自己在用的maccms10的免费采集接口
- python数学公式编辑工具_GNU TeXmacs
- mybatis中sql写法技巧小总结
- wordpress 企业 主题 html5,Maxx 漂亮简洁的企业 WordPress主题
- 使用tushare获取美股月收盘价
- 使用wireshark抓取聊天信息与爬虫入门
- DataGrip 太好使了
- apache poi-检测到Zip Bomb解决方案