图片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助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· [翻译] 为什么 Tracebit 用 C# 开发