预览加载中，请您耐心等待几秒...

css实现的tab切换效果实例.docx

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

css实现的tab切换效果实例css实现的tab切换效果实例导语：只用css你能实现tabt的切换效果吗？下面的是百分网小编为大家搜集的一些关于css实现的tab切换效果实例，希望对你有所帮助。代码如下:body,p,ul,li{margin:0;padding:0;font-size:12px;}.clearFloat{clear:both;height:0;line-height:0;font-size:0;}.tab_ul{margin:10pxauto0;padding-left:20px;width:228px;height:31px;background-color:#FCEDFF;border:1pxsolid#DBA4E8;border-bottom:0;}.tab_ulli{float:left;display:inline;margin:5px005px;width:46px;height:26px;}.tab_ullia{display:block;width:46px;height:26px;line-height:26px;text-align:center;font-size:12px;color:#000000;text-decoration:none;}.tab_ullia:hover{color:#5F0082;font-weight:bold;}.tabp{margin:0auto;width:248px;height:200px;border:1pxsolid#DBA4E8;border-top:0;overflow:hidden;}.tabpul{margin:0auto;padding-top:10px;width:218px;height:190px;}.tabpulli{height:24px;color:#666666;font-size:12px;margin-left:20px;}.tabpullia{color:#333333;margin-left:5px;}代码如下:</pre>html代码<prename="code"class="css"><body><!--tab--><ulclass="tab_ul"><li><ahref="#ul1">目录1</a></li><li><ahref="#ul2">目录2</a></li><li><ahref="#ul3">目录3</a></li><li><ahref="#ul4">目录4</a></li></ul><pclass="tabp"><ulid="ul1"><li><ahref="#">java</a></li><li><ahref="#">c++</a></li><li><ahref="#">c#</a></li><li><ahref="#">php</a></li><li><ahref="#">javascript</a></li><li><ahref="#">css</a></li><li><ahref="#">html</a></li></ul><ulid="ul2"><li><ahref="#">语文</a></li><li><ahref="#">数学</a></li><li><ahref="#">英语</a></li><li>