基本的九宫格Css布局,用于圆角

转载 2015年11月19日 11:46:29

基本的九宫格Css布局,用于圆角。优点:通用。

<!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>基本的九宫格(http://www.cnblogs.com/binyong)</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{overflow:hidden;position:relative;width:50%;margin:50px auto;padding:10px;background:#F34703;}
.t_l,.t_m,.t_r{position:absolute;top:0;z-index:2;height:10px;font-size:0%;}
.t_l{left:0;width:10px;background:blue;}
.t_m{z-index:1;width:100%;background:orange;}
.t_r{right:0;width:10px;background:blue;}
.m_l,.m_r{position:absolute;z-index:2;width:10px;}
.m_l{top:0px;left:0;z-index:1;background:orange;height:2000px;}
.m_r{top:0px;right:0;z-index:1;background:orange;height:2000px;}
.b_l,.b_m,.b_r{position:absolute;bottom:0;z-index:2;height:10px;font-size:0%;}
.b_l{left:0;width:10px;background:blue;}
.b_m{z-index:1;width:100%;background:orange;}
.b_r{right:0;width:10px;background:blue;}
.m_m{width:100%;font-size:12px;color:#fff;}
h3{text-align:center;font-size:14px;line-height:26px;}
.m_m p{line-height:22px;padding:0 20px;}
</style>
</head>
<body>
<div class="box">
<div class="t_l"></div>
<div class="t_m"></div>
<div class="t_r"></div>
<div class="m_l"></div>
<div class="m_m">
<h3>九宫格--基本模型</h3>
<p>这是一个九宫格基本布局模型,未加载任何图片,请随意拉伸缩放窗体大小,看看九宫格向各个方向自由伸展。</p>
<p>本模型测试在以下几个浏览器中完全通过:</p>
<p>IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。</p>
<p style="text-align:right">更多原创请访问:<a href="http://www.cnblogs.com/binyong" title="去网站看看">冰极峰</a></p>
</div>
<div class="m_r"></div>
<div class="b_l"></div>
<div class="b_m"></div>
<div class="b_r"></div>
</div>
</body>
</html>

div+css实现九宫格效果

div+css实现九宫格效果 有3种方法: 1、方法一:把九宫图切割成9张图,用9个div合在一起,改变宽高,实现。优点:兼容性100%支持,缺点div太多,使用不方便。 2、方法二:把九...
  • linguifa
  • linguifa
  • 2015年02月11日 11:07
  • 11443

html5九宫格布局

html5响应式九宫格
  • u012260672
  • u012260672
  • 2016年03月18日 13:15
  • 2953

css实现九宫格布局以及边框效果

*{ margin: 0; padding: 0; } div{ margin-top: 10px; /* 外边框 */ border: 1px solid #ebebeb; width:...
  • qq_33248419
  • qq_33248419
  • 2017年08月14日 11:15
  • 732

IT修真院 CSS1 九宫格

IT修真院 CSS1 九宫格   文件名:F:\IT_School\CSS_1   1.在div中插入图片为什么会有空隙?     把div的border打开,你发现图片底部...
  • wulinbanxia
  • wulinbanxia
  • 2016年11月19日 23:43
  • 939

css特例 九宫格 圆角实例

  • 2010年06月11日 11:05
  • 9KB
  • 下载

响应式九宫格图片(长宽自适应)

HTML 挑选电子书制作工具 军训 立即添加 ...
  • Vivianluolita
  • Vivianluolita
  • 2016年10月21日 13:48
  • 2975

基本的九宫格Css布局,用于圆角

基本的九宫格Css布局,用于圆角。优点:通用。 基本的九宫格(http://www.cnblogs.com/binyong) *{margin:0;padding:0;} ...
  • 99guo
  • 99guo
  • 2015年11月19日 11:46
  • 2101

CSS 9宫格边框

  制作8个图片,分别对应左上,上,右上,左,右,左下,下和右下。html xmlns="http://www.w3.org/1999/xhtml">head>    title>CSStitle> ...
  • sapphiron
  • sapphiron
  • 2008年02月05日 11:13
  • 2184

css3技巧实现九宫格布局

九宫格布局                                                                                       /*:af...
  • tooyangtoosimple_
  • tooyangtoosimple_
  • 2016年12月10日 17:50
  • 2513

css之九宫格布局

/*CSS源代码*/ .wrap { padding: 10px 0 0 10px; width: 300px; overflow: hidden; }.wrap .item { po...
  • u012260672
  • u012260672
  • 2016年03月18日 13:20
  • 746
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基本的九宫格Css布局,用于圆角
举报原因:
原因补充:

(最多只允许输入30个字)