<style type="text/css">
<!--
#content p {
text-indent: 2em;
}
#content h2
{
font-weight: bold;
}
.catWrapper
{
border: none;
width: 400px;
background-color: #336699;
position: relative;
}
.catWrapper .catWrapper_Header
{
height: auto;
color: White;
font-weight: bold;
padding: 3px 10px;
}
.catWrapper .catWrapper_Content
{
height: auto;
background-color: White;
border: solid 1px gray;
}
.catWrapper .catWrapper_Bottom
{
height: 5px;
}
.catWrapper .catWrapper_TL
{
background: url('http://www.myfootprints.cn/images/lt.gif') no-repeat left top;
left: 0;
top: 0;
width: 5px;
height: 5px;
position: absolute;
}
.catWrapper .catWrapper_TR
{
background: url('http://www.myfootprints.cn/images/rt.gif') no-repeat right top;
right: 0;
top: 0;
width: 5px;
height: 5px;
position: absolute;
}
.catWrapper .catWrapper_BL
{
background: url('http://www.myfootprints.cn/images/lb.gif') no-repeat left bottom;
left: 0;
bottom: 0;
width: 5px;
height: 5px;
position: absolute;
}
.catWrapper .catWrapper_BR
{
background: url('http://www.myfootprints.cn/images/rb.gif') no-repeat right bottom;
right: 0;
bottom: 0;
width: 5px;
height: 5px;
position: absolute;
}
-->
</style>
从网站 http://dpwn.jobpartner.com/?404=Y 的布局上看到了这种框模型,觉得不错,于是自己弄了个,分享一下,也备自己随时调来重用哈哈。
CSS 源代码:
#content p { text-indent: 2em; }#content h2 { font-weight: bold; } .catWrapper { border: none; width: 400px; background-color: #336699; position: relative; } .catWrapper .catWrapper_Header { height: auto; color: White; font-weight: bold; padding: 3px 10px; } .catWrapper .catWrapper_Content { height: auto; background-color: White; border: solid 1px gray; } .catWrapper .catWrapper_Bottom { height: 5px; } .catWrapper .catWrapper_TL { background: url('http://www.myfootprints.cn/images/lt.gif') no-repeat left top; left: 0; top: 0; width: 5px; height: 5px; position: absolute; } .catWrapper .catWrapper_TR { background: url('http://www.myfootprints.cn/images/rt.gif') no-repeat right top; right: 0; top: 0; width: 5px; height: 5px; position: absolute; } .catWrapper .catWrapper_BL { background: url('http://www.myfootprints.cn/images/lb.gif') no-repeat left bottom; left: 0; bottom: 0; width: 5px; height: 5px; position: absolute; } .catWrapper .catWrapper_BR { background: url('http://www.myfootprints.cn/images/rb.gif') no-repeat right bottom; right: 0; bottom: 0; width: 5px; height: 5px; position: absolute; }