zoukankan html css js c++ java

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>

查看全文

相关阅读:
一些坑爹的错误
 鼠标键盘钩子捕获（初版）
【Win10】我们无法更新系统保留的分区
 实验一：c++简单程序设计(1)
《Java 8 in Action》Chapter 1：为什么要关心Java 8
《Java 8 in Action》Chapter 2：通过行为参数化传递代码
 Java集合类综合
 Java内存模型
 你真的会阅读Java的异常信息吗？
Java常用异常整理

原文地址：https://www.cnblogs.com/moon-yyl/p/9777026.html