很好用的 CSS 目录树

星期三, 06. 10. 2009  –  Category: 前端技术

我时常都是做静态页的网站,这是我常用的一个 css 目录树:
先看效果:
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;}

相关文章

  1. javascript+css 新闻滑轮显示
  2. CSS模拟html的’title’和’alt’的提示效果
  3. 如何修正DIV float之后导致的外部容器不能撑开
  4. ie6下面层边框断裂
  5. IE6 PNG图片透明度问题的方法

标签:

Leave a Reply

*
请输入图片中的字符以验证你并非垃圾机器人. 点击图片收听验证码的语音版.
点击这里收听此验证码的语音版本


关于站长

姚迎迎,生于 1985年3月2日, 江苏大丰人士 。修行于福州大学软件学院

Google AD

最近文章

标签云

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 京腔 代码 十年 年轻的时候很傻很天真 悉尼歌剧院 数据库 新贵妃醉酒 李玉刚 歌词 歌词翻译 盛世霓裳 示例 翻译 芳华绝代 视频 贵妃醉酒 音乐

Google 广告