li+CSS 表格效果 ，高手帮忙

html-css018

li+CSS 表格效果 ，高手帮忙,第1张

<style>

* {margin:0px padding:0px}

li {list-style:none border:1px solid #ccc text-align:center line-height:298px}

.box {width:800px height:400px overflow:hidden border:1px solid #ccc}

.first {width:298px height:298px float:left}

.line {width:500px heigth:300px float:right}

.line .c1 {width:198px height:98px float:left line-height:98px}

.line .c2 {width:298px height:98px float:left line-height:98px}

.last {width:800px height:100px float:left line-height:100px}

</style>

    

</head>

<body>

     <ul class="box">

         <li class="first">1</li>

            <li style="float:right border:none">

                <ul class="line">

                    <li class="c1">1</li><li class="c2">2</li>

                    <li class="c1">3</li><li class="c2">4</li>

                    <li class="c1">5</li><li class="c2">6</li>

                </ul>

            </li>

            <li class="last">2</li>

        </ul>

</body>

div弄个边框

li浮动

a设为块元素并加宽度、行高，文字居中对齐

然后想办法用合适的方式清除下浮动，以免div包不住那些东西

如果上面的你都能自己动手解决了，最下面那个 显示全部 我想你也应该能想出办法来了。

不要看别人现成的代码，步骤就是上面那样，自己动手搞懂一次，比你看几百个别人现成的答案都有效，否则下次你还是不会任何东西。

CSS对元素内的内容做字数限制，可以利用css的overflow: hidden属性解决了这个问题。

例子：li {width:80pxheight:30pxline-height:30pxoverflow:hidden}

说明：设置li的宽度和高度，超出部分就会被隐藏。

overflow:hidden这个属性的作用是隐藏溢出。