CSS文章列表切换选项卡效果实例

时间2024-05-23 20:22:03发布访客分类CSS浏览82

导读：这是一款很不错的文章列表效果，类似选项卡一样的功能，这一个有点特别，就是把鼠标点击的菜单放到了右边，有一个小箭头指示当前怎位置，使文章结构更加清淅，确实很不错。复制代码代码如下: CSS文章列表切换 dl {position...

这是一款很不错的文章列表效果，类似选项卡一样的功能，这一个有点特别，就是把鼠标点击的菜单放到了右边，有一个小箭头指示当前怎位置，使文章结构更加清淅，确实很不错。

复制代码代码如下:

CSS文章列表切换

dl { position:absolute; width:370px; height:170px; border:10px solid #eee; }
dd { margin:0; width:370px; height:170px; overflow:hidden; }
dt { position:absolute; right:1px; }
ul { margin:0; padding:0; width:390px; height:170px; list-style:none; background:url("http://files.jb51.net/file_images/article/201505/2015513171216300.gif") no-repeat 75% 20px; border:1px solid #ccc}
#b { background-position:75% center}
#c { background-position:75% 86%}
li { width:335px; 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}

源码
书籍
软件