纯css实现的tab切换效果(使用锚点作为标记)纯CSS实现网页内部锚点跳转时上下偏移的示例代码CSS解决链接锚点定位偏移的代码css锚点定位被顶部固定导航栏遮住的解决方案

body,div,ul,li{margin:0; padding:0; font-size:12px;}
.clearFloat{ clear:both; height:0; line-height:0; font-size:0;}
.tab_ul{ margin:10px auto 0; padding-left:20px; width:228px; height:31px; background-color:#FCEDFF;border:1px solid #DBA4E8; border-bottom:0;}
.tab_ul li{ float:left; display:inline; margin:5px 0 0 5px; width:46px; height:26px;}
.tab_ul li a{ display:block;width:46px; height:26px; line-height:26px; text-align:center;font-size:12px; color:#000000; text-decoration:none;}
.tab_ul li a:hover{color:#5F0082; font-weight:bold;}
.tabDiv{ margin:0 auto; width:248px; height:200px; border:1px solid #DBA4E8; border-top:0; overflow:hidden;}
.tabDiv ul{ margin:0 auto; padding-top:10px; width:218px; height:190px;}
.tabDiv ul li{ height:24px;color:#666666; font-size:12px; margin-left:20px; }
.tabDiv ul li a{ color:#333333; margin-left:5px;}

html代码

目录1

目录2

目录3

目录4




java

c++

c#

php

javascript

css

html



语文

数学

英语

历史

地理

生物

化学



红色

黄色

橙色

绿色

紫色

蓝色

黑色



运营

设计

产品

程序

美工

交互

经理