首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
纯CSS写的选项卡效果
所属分类：
网页制作
/
CSS
阅读数： 1136
收藏 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>
提示：您可以先修改部分代码再运行
更多精彩内容
其他人还在看
2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼
这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
前端设计师需要了解的9个问题
这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项，非常的实用，是篇非常不错的文章，这里推荐给大家
评论 0
收藏 0
赞 0
分享
CSS强制性换行的方法区别详解
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
评论 0
收藏 0
赞 0
分享
CSS语义化命名方式及常用命名规则
本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处，敬请指出，欢迎你提出更好的建议，加插更多的命名规范。
评论 0
收藏 0
赞 0
分享
ul li内容宽度的问题的解决方案
在IE6下只要我设置LI的宽度为auto，不论LI里面的内容多长，LI的宽度始终是100%，即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们，在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢？像FF那样。
评论 0
收藏 0
赞 0
分享
html5+css3气泡组件的实现
本文是html5+css3系列教程的第一篇，给大家讲述html5+css3实现气泡组件，讲解的十分的详细，这里推荐给大家，希望对大家能有所帮助
评论 0
收藏 0
赞 0
分享
html5+css3之CSS中的布局与Header的实现
本文从CSS3的布局（CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介）Header布局的实现（float实现布局、Header js的实现）向我们展示了HTML5与CSS3的魅力。
评论 0
收藏 0
赞 0
分享
一款恶搞头像特效的制作过程 利用css3和jquery
今天给大家介绍一款恶搞头像特效的制作过程，你可以把任意一张照片放到跳舞的漫画中，为他带上不同的帽子，让他翩翩起舞，下面我们一起来看一下制作过程和效果
评论 0
收藏 0
赞 0
分享
大图片根据分辨率自适应宽度仍居中显示
一个1920*900的大图，在1024*768的分辨率下仍居中显示，如何做到这一点，下面是一个可行的解决方案
评论 0
收藏 0
赞 0
分享
CSS3提交意见输入框样式代码
这个提交意见输入框，结构使用到了table，样式用的css3，包含了多方面的知识，比较适合新手朋友们
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
漂洋过海坑死你 海淘代购名为国际大牌实为国产的山寨货
最强PS网银汇款截图：轻松骗走网店17万奢侈品
怎样利用网络赚钱 网络赚钱有哪些方法
怎么进入微店买东西?微店购物流程图文介绍
Google
手机赚钱软件哪个比较好 手机赚钱软件排行榜及使用方法 手机赚钱最快的软件汇总
站长故事
更多
互联网屌丝合伙创业经验分享
一个年入80W的96年草根站长
曾与前苹果CEO搭档 Zeta公司营收过亿美元背后的经验与教训
站长做好以下三个步骤 长期盈利不是难事
验证码广告：站长增加收入的另一种新渠道
做站7年
