自己一直想在网站中加入一个选项卡式的版式结构.但找找网上的一些,大多都需JavaScript等小程序控制.
自己想,如果能用CSS写出一个,方便好用.而且编写简单易懂.适合我们这些新手.
代码如下(小女子是新手,还有很多不足,如有欠妥,请大家多多指教,谢谢):
<head><style type="text/css"><!--
ul
{...}
{
display:inline; width:500px; height:700px; overflow:hidden;
}
ul li
{...}
{ display:inline; width:50px; background-color: #CCCCCC; border-right:1px solid #666666; padding-right:8px; padding-left:8px; float:left; }
ul li span
{...}
{ font-size:14px; margin:0px; color:#739c23; }
ul li a
{...}
{ text-decoration:none; display:block; }
.xx
{...}
{ display:none; color: #999999; font-size:12px; padding-top:5px; }
ul li a:hover
{...}
{ background-color: #CCCCCC; }
ul li a:hover .xx
{...}
{ display:block; }
--></style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><ul> <li> <a href="#"><span> 音乐 </span> <div class="xx"> <img src="file:///F|/Dreamweaver/作品/301blog/image/biggrin.gif" /> 1111111111111111111111111111 11111111111111111111111111111 </div> </a> </li> <li> <a href="#"><span> 电影 </span> <div class="xx"> <img src="file:///F|/Dreamweaver/作品/301blog/image/cry.gif"/>222222222222222222222222222222222222222222222222222222</div> </a> </li> <li> <a href="#"><span> 电视 </span> <div class="xx"> <img src="file:///F|/Dreamweaver/作品/301blog/image/mad.gif" /> 33333333333333333333333333333333333333333333333333333</div> </a> </li></ul></body>
扫一扫
1404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
