九宫格布局

最新推荐文章于 2021-12-30 17:03:09 发布

梦jenny

最新推荐文章于 2021-12-30 17:03:09 发布

阅读量348

点赞数

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

本文链接：https://blog.csdn.net/lulalahappy123/article/details/44923807

版权

CSS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

布局

13 篇文章 0 订阅

订阅专栏

实现九宫格，且无外边框；我认为这样做最好

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        * { padding:0; margin:0;}
        ul{
            width: 153px;height: 153px; background: #99FF99;margin: 10px  20px;
        }
        ul li{
            list-style:none; width:50px; height:50px; float:left; border-right:1px solid #000; border-bottom:1px solid #000;
        }
       .a3 ,.a6 ,.a9{
            border-right:none;
        }
        .a7 ,.a8,.a9{
            border-bottom: none;;
        }
    </style>
</head>
<body>
<ul>
    <li class="a1"></li>
    <li class="a2"></li>
    <li class="a3"></li>
    <li class="a4"></li>
    <li class="a5"></li>
    <li class="a6"></li>
    <li class="a7"></li>
    <li class="a8"></li>
    <li class="a9"></li>
</ul>
</body>
</html>

另一种，可以用ul挡上

<html>
<head>
    <title></title>
    <style type="text/css">
        * { padding:0; margin:0;border:0;list-style:none;}
        #wai{background: #000000;width: 150px;margin: 10px 10px;height: 150px;position: absolute}
/*        ul { border:none; width:170px;height :150px;position: absolute;margin:0 0 0 -1px }*//*用负margin挡上*/
        ul { border:none; width:170px;height :150px; }
       /* ul li {width:50px; height:50px;float:left;border:none;line-height:50px;margin:0 0 1px 1px;background:red;}*/
        ul li {width:50px; height:50px;float:left;border:none;line-height:50px;margin:0 1px 1px 0;background:red;}
        /*如果定义li右边和下边的margin，直接让ul将右边挡上，下面不够高度，即可实现背景色，此方法有点问题*/
    </style>
</head>
<body>
<div id="wai">
<ul>
    <li class="fl">a</li>
    <li class="fm">a</li>
    <li class="fr">a</li>
    <li class="sl">a</li>
    <li class="sm">a</li>
    <li class="sr">a</li>
    <li class="tl">a</li>
    <li class="tm">a</li>
    <li class="tr">a</li>
</ul>
</div>
</body>
</html>