`

用ul li制作表格样式(表格非常实用)

阅读更多

表格大家并不陌生,细线表格更是受到广泛应用。
使用方法


其中每个li只负责右边、下边的线,配以float:left;来完成横向排列,
最外边的div则只定义上边、左边的线,用以显示表格完整线条。
这种做法的好处是更加灵活,你可以由ul中事先定义好的任意两个class来控制线的颜色,
整体语意也更加清晰,可见CSS有多么的灵活 :p

在做程序实现的时候,如同循环<tr>一样,我们可以直接循环<ul>,
要知道,一个清晰的结构,对程序员开发程序的效率有多么大的帮助啊

完整代码:
<!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=utf-8" />
<title>tableFrame_simple</title>
<style type="text/css">
body{
width:auto;
height:auto;
padding:0;
margin:20px 0;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
ul{
clear:both;
padding:0;
margin:0;
list-style:none;
}
#tableFrame{
width:875px; /*需要修改*/
height:auto;
border-top:#000 1px solid;
border-left:#000 1px solid;
padding:0;
margin:0 auto;
font-size:12px;
}
#tableFrame:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
li{
float:left;
display: block;
width:120px; /*需要修改*/
height:auto;
padding:2px;
margin:0;
border-right:#000 1px solid;
border-bottom:#000 1px solid;
line-height:16px;
color:000;
}

/* 表格标题*/
#tableFrameTitle ul{}
#tableFrameTitle ul li{
background:gray;
text-align:center;
color:#fff;
}

/* 表格内容*/
#tableCase ul{}
#tableCase ul li{}

/* 单个表格特定样式*/
.tableCaseThree{color:#329A02;}
.tableCaseFive{color:#f00;}
.tableCaseSeven{color:#f00;}
</style>
</head>

<body>
<div id="tableFrame">
    <div id="tableFrameTitle">
        <ul>
            <li>ID</li>
            <li>当日排名</li>
            <li>排名变化趋势</li>
            <li>一周平均排名</li>
            <li>排名变化趋势</li>
            <li>一月平均排名</li>
            <li>排名变化趋势</li>
        </ul>
    </div>
    <div id="tableCase">
    <!--此处开始循环 -->
        <ul>
            <li class="tableCaseOne">0001</li>
            <li class="tableCaseTwo">1234</li>
            <li class="tableCaseThree">↑ 200</li>
            <li class="tableCaseFour">1856</li>
            <li class="tableCaseFive">↓ 56</li>
            <li class="tableCaseSix">1650</li>
            <li class="tableCaseSeven">↓ 156</li>
        </ul>
    <!--到此循环结束 -->
    <ul>
            <li class="tableCaseOne">0002</li>
            <li class="tableCaseTwo">1234</li>
            <li class="tableCaseThree">↑ 200</li>
            <li class="tableCaseFour">1856</li>
            <li class="tableCaseFive">↓ 56</li>
            <li class="tableCaseSix">1650</li>
            <li class="tableCaseSeven">↓ 156</li>
        </ul>
        <ul>
            <li class="tableCaseOne">0003</li>
            <li class="tableCaseTwo">1234</li>
            <li class="tableCaseThree">↑ 200</li>
            <li class="tableCaseFour">1856</li>
            <li class="tableCaseFive">↓ 56</li>
            <li class="tableCaseSix">1650</li>
            <li class="tableCaseSeven">↓ 156</li>
        </ul>
        <ul>
            <li class="tableCaseOne">0004</li>
            <li class="tableCaseTwo">1234</li>
            <li class="tableCaseThree">↑ 200</li>
            <li class="tableCaseFour">1856</li>
            <li class="tableCaseFive">↓ 56</li>
            <li class="tableCaseSix">1650</li>
            <li class="tableCaseSeven">↓ 156</li>
        </ul>
        <ul>
            <li class="tableCaseOne">0005</li>
            <li class="tableCaseTwo">1234</li>
            <li class="tableCaseThree">↑ 200</li>
            <li class="tableCaseFour">1856</li>
            <li class="tableCaseFive">↓ 56</li>
            <li class="tableCaseSix">1650</li>
            <li class="tableCaseSeven">↓ 156</li>
        </ul>
    </div>
</div>
</body>
</html>

 

分享到:
评论

相关推荐

    ul li实现表格样式

    使用ul li 标签实现的表格样式,可代替table标签,避免搜索引擎收录不了表格中的关键字

    ul的li样式

    本篇文章将深入探讨如何利用CSS来调整`&lt;ul&gt;`和`&lt;li&gt;`的样式,以及它们在选项卡式设计中的应用。 首先,`&lt;ul&gt;`元素用来创建一个无序的项目列表,每个列表项则由`&lt;li&gt;`元素定义。默认情况下,浏览器会为`&lt;ul&gt;`添加一...

    DIV CSS布局教程:应用ul、li实现表格形式

    标题中的“DIV CSS布局教程:应用ul、li实现表格形式”指的是使用HTML的无序列表(`&lt;ul&gt;`)和列表项(`&lt;li&gt;`)元素,通过CSS样式来模拟传统HTML表格(`&lt;table&gt;`)的效果。这种方法常用于创建灵活、响应式的布局,...

    ul打造表格样式

    这就是"ul打造表格样式"这个主题所探讨的内容。通过使用无序列表`&lt;ul&gt;`和列表项`&lt;li&gt;`来模拟表格,我们可以实现更为自由的CSS样式定制,同时保持内容的语义清晰。 首先,我们需要理解`&lt;ul&gt;`和`&lt;li&gt;`元素的基本用法...

    css创意ul+li实现的细线表格实现代码

    通过使用ul和li标签,以及CSS样式,我们可以实现一个细线表格的效果,而不需要使用传统的table标签。这种方法非常有创意,可以应用于各种网页设计中。 优点 这种方法有很多优点。首先,它可以减少代码的数量,...

    ul li内容宽度的问题的解决方案

    在网页布局中,`&lt;ul&gt;` 和 `&lt;li&gt;` 元素常常被用来创建列表,而内容宽度的问题在不同浏览器间存在兼容性差异,尤其是IE6。这个问题主要涉及到`&lt;li&gt;`元素的宽度自适应和跨浏览器兼容性。 在IE6中,如果设置`&lt;li&gt;`的...

    CSS 用ul li做圆角表格

    ### CSS 使用 ul li 实现圆角表格的知识点详解 #### 一、引言 在网页设计与开发领域,实现美观且实用的表格是一项常见的需求。本文档将详细讲解如何使用HTML中的`&lt;ul&gt;`和`&lt;li&gt;`元素来构建一个具有圆角效果的表格,...

    利用UL、Li+CSS属性制作无表格实用菜单导航效果

    总结来说,利用UL、Li和CSS属性制作无表格实用菜单导航的关键在于HTML结构的合理构建以及CSS样式的精妙设置。通过消除默认的项目符号,添加自定义的边框和背景样式,以及通过伪类控制状态变化,可以创建出既实用又...

    超简单!使用CSS制作圆角表格 3步搞定

    在网页设计中,使用CSS(层叠样式表)来创建美观、功能丰富的界面是至关重要的。其中,制作圆角表格是一项常见的需求,尤其在追求现代感与用户友好体验的设计中。本文将详细介绍如何通过简单的三步骤,利用CSS来实现...

    ul和li 基本用法分析

    在网页布局和设计中,`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)元素是非常常用且基础的HTML结构。它们通常用于创建导航菜单、展示列表数据、构建简单的表格等场景。以下是对`&lt;ul&gt;`和`&lt;li&gt;`基本用法的详细分析: 1. **...

    解决文本编辑器展示样式不一致

    用在线编辑器或许都会存在一个问题,即内容发表后呈现的样式会与编辑时的不一样,原因是编辑器其实是个内嵌的iframe,它里面用的大多是浏览器默认的样式(ckeditor 在其中另外定义了字体以及ul, ol 的缩进值),而...

    css用ul取代table

    随着CSS技术的发展,设计师们开始倾向于使用无序列表(`&lt;ul&gt;`)结合CSS来替代表格,实现更灵活、可定制化的布局。这种做法有以下几个主要优点: 1. **响应式设计**:`&lt;table&gt;`元素在不同屏幕尺寸下调整布局较为困难...

    Dreamweaver CSS网页布局ul和li范例

    在本篇文章中,我们将深入探讨如何利用Dreamweaver中的CSS功能,结合`&lt;ul&gt;`和`&lt;li&gt;`标签来创建无表格布局。这种布局方式不仅有助于提升网页的可读性和美观度,还能提高搜索引擎优化(SEO)的效果。 首先,`&lt;ul&gt;`...

    实现表格动态滚动效果

    本教程将详细介绍如何使用CSS和JavaScript来实现一个类似表格的动态滚动效果,通过`ul`和`li`标签来模拟表格结构。 ### CSS基础布局 首先,我们需要创建一个容器来包裹我们的“表格”。这可以通过`&lt;div&gt;`标签实现...

    一款三级弹出CSS导航菜单

    - **基础样式**:设置`&lt;ul&gt;`和`&lt;li&gt;`的基本样式,包括清除默认的列表样式、设置浮动等。 - **鼠标悬停效果**:使用`:hover`伪类为一级菜单项添加鼠标悬停效果,包括颜色变化、显示二级菜单等。 - **二级菜单样式*...

    html js的一些实用技巧

    10. **表格样式**: `表格样式.html`则可能涵盖了如何使用CSS为HTML表格添加样式,如单元格边框、颜色、对齐方式以及响应式设计。 掌握这些技巧将有助于提升你在HTML和JavaScript开发中的能力,使得网页制作更加...

    用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器

    首先,让我们来看一下如何用`&lt;div&gt;`和`&lt;ul&gt;`构建一个基本的表格结构。`&lt;div&gt;`是一个通用的容器元素,可以用来包裹一组相关的HTML元素;`&lt;ul&gt;`则用于创建无序列表,这里的每个`&lt;li&gt;`元素相当于表格中的一个单元格。 ...

Global site tag (gtag.js) - Google Analytics