这是一个CSS Teaser Box 的范例。因为宽度已经固定,所以我使用了两个背景图象(tsr-b.gif 和 tsr-t.gif)来创建圆角、顶部边框和底部边框。CSS被用于左侧边框以及右侧边框。Box可以垂直扩展,填入更多的文本内容,任何尺寸皆可。通过查看源码,你可以观察XHTML和CSS。你如果想看看相关博客,获悉更进一步的注释和讨论,请参考:CSS Teaser Box 和CSS teaser box回顾 。
Code:
<style type="text/css" media="screen,print">
html,
body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
body {
padding:20px;
font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}
#labfooter {
text-align:center;
clear:both;
}
.adwrap {
margin:30px auto 10px;
padding:10px 0;
width:468px;
border:1px solid #ccc;
border-width:1px 0;
}
.adwrap object {
width:468px;
height:60px;
}
.teaser {
width:430px;
padding:0 0 14px 0;
margin:10px auto;
background:url("tsr-b.gif") bottom left no-repeat;
}
.teaser h3 {
margin:0;
padding:7px 10px 3px 10px;
background:url("tsr-t.gif") top left no-repeat;
}
.teaser p, .teaser a.more {
margin:0;
padding:0 10px 3px;
border:1px solid #d8d8d8;
border-width:0 1px;
}
.teaser a.more {
display:block;
text-align:right;
background:url("tsr-a.gif") 410px 50% no-repeat;
padding:0 24px 0 0;
text-decoration:none;
color:#44a;
}
.teaser a.more:hover {
text-decoration:underline;
}
</style>