一个好看的HTML圆角模板

HTML代码: 

<div class="yblan"><!--圆角模板开始-->
	<div class="ybtop"><h3 style="font-size:13px"><font color=#666666>标题部分</font></h3></div>
	<div class="ybmid" style="background:#FFFFFF"><!--内容写在这个里面-->

	</div><!--内容部分结束-->
	<div class="ybbot"><div></div></div>
</div><!--圆角模板结束-->

圆角的css模板:

/*圆角的CSS模板*/
* { margin: 0; padding: 0; font-family: "宋体", Verdana, Geneva, sans-serif, "宋体"; }
* html * { font-family: "宋体"; }
.ybtop { background-image: url(../images/bg.rbar.png); background-repeat: no-repeat; }
.ybtop h1, .ybtop h2, .ybtop h3, .ybtop h4, .ybtop h5, .ybtop h6 { background-image: url(../images/bg.rbar.png); background-repeat: no-repeat; text-indent: 1em; }
.ybmid { padding: 5px; border-right-style: solid; border-left-style: solid; border-width: 1px; overflow: hidden; zoom: 1; background:#FAFAFA}
.ybbot, .ybbot div { background-image: url(../images/bg.rbar.png); background-repeat: no-repeat; overflow: hidden; }
.yblan .ybtop { background-position: left 0px; }
.yblan .ybtop h1, .yblan .ybtop h2, .yblan .ybtop h3, .yblan .ybtop h4, .yblan .ybtop h5, .yblan .ybtop h6 { background-position: right 0px; line-height: 28px;}
.yblan .ybmid { border-color: #A9BCCD; }
.yblan .ybbot { background-position: left -28px; }
.yblan .ybbot div { background-position: right -28px; height: 3px; }
.ybcheng .ybtop { background-position: left -31px; }
.ybcheng .ybtop h1, .ybcheng .ybtop h2, .ybcheng .ybtop h3, .ybcheng .ybtop h4, .ybcheng .ybtop h5, .ybcheng .ybtop h6 { background-position: right -31px; line-height: 28px; }
.ybcheng .ybbot div { background-position: right -59px; height: 2px; }
.yblanb .ybtop { background-position: left -61px; }
.yblanb .ybtop h1, .yblanb .ybtop h2, .yblanb .ybtop h3, .yblanb .ybtop h4, .yblanb .ybtop h5, .yblanb .ybtop h6 { background-position: right -61px; line-height: 30px; }
.yblanb .ybmid { border-color: #A5BFD6; border-width: 2px; }
.yblanb .ybbot { background-position: left -91px; }
.yblanb .ybbot div { background-position: right -91px; height: 4px; }
/*模板结束*/

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值