This is an example teaser box. Since its width is fixed, I can get away with using just two background images (tsr-b.gif and tsr-t.gif) to create the rounded corners and the top and bottom borders. CSS is used for the left and right borders. This box will expand vertically to contain any amount of text, of almost any size. View source to see the XHTML and CSS. You may also want to read the related blog posts for further notes and discussion: CSS Teaser Box and CSS teaser box revisited.
Review: http://www.456bereastreet.com/lab/teaser/
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>
译文:
CSS不可或缺的使用技巧--CSS Teaser Box
这是一个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>