纯CSS写的选项卡效果

所属分类：网页制作 / CSS 阅读数： 1172

收藏 0赞 0分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"><meta http-equiv="content-language" content="zh-cn" /><meta http-equiv="content-type" content="text/html;charset=gb2312" /><style>dl {position:absolute;width:240px;height:170px;border:10px solid #eee;}dd {margin:0;width:240px;height:170px;overflow:hidden;}dt {position:absolute;right:1px;}ul {margin:0;padding:0;width:260px;height:170px;list-style:none;background:url("//img.jbzj.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px;border:1px solid #ccc}/*#b {background-position:75% center}#c {background-position:75% 86%}*/li {width:205px;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}</style><head/><body><dl><dt><a href="#a" title="">新闻</a><a href="#b" title="">娱乐</a><a href="#c" title="">体育</a></dt><dd><ul id="a"><li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li><li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li><li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li><li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li><li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li><li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li></ul><ul id="b"><li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li><li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li><li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li><li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li><li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li><li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li></ul><ul id="c"><li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li><li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li><li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li><li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li><li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li><li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li></ul></dd></dl></body></html>

提示：您可以先修改部分代码再运行

更多精彩内容其他人还在看

纯CSS写的选项卡效果

CSS3实现背景透明文字不透明的示例代码

浅谈CSS中的尺寸单位

CSS中有些属性的前面会加上“*”或“_”所代表的意思

CSS 设置滚动条样式的实例代码

纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

纯css实现多级折叠菜单折叠树效果

CSS Grid 网格布局全解析

css flex 弹性布局详解

CSS3 二级导航菜单的制作的示例

使用css禁用input、checkbox、select等html控件实现disable效果

网络赚钱

站长故事