很好用的 CSS 目录树
星期三, 06. 10. 2009 – Category: 前端技术
我时常都是做静态页的网站,这是我常用的一个 css 目录树:
先看效果:

OK:怎么做的呢,是这样的。。。。。
首先,HTML:
<div id="sidebar"> <ul> <li> <h2>Low-Limited Texas Holdem</h2> <ul> <li><a href="/advice/">General Advice</a></li> <li><a href="/position/">Position</a></li> <li><a href="/hands/">Reading your hands</a></li> <li><a href="/bluffing/">Bluffing</a></li> </ul> </li> <li> <h2>Texas Holdem Tournament</h2> <ul> <li><a href="/rules-rewards/">Rules and rewards distribution</a></li> <li><a href="/tournaments/">From Nobody to Somebody</a></li> <li><a href="/no-limit-tournament/">No-limit Tournament Advice</a></li> </ul> </li> <li> <h2>Online Texas Holdem Strategy</h2> <ul> <li><a href="/online/">Online vs. Offline</a></li> <li><a href="/tips-strategy/">Tips and Strategy</a></li> </ul> </li> </ul> </div>
然后呢,CSS:
#sidebar {margin:10px 10px 0 0; float:right; width:250px; background:#030303; border:#006600 solid 2px;} #sidebar h2 {padding:0 10px; line-height:30px; background:url(images/h2bg.gif) top center no-repeat; font-size:14px; height:30px; display:block; margin:0;} #sidebar ul {margin:0;list-style:none; padding:0;} #sidebar ul li {margin:0; padding:0 0 10px 0; display:block;} #sidebar ul ul {margin: 0; list-style:none; padding:0;} #sidebar ul ul li {padding:0; height:25px; margin:0; background:url(images/libg.gif) no-repeat;} #sidebar a{text-decoration:none;color:#0f0; display:block; padding:0px 10px 0px 15px; line-height:25px; font-size: 12px; } #sidebar a:hover{text-decoration:none; color:#FFFFFF; background:url(images/libgh.gif) no-repeat; padding-left:25px;}
相关文章
- javascript+css 新闻滑轮显示
- CSS模拟html的’title’和’alt’的提示效果
- 如何修正DIV float之后导致的外部容器不能撑开
- ie6下面层边框断裂
- IE6 PNG图片透明度问题的方法
标签: 目录树
Leave a Reply
关于站长
Google AD
最近文章
- Ubuntu 里 flash 中的汉字显示为框框
- CSS 层最小高度的全兼容写法
- Windows2k3配置PHP服务器环境
- Joomla TinyMCE 中文语言包
- JavaScript Runcode
- Lighttp Rewrite Rule For Wordpress
- IE8 里中英文字体高度不一样
- 南京夫子庙–瞻园一瞥
- 热烈庆祝本站PR荣升至5~~
- 走在乡间的小路上
标签云
ajax
Apache
apt-get
CSS
Debian
dedecms
error
firefox
HeidiSQL
htaccess
html
IE6
javascript
jQuery
lamp
linux
mod_rewrite
mysql
mysql5
MySQL Front
php
phplist
phpmyadmin
postfix
thinkphp
Ubuntu
ubuntu server
wordpress
京腔
代码
十年
年轻的时候很傻很天真
悉尼歌剧院
数据库
新贵妃醉酒
李玉刚
歌词
歌词翻译
盛世霓裳
示例
翻译
芳华绝代
视频
贵妃醉酒
音乐