九宫格布局

来源：互联网发布：云计算入门书籍编辑：程序博客网时间：2024/05/16 05:34

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

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

0 0