九宫格基本布局

最新推荐文章于 2021-05-06 17:40:16 发布

梦jenny

最新推荐文章于 2021-05-06 17:40:16 发布

阅读量767

点赞数

分类专栏： CSS HTML 布局文章标签： css 布局

CSS 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

布局

13 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

<!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>

梦jenny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
九宫格基本布局

基本的九宫格(http://www.cnblogs.com/binyong) *{margin:0;padding:0;} .box{overflow:hidden;position:relative;width:50%;margin:20px auto;padding:10px;background:#F34703;} .t_l,.t_m
复制链接

扫一扫