当前位置: 代码迷 >> Web前端 >> 一个div的圆角事例
  详细解决方案

一个div的圆角事例

热度:80   发布时间:2012-11-01 11:11:32.0
一个div的圆角例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>


<div id="tx_father" style="width:300px; height:200px; z-index:80;">

<div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>
<div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="background:#E1E7E9; border:1px solid #B0BEC7; border-width:0 1px;">
?<div style="font-size:12px; font-weight:bolder; font-family:Verdana; color:#258; padding:2px 10px 5px;">
? <!--标题,这里想要换背景色,就在这个div的style中增加background-color属性,换了之后需要设定一下宽度,不然很丑 -->
?</div>
?<div style="background:#FFF; margin:0 3px; font-size:11px; font-family:Verdana; color:#333; padding:5px 10px; overflow:hidden;">
? 这是内容区域,背景色为白色,如果想要跟标题那一样,就把background的颜色改为#E1E7E9,也就是跟第2个div的background颜色一样


?</div>
</div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>


</div>


</body>
</html>

  相关解决方案