<!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>
<style type=text/css>
#div1 {
width: 904px;
}
#left {
float: left;
width: 300px;
height: 50px;
list-style-type: none;
border-left:1px solid;
border-top: 1px solid;
border-right:1px solid;
text-align: center;
line-height: 50px;
}
#middle,#right {
float: left;
width: 300px;
height: 50px;
border-top: 1px solid;
border-right: 1px solid;
text-align: center;
line-height: 50px;
}
#bottom {
float: left;
width: 902px;
height: 30px;
border-left: 1px solid;
border-top: 1px solid;
border-right: 1px solid;
border-bottom:1px solid;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<div id="left">列1</div>
<div id="middle">列2</div>
<div id="right">列3</div>
<div id="left">列1内容</div>
<div id="middle">列2内容</div>
<div id="right">列3内容</div>
<div id="bottom"></div>
</div>
</body>
</html>
分享到:
相关推荐
DIV+CSS表格(用DIV+CSS做的表格像素表格) 内容不多但是绝对实用,其实在做数据显示时还是推荐用表格,因为不是所有的地方数据显示有用DIV+CSS,在数据显示时表格还是有很大的优势。不过这个还是要看个人爱好!
综上所述,这个压缩包提供的是一套基于Web标准的、使用<div>和CSS进行布局和样式的网页设计模板集合,涵盖了基本页面、博客、表格、笔记和表单等多种场景。通过学习和应用这些实例,开发者可以提升其在网页布局和...
在网页设计领域,布局方式的发展经历了从表格(Table)到层(Div)+CSS的转变。"Table转div+css工具"就是专为此目的而设计的一款实用软件,它能够帮助开发者将原有的基于表格的HTML代码转换成使用Div和CSS进行布局的...
同时,DIV+CSS网页制作技术还可以减少页面代码,提高spider爬行效率,减少表格嵌套问题,提高加载速度,提高用户体验度等。 一、 DIV+CSS布局网站的好处 DIV+CSS网页制作技术的优势在于其能够将表现与内容分离,...
3. **应用CSS样式**:接着,软件会给这些`div`添加适当的样式,如宽度、高度、边距等,以重现原有的表格布局。 4. **处理定位**:对于需要绝对或相对定位的部分,软件会应用相应的`position`属性,确保元素位置正确...
### 使用div+CSS实现类似Excel的表格功能 在网页设计中,使用`div+CSS`来构建表格是一种灵活且响应式的设计方式。这种方式不仅能够帮助我们创建出与传统`<table>`标签相似的布局效果,还能更好地控制表格的样式、...
本压缩包“DIV+CSS表格代码.rar”显然包含了使用这两种技术实现的表格样例代码。 `DIV`元素是网页布局中的核心构建块,它允许我们将页面内容划分为多个独立的区域或部分。通过设置`DIV`的类(class)或ID属性,我们...
在这个案例中,开发者完全依赖于DIV元素和CSS样式来构建页面结构和视觉样式,没有使用表格(Table)等传统布局方式,从而实现了更加灵活、响应式的网页设计。 在描述中提到的"JS客户端验证"是指利用JavaScript进行...
【标题】:“一个(DIV+CSS)网站” 【描述】:“帮一个公司做的一个静态网站,完全采用DIV+css布局” 这个项目是一个基于HTML和CSS技术构建的静态网站,主要利用了DIV+CSS的设计模式来实现页面的结构与样式分离。...
div+css布局的优点在于,它有利于搜索引擎优化,便于修改,可减少页面加载时间,代码简洁,解决了表格嵌套的问题,并对搜索排名有积极影响。同时,文档还详细讨论了div+css布局的各种方式,以及理论上的理解,如CSS...
12天学会DIV+CSS从理论到实践的教程,强烈推介。 第一天:选择什么样的DOCTYPE 第二天:什么是名字空间 第三天:定义语言编码 第四天:调用样式表 第五天:HEAD区的其他设置 第六天:XHTML代码规范 第七天:CSS入门 ...
DIV+CSS 基础知识点 在本节课中,我们将学习 XHTML 和 CSS 的基础...传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用 CSS 排版后,就是通过由 CSS 定义的大小不一的盒子和盒子嵌套来编排网页。
《最新版十天学会div+css》是一套旨在帮助初学者快速掌握网页布局与样式设计的教程资源。这个压缩包包含两部分主要内容:一本名为"十天学会DIV+CSS(WEB标准).chm"的电子书,以及一个名为"jiaocheng"的文件夹,后者很...
1. **代码简洁**:相比传统的表格布局,div+css的代码更加简洁,易于维护。 2. **良好的可扩展性**:通过CSS可以轻松改变网页的外观,而无需修改HTML结构,极大地提高了网页的可扩展性和维护性。 3. **优秀的跨...
【精美网站模板,div+css模板,html模板,管理员网站模板01】 这个标题提到的“精美网站模板”指的是高质量的网页设计模版,通常包括一套完整的页面布局、颜色方案、字体样式等,用于快速构建专业且吸引人的网站。...
div+css模拟表格对角线功能,div+css模拟表格对角线功能
**文件名“DIV表格+JS选项卡”** 这个文件名可能包含了一个使用`<div>`元素和JavaScript实现的选项卡示例,其中“表格”可能是指使用表格布局或者与表格数据相关的选项卡内容。JavaScript通常用于处理用户的交互...
在进入div+css的培训课堂之前,了解一些基础知识和预备知识是至关重要的。"div+css"是网页设计中常用的技术组合,用于实现页面布局和样式控制。在本篇文章中,我们将深入探讨这个主题,帮助你做好充分的热身准备。 ...
【整套完整版纯DIV+CSS网站模版】是一套基于HTML5和CSS3构建的网页设计资源,它强调了使用纯CSS布局而非传统的表格布局,以实现更灵活、响应式的设计。这套模板包含了多种页面元素和交互效果,旨在提供一个全面的...