在网上找了好久都没有找到一个完整利用CSS+DIV代替传统table的代码，索性，自己亲自动手最终实现了利用CSS+DIV替代Table的代码，下面就是完整的代码，显示效果很不错！你可以直接运行就可以看到！
<!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=gb2312" />
<title>无标题文档</title>
<style>
#header{
float:left;
line-height:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFCC33;
margin-left:10%;
width:80%;
height:30px;
background:url('../../My Documents/My Pictures/table.gif') repeat;
}
#header #headerul{
margin-top:1px;
margin-bottom:1px;
margin-left:0px;
list-style:none;
}
#header #headerul li{
border: 1px solid #ffffff;
padding: 5px 15px 5px 10px;
display: block;
float:left;
}
#header #headerul #forum{
text-align:center;
width:150px;
}
#header #headerul #amount{
text-align:center;
width:100px;
}
#tr #trul #amount{
text-align:center;
width:100px;
}
#tr{
float:left;
line-height:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#3399FF;
margin-left:10%;
width:80%;
height:30px;
background:#CCCCCC;
}
#tr #trul{
margin-top:1px;
margin-bottom:1px;
margin-left:0px;
list-style:none;
}
#tr #trul li{
border: 1px solid #ffffff;
padding: 5px 15px 5px 10px;
display: block;
float:left;
}
#tr #trul #forum{
text-align:center;
width:150px;
}
</style>
</head>
<body>
<div id="table">
<div id="header">
<ul id="headerul">
<li id="forum">论坛</li>
<li id="amount">文章数量</li>
<li id="amount">访问人数</li>
</ul>
</div>
<div id="tr">
<ul id="trul">
<li id="forum">英语学习</li>
<li id="amount">3423</li>
<li id="amount">12654</li>
</ul>
</div>
<div id="tr">
<ul id="trul">
<li id="forum">英语学习</li>
<li id="amount">3423</li>
<li id="amount">12654</li>
</ul>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
在这个案例中，开发者完全依赖于DIV元素和CSS样式来构建页面结构和视觉样式，没有使用表格（Table）等传统布局方式，从而实现了更加灵活、响应式的网页设计。 在描述中提到的"JS客户端验证"是指利用JavaScript进行...
这些属性应由CSS替代。例如，表格的样式可以通过设置`table`、`td`等元素的CSS属性来完成，而不是直接在HTML中指定。这样可以使HTML代码更加简洁，更符合语义，同时也方便后期的维护和调整。 在布局过程中，利用...
“DIV+CSS”之所以流行，主要是因为在Web2.0时代之前，开发者习惯于使用Table进行页面布局。随着对网页灵活性和语义化要求的提升，DIV作为一种更灵活的布局工具，开始受到青睐。然而，简单地将所有布局任务归结于DIV...
这些属性应该由CSS替代，以保持HTML的简洁和语义化。例如，如果要缩进一段文字，应该使用`<p>`标签，并通过CSS的`margin`属性来实现，而不是使用`<blockquote>`标签。 总结起来，学习DIV+CSS布局的关键在于理解内容...
CSS还扩展了背景颜色的应用范围，不仅限于body和table，所有元素均可设置背景色，如`background-color: #FFF;`。同时，边框（border）的控制也更加灵活，可单独定义各边的颜色、尺寸和样式。 对于表格，CSS允许设定...
### div+css布局详解 #### 一、理解CSS与页面表现原理 在深入探讨div+css布局之前，首先需要理解CSS处理页面的基本原理。很多时候，新手可能会遇到的问题并不是技术层面的，而是对于如何构建页面的理解不够深刻。...
本书用作者学习的经历向你讲述了基本css语法,通过实例让读者了解如何来用DIV+CSS来替代传统的table布局 你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有...
Div+CSS是一种网页布局技术，它是HTML页面设计中用来替代传统Table布局的新方法。Div（Division）是HTML中的一个容器元素，用于组织和分隔页面内容，而CSS（Cascading Style Sheets）则负责定义这些Div元素的样式，...
例如，原本的<table width="80%" cellpadding="3" border="2" align="left">可以简化为<table>，然后在CSS中定义相应的宽度、内边距、边框和对齐方式。 总结来说，Div+CSS布局的核心在于理解HTML的语义结构和CSS的...
8. **渐变和透明度**：IE6-8不支持CSS渐变和透明度，可以使用图片或滤镜（如`filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#color', endColorstr='#color')`）作为替代。 9. `display`属性...
### 随手记的div+css的小抄代码解析 #### 一、基本样式设置 在随手记的div+css小抄代码中，首先对页面的基本样式进行了设置，包括清除默认边距、列表样式以及图片边框等。这部分内容非常重要，能够确保网页布局的...
网页设计布局是构建网站视觉效果的关键步骤，而“用DIV+CSS做网站设计布局”已经成为现代网页设计的标准实践。DIV（Division）作为一个HTML元素，主要用于组织网页内容，而CSS（Cascading Style Sheets）则负责控制...
9. **CSS与Div结合**：`<div>`配合CSS可以实现更精细的网页布局控制。CSS（Cascading Style Sheets）允许我们将样式分离出来，通过class或id选择器将样式应用到HTML元素上，实现内容与表现的分离。 10. **响应式...
3. **图像元素**：`<img>`标签插入图片，需指定`src`属性为图片源地址，并可设置`alt`属性提供替代文字。 4. **列表元素**：`<ul>`和`<ol>`创建无序和有序列表，`<li>`定义列表项。 5. **表格元素**：`<table>`、`...
在网页设计领域，`DIV+CSS`是一种广泛采用的布局技术，它允许开发者将内容与样式分离，提高页面的可维护性和性能。然而，在实际应用中，由于不同浏览器的解析和渲染机制存在差异，尤其是在IE（Internet Explorer）和...
### Div+CSS控制布局整理大全 #### 一、制作网页整体布局思想的转变 ##### 1.1 思想的转换 在传统的网页设计中，设计师通常会首先关注页面的视觉效果，包括图像、字体、颜色等元素的设计，并且经常采用如Photo...
随着WEB标准的推广，人们开始使用DIV标签替代TABLE标签进行布局，从而衍生出DIV+CSS的说法。但是，这种说法存在一个误区，因为XHTML中不仅仅有DIV标签，还有其他多种标签，如span、p、a、ul、li、dl、dt、dd等，这些...
### 零基础HTML+CSS+DIV笔记分享 #### HTML基础知识与规范 1. **标签名和属性名必须小写**：为了保持代码的一致性和兼容性，HTML5规范建议所有的标签名和属性名都使用小写字母。这样做有助于提高代码的可读性和...
2. 使用`<font>`标签的`size`属性设置字体大小，其值范围是1到7，但最佳实践是使用CSS样式替代。 3. 使用内联CSS样式通过`style`属性设置字体大小，例如`style="font-size:150px"`来调整字体大小。 ### 超链接...