首页-代码 2014-02-08 10:47:03 -0500

★CSS实现的重叠线效果(可作友链/网站导航带简介)★


请勿抄袭本页面

代码说明

CSS实现重叠线效果,新版腾讯页面有这种样式,分享一下。可以用来充当友链或者网站导航,后面是简短的介绍。转自网页代码站,@笑忘书 稍作修改

html代码


代码演示



[代码仅供参考,转载请注明出处]

----Comments(3)----
陈连生 (@cls) | @ at 2014-04-22 17:36:
<style type="text/css">
.website{
text-align:left;
padding-left:3px;
}
.website>li{
list-style:inside decimal;border-bottom:2px dotted black;font-size:17px;color:grey;white-space:nowrap;margin-top:10px;margin-bottom:10px;
}
.website>li>a{
color:brown;font-size:20px;border-bottom:2px solid black;line-height:26px;display:inline-block;*display:inline;*zoom:1;
/*兼容inline-block----这里可以以用浮动代替*/
/*inline-block遇到text-indent会有兼容问题,原因是 ie6/7 其实还是inline*/
margin-bottom:-2px;margin-right:0.2em;
}
</style>
<ul class="website">
<li><a href="http://wodemo.com">我的磨</a>自由绿色简洁的移动网站</li>
<li><a href="http://35230.wodemo.com">笑忘书网盘</a>精品网页代码收藏馆</li>
<li><a href="http://m.baozoumanhua.com/">暴走漫画</a>分享原创搞笑漫画网</li>
</ul>
翱翔的雄鹰 (@axdxy) | @ at 2014-02-08 21:29:
不错
大闹天宫 at 2014-02-08 11:06:
每天来这里看贴已成了一种习惯。。不错
Comment:
Name:


Subscribe | Register | Login | N