基本的九宫格Css布局，用于圆角
来源：互联网 发布：电脑硬盘检测软件 编辑：程序博客网 时间：2024/06/02 02:24
基本的九宫格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>
0 0
- 基本的九宫格Css布局，用于圆角
- 网页布局的九宫格基本布局
- 九宫格基本布局
- css之九宫格布局
- 九宫格布局的思路
- 简单的九宫格布局
- pureLayout的九宫格布局
- css实现九宫格布局以及边框效果
- android中九宫格布局的实现
- 对于android九宫格布局的实现
- 关于九宫格的适配布局
- 实现Android九宫格布局的代码
- 九宫格主页布局的实现
- 九宫格布局
- 九宫格布局
- 九宫格布局练习
- 九宫格布局
- 九宫格布局
- ListView中getChildAt(index)的使用注意事项
- javascript中的后退和刷新
- CSS实现图片垂直居中
- 深入理解java语言的class文件格式(五)
- 0x00 C编程风格
- 基本的九宫格Css布局，用于圆角
- IOS上 关于状态栏的相关设置(UIStatusBar)
- composer.json手记
- gb2312-unicode(ucs2)
- SAP HANA 高可用性 (High Availability) 解决方案 - Host Auto-Failover, 节点失效自动切换
- Myeclipse SVN1.8
- strcpy_s、sptintf_s与strcat_s的使用
- 关于时间的初级使用说明
- Java编程中“为了性能”尽量要做到的一些地方
