图片div+CSS实现圆角技术
CSS Code
Code
body {font: 10px;
}
.gboxtop { clear: both; height: 8px; background: #dedede url(../Image/gboxtop.gif) no-repeat; color: #000; }
.gbox { background: #dedede url(../Image/gbox.gif) no-repeat bottom left; color: #444; padding: 1px 13px 7px 13px; margin: 0 0 20px 0; }
.gbox p { padding: 7px 0; margin: 0;}
.left { float: left; width: 650px; margin: 0 0 10px 0; }
/* bottom thirds */
.thirds { float: left; width: 203px; background: #eee; margin: 0 12px 0 0; color: #5d5d5d; }
.smallboxtop
{
background-image:url(../Image/smallboxtop.gif);}
.smallbox { background: #fff url(../Image/smallbox.gif) no-repeat bottom left; color: #444; padding: 1px 10px 10px 10px; }
.smallbox p { padding: 0; margin: 0; font-size:15px; }
.right {
float: right;
width: 300px;
margin: 10px 0 10px 0;
}
/* right side */
.boxtop { height: 19px; background: #fff url(../Image/boxtop.gif) no-repeat; color: #000; }
.box { background: #fff url(../Image/box.gif) no-repeat bottom left; color: #5b5b5b; padding: 0 10px 15px 10px; margin: 0 0 10px 0; }
.box p { padding: 0; margin: 0;}
.image { float: left; margin: 0 9px 3px 0; }
.buttons { text-align: right; padding: 4px 3px 0 0;}
.bluebtn { background: #fff url(../Image/bluebtn.gif) no-repeat; width: 100px; padding: 1px 16px 5px 16px; color: #fff; text-decoration: none; }
.greenbtn { background: #fff url(../Image/greenbtn.gif) no-repeat; padding: 1px 17px 5px 16px; color: #fff; text-decoration: none; }
.bluebtn:hover, .greenbtn:hover { background: #fff url(../Image/hoverbtn.gif) no-repeat; color: #fff; }
html代码
Code
<div>
<div class="gboxtop">
<img src="Image/gboxtop.gif" /></div>
<div class="gbox">
<p>
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi
enim ad minim veniam, quis nostrud
</p>
</div>
<div class="thirds">
<div class="smallboxtop">
<img src="Image/smallboxtop.gif" /></div>
<div class="smallbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div class="thirds">
<div class="smallboxtop">
<img src="Image/smallboxtop.gif" /></div>
<div class="smallbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div class="thirds">
<div class="smallboxtop">
<img src="Image/smallboxtop.gif" /></div>
<div class="smallbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div class="thirds">
<div class="smallboxtop">
<img src="Image/smallboxtop.gif" /></div>
<div class="smallbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<!-- 右侧栏目-->
<div class="right">
<div class="boxtop">
<img src="Image/boxtop.gif" /></div>
<div class="box">
<p>
<img class="image" src="Image/image.gif" />
<b>Lorem ipsum dolor sit amet</b>
<br />
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis.
<br />
</p>
<div class="buttons" />
<p>
<a class="bluebtn" href="#">Read </a><a class="greenbtn" href="#">Mark </a>
</p>
</div>
</div>
<div class="right">
<div class="boxtop">
<img src="Image/boxtop.gif" /></div>
<div class="box">
<p>
<img class="image" src="Image/image.gif" />
<b>Lorem ipsum dolor sit amet</b>
<br />
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis.
<br />
</p>
<div class="buttons" />
<p>
<a class="bluebtn" href="#">Read </a><a class="greenbtn" href="#">Mark </a>
</p>
</div>
</div>
</div>
作者:酷客多小程序
出处: http://www.cnblogs.com/ywqu
如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章,
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步