用CSS制作选项卡

来源：互联网发布：最新网络数字用语1 编辑：程序博客网时间：2024/06/08 04:41

自己一直想在网站中加入一个选项卡式的版式结构.但找找网上的一些,大多都需JavaScript等小程序控制.

自己想,如果能用CSS写出一个,方便好用.而且编写简单易懂.适合我们这些新手.

代码如下(小女子是新手,还有很多不足,如有欠妥,请大家多多指教,谢谢):

<head>

<!--

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>

<title>无标题文档</title>

</head>

<body>

<ul>

<li>

1111111111111111111111111111

11111111111111111111111111111

</div>

</a>

</li>

<li>

22222222222222222222222222

2222222222222222222222222222

</div>

</a>

</li>

<li>

33333333333333333333333

333333333333333333333333333333

</div>

</a>

</li>

</ul>

</body>