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

html-css024

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>

1、利用Dreamweaver新建一个html页面。

2、在body里面输入代码

<ul>

<li>你好</li>

<li>小鱼</li>

<li>小小</li>

</ul>。

3、默认的样式是这样的。

4、编辑li标签的css样式。

5、float:left代表的是元素左对齐。这样li标签就可以横排显示了，list-style:none用来去除li标签前面的小圆点。

<dl>标记定义了一个定义列表，定义列表中的条目是通过使用<dt>标记(“definition title”，定义标题)和<dd>标记(“definition description”，定义描述)创建的。<dt>给出了术语名，<dd>标记给出了术语的定义。

也就是说<dt>用来创建列表中的上层项目，<dd>用来创建列表中最下层项目，<dt>和<dd>都必须放在<dl></dl>标志对之间。

<dl>

<dt>我们在做列表标题</dt>

<dd>我们在做列表</dd>

<dd>我们在做列表</dd>

<dd>我们在做列表</dd>

<dd>我们在做列表</dd>

</dl>