css 实现九宫格

1.自己写了一个，写完对比了下别人写的发现自己写的太low.故就不写自己太差劲的了。

别人写的我总结优化了一下，如果不用写内容去掉position,content简单也是可以的。

<!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=gb2312" />
<title>无标题文档</title>
<style>
    .box-wrap {
        text-align: center;
        background-color: #d4d4f5;
        border:1px solid #FF0000;
        overflow: hidden; /*为了清除浮动*/
    } 
    .box-wrap>div {
        width: 31.33%;
        padding-bottom: 31.33%;/*是父级元素的宽度的百分比*/
        margin:1%;
        border-radius: 10%;
        float: left;
        background-color: orange;
        position:relative;
    }
    .content {
        position:absolute;
        width:100%;
        height:100%;
        border-radius: 10%;
    }
</style>
</head>

<body>
    <div class="box-wrap">
        <div class="box">
            <div class="content">格子1</div>
        </div> 
        <div class="box">
            <div class="content">格子2</div>
        </div> 
        <div class="box">
            <div class="content">格子3</div>
        </div> 
        <div class="box"></div> 
        <div class="box"></div> 
        <div class="box"></div> 
        <div class="box"></div> 
        <div class="box"></div> 
        <div class="box"></div>
    </div>
</body>
</html>

2.也可以使用伪元素

<!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=gb2312" />
<title>无标题文档</title>
<style>
    .box-wrap {
        text-align: center;
        background-color: #d4d4f5;
        border:1px solid #FF0000;
        overflow: hidden; /*为了清除浮动*/
    } 
    .box-wrap>div {
        width: 31.33%;
        padding-bottom: 31.33%;/*是父级元素的宽度的百分比*/
        margin:1%;
        border-radius: 10%;
        float: left;
        background-color: orange;
        position:relative;
    }
    .box:after {
        position:absolute;
        content:"格子";
        display:block;
        width:100%;
        height:100%;
        border-radius: 10%;
    }
</style>
</head>

<body>
    <div class="box-wrap">
        <div class="box"></div> 
        <div class="box"></div> 
        <div class="box"></div> 
        <div class="box"></div> 
        <div class="box"></div> 
        <div class="box"></div> 
        <div class="box"></div> 
        <div class="box"></div> 
        <div class="box"></div>
    </div>
</body>
</html>

 

posted on 2018-10-12 11:14  朝颜陌  阅读(398)  评论(0)  编辑  收藏  举报

导航