纯css实现选项卡效果

日期:2009-08-15作者:woniu

字体大小: 小中大

今天在蓝色论坛看到了一篇纯css的图片展示效果的帖子，备受打击，之前也有听说用css实现选项卡的功能，但是自己在做的时候还是固执的用js。无意中看到这个帖子居然是两年前的....转载过来，告诫自己：不能闭门造车！多看看外面的世界发生了什么。

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

开始觉得用css实现有点不可思议，但是看了代码有点傻眼...锚链接原来可以这么用。
另外一个：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style>
dl {
	position:absolute;
	width:240px;
	height:170px;
	border:10px solid #eee;
	}
dd {
	margin:0;
	width:240px;
	height:170px;
	overflow:hidden;
	}
dt {
	position:absolute;
	right:1px;
	}
ul {
	margin:0;
	padding:0;
	width:260px;
	height:170px;
	list-style:none;
	background:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px;
	border:1px solid #ccc
	}
#b {
	background-position:75% center
	}
#c {
	background-position:75% 86%
	}
li {
	width:205px;
	height:27px;
	font:12px/27px "宋体",sans-serif;
	white-space:nowrap;
	overflow:hidden;
	}
dt a {
	display:block;
	margin:1px;
	width:30px;
	height:56px;
	text-align:center;
	font:700 12px/55px "宋体",sans-serif;
	color:#fff;
	text-decoration:none;
	background:#666;
	}
dt a:hover {
	background:orange
	}
</style>
<dl>
<dt><a href="#a" title="">新闻</a><a href="#b" title="">娱乐</a><a href="#c" title="">体育</a></dt>
<dd>
<ul id="a">
	<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
	<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
	<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
	<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
	<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
	<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
</ul>
<ul id="b">
	<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
	<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
	<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
	<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
	<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
	<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
</ul>
<ul id="c">
	<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
	<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
	<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
	<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
	<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
	<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
</ul>
</dd>
</dl>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

原帖地址：http://bbs.blueidea.com/thread-2728504-1-1.html

[本日志由 woniu 于 2009-08-15 11:59 AM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: css图片展示 css选项卡纯css

相关日志:

评论: 1 | 引用: 0 | 查看次数: -

keelii[2009-08-16 05:39 PM |

]

这个我以前也有研究过，很有用的.

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.