今天看雅虎的文章时,发现右边图文混排的CSS写的有一个小技巧!在此收录一下!
效果图:
html:
<div class="box">
<div class="head"><h3>热门点播</h3></div>
<div class="body">
<ul class="list">
<li>
<a class="img" href="#"><img src="<img src="http://cn.yimg.com/cuo/6.jpg" width="114" height="84" alt="" /></a>
<p></p>
<h4><a href="#">不是我老婆的过错</a></h4>
看着曾经跟别人跑的妻子如今瘫痪在床,他不怪妻子,只能怪自己太穷…
<a href="#">[详细]</a>
<p></p>
</li>
<li>
<a class="img" href="#"><img src="<img src="http://cn.yimg.com/cuo/6.jpg" width="114" height="84" alt="" /></a>
<h4><a href="#">不是我老婆的过错</a></h4>
看着曾经跟别人跑的妻子如今瘫痪在床,他不怪妻子,只能怪自己太穷…
<a href="#">[详细]</a>
</li>
</ul>
</div>
</div>
CSS:
<style type="text/css">
*{
margin:0;
padding:0;
font-size:12px;
}
.box{
width:300px;
border:solid 1px #c6d8e0;
}
.box .head{
background: url(http://cn.yimg.com/news/2011/08/24/p_w_picpaths/cbox_head.png);
height: 33px;
}
.box .head h3{
padding-left:5px;
font-size:14px;
line-height:33px;
}
.box .body{
padding:4px 10px;
}
.box .body .list{
overflow:hidden;
}
.box .body .list li{
list-style:none;
border-top: dashed 1px #CCC;
margin-top: -1px;
padding: 10px 0 10px 0;
line-height: 20px;
}
.box .body .list .img{
float: left;
display: block;
text-align: center;
}
.box .body .list h4{
padding-bottom:8px;
}
.box .body .list a img{
display:block;
border:1px solid #CCC;
padding:2px;
margin-right:10px;
}
</style>
看到上图肯定想到的是用ul排,然后给li 一个border 形成虚线!然后给最前面一个特定class ,然后定义boder:none(若设置的 li boder-top:xxxxx),反之给最后 li 特定class。而在雅虎的页面上却没有那种class。然后就用firebug找,果然不负有心人啊!让我找到了!他是这样处理的
首先ul标签一个overflow:hidden;li 的boder-top:1px dashed #CCC; margin-top:-1px;重点就在margin-top上。-1 使得li的内容超出了ul规定的范围正好overflow:hidden,超出范围隐藏!看出去好像就没有了!代码在附件里!睡觉喽!
转载于:https://blog.51cto.com/osweb/734386