九宫格基本布局
来源:互联网 发布:centos启动图形界面 编辑:程序博客网 时间:2024/05/18 09:17
<!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:20px 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> </div> <div class="m_r"></div> <div class="b_l"></div> <div class="b_m"></div> <div class="b_r"></div></div></body></html>
外层 主要是居中,overflow:hidden;padding文字距离为top高度 和bottom高度
上层三个 中层外两个 下层三个 都是absolute
四角块在上层,长条块往下一层。
目的是让四块遮住四条;横条都是width:100%
试验::::
<!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:20px auto;padding:10px;background:greenyellow ;} .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:rgba(0,0,0,0.1)} .t_m{z-index:1;width:90%;background:orange;}/*这个他没占领t_l 的位置 但是占了 t_r的位置*/ .t_r{right:0;width:10px;background:rgba(0,0,0,0.1)} .m_l,.m_r{position:absolute;z-index:2;width:10px;} .m_l{top:10px;left:0;z-index:1;background:orange;height:20px;}/*从t_l位置顶部开*/ .m_r{top:0px;right:0;z-index:1;background:orange;height:20px;}/*从t_r顶部开始*/ .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:rgba(0,0,0,0.1);} .b_m{z-index:1;width:100%;background:orange;}/*没占b_l位置 占了b_r位置*/ .b_r{right:0;width:10px;background:rgba(0,0,0,0.1);} .m_m{width:100%;font-size:12px;color:#fff;background: red}/*1000%把右边后面的box都挡上了,100%就正好*/ 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> </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布局,用于圆角
- 九宫格布局
- 九宫格布局
- 九宫格布局练习
- 九宫格布局
- 九宫格布局
- iOS九宫格布局
- 九宫格布局
- 九宫格布局
- ios-九宫格布局
- 九宫格布局实现
- html5九宫格布局
- 九宫格布局
- 九宫格均匀布局
- GridView布局九宫格
- 九宫格布局
- Fragment详解之三——管理Fragment(1)
- nodejs npm install 全局安装 非全局安装
- 简述REDO简单操作
- socket编程
- P51.17(输出2-n之间所有的素数。)
- 九宫格基本布局
- LeetCode算法题之int to Roman
- Android开发学习2-Handler
- 快速排序算法的C++实现
- c++面向对象程序设计第二章
- 我的java学习笔记(22)关于在框架中显式信息
- 第十五题
- 在安卓默认布局(RelativeLayout)中已经添加好好按钮,需要滚动条时如何添加?
- Java习惯用法总结