把表格改成div+css

xxxxbangbangtangxxxx 2012-05-13 05:30:34
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left_bg"> </td>
<td width="776" valign="top">
<table width="776" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="22" background="images/top_01.gif"><table width="97%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="font_top_welcome">
<tr>
<td><strong>无名小说网欢迎您，您可以选择[<a href="#"><font color="#D66C23">登录</font></a>]或者[<a href="#"><font color="#D66C23">注册新用户</font></a>]！</strong></td>
</tr>
</table></td>

<td width="32%"><table width="80%" border="0" align="center" cellpadding="0" cellspacing="0" class="font_top_function">
<tr class="yellow a">
<td align="center"><a onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.jieqi.com')"a href="#">设为首页</a></td>
<td align="center"><a href="javascript:window.external.addFavorite('http://www.jieqi.com','杰奇网络')">加入收藏</a></td>
<td align="center"><a href="mailto:">联系方式</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="240" height="130" rowspan="3" background="images/top_logo_bg.gif"><img src="images/logo.gif" width="71" height="73"></td>
<td rowspan="3"><img src="images/top_03.gif" width="14" height="130"></td>
<td><img src="images/top_04.gif" width="468" height="18"></td>
<td rowspan="3"><img src="images/top_05.gif" width="54" height="130"></td>
</tr>
<tr>
<td width="468" height="60" align="center" valign="middle" background="images/top_banner.gif"> </td>
</tr>
<tr>
<td><img src="images/top_06.gif" width="468" height="52"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="38" background="images/top_menu_bg.gif"><table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" cellspacing="0" >
<tr id="headerbar">
<td align="left" valign="middle"><table cellpadding="0" cellspacing="0" >
<tr>
<td><script language="JavaScript" src="common/menu.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
...全文
718 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
老王@上新路 2012-05-16
  • 打赏
  • 举报
 回复
不知道从哪里翻译过来的，真他妈撮，首先肯定就不支持IE6.0，还有当浏览器窗口缩小时估计就不能看了
hellNo 2012-05-14
  • 打赏
  • 举报
 回复 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

	<head>

		<title></title>

		<meta content="text/html; charset=gb2312" http-equiv="Content-Type">

		<link href="%B0建文%2C文档%20(2).css" rel="stylesheet" type="text/css">

	</head>

	<body class="gen-1">

		<div class="ts-1">

			<div class="left_bg ts-1-1"></div>

			<div class="ts-1-2">

				<div class="ts-2">

					<div class="ts-2-1">

						<div class="ts-3">

							<div class="ts-3-1">

								<div class="font_top_welcome ts-4">

									<div class="ts-4-1"><strong class="gen-2">无名小说网欢迎您，您可以选择[<a href=""><font color="#d66c23">登录</font></a>]或者[<a href=""><font color="#d66c23">注册新用户</font></a>]！</strong> </div>

								</div>

							</div>

							<div class="ts-3-2">

								<div class="font_top_function ts-5">

									<div align="center" class="ts-5-1"><a onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.jieqi.com')" href="" a="" class="gen-2">设为首页</a> </div>

									<div align="center" class="ts-5-2"><a href="javascript:window.external.addFavorite('http://www.jieqi.com','杰奇网络')" class="gen-2">加入收藏</a> </div>

									<div align="center" class="ts-5-3"><a href="mailto:" class="gen-2">联系方式</a> </div>

								</div>

							</div>

						</div>

					</div>

					<div class="ts-2-2">

						<div class="ts-6">

							<div class="ts-6-1"><img src="images/logo.gif" width="71" height="73" class="gen-2"> </div>

							<div class="ts-6-2"><img src="images/top_03.gif" width="14" height="130" class="gen-2"> </div>

							<div class="ts-6-3"><img src="images/top_04.gif" width="468" height="18" class="gen-2"> </div>

							<div class="ts-6-4"><img src="images/top_05.gif" width="54" height="130" class="gen-2"> </div>

							<div align="center" class="ts-6-5"></div>

							<div class="ts-6-6"><img src="images/top_06.gif" width="468" height="52" class="gen-2"> </div>

						</div>

					</div>

					<div class="ts-2-3">

						<div class="ts-7">

							<div class="ts-7-1">

								<div class="ts-8">

									<div align="left" class="ts-8-1">

										<div class="ts-9">

											<div class="ts-9-1"><script language="JavaScript" type="text/javascript" src="common/menu.js" class="gen-2"></script><script language="JavaScript" type="text/javascript" class="gen-2">

</body></html></script> </div>

										</div>

									</div>

								</div>

							</div>

						</div>

					</div>

				</div>

			</div>

		</div>

	</body>

</html>







.gen-1 {

	line-height: 110%;

}



.ts-1 {

	border: none;

	height: 190px;

	position: relative;

	text-align: left;

	width: 981px;

}



.ts-1-1 {

	border: none;

	height: 0px;

	left: 0px;

	overflow: hidden;

	padding: 0px;

	position: absolute;

	top: 0px;

	width: 0px;

}



.ts-1-2 {

	border: none;

	height: 190px;

	left: 0px;

	padding: 0px;

	position: absolute;

	top: 0px;

	width: 981px;

}



.ts-2 {

	border: none;

	height: 190px;

	position: relative;

	text-align: left;

	width: 776px;

}



.ts-2-1 {

	background-image: url('images/top_01.gif');

	border: none;

	height: 22px;

	left: 0px;

	padding: 0px;

	position: absolute;

	top: 0px;

	width: 776px;

}



.ts-3 {

	border: none;

	height: 18px;

	margin-left: auto;

	margin-right: auto;

	margin-top: 2px;

	position: relative;

	text-align: left;

	width: 97%;

}



.ts-3-1 {

	border: none;

	height: 18px;

	left: 0.00%;

	padding: 0px;

	position: absolute;

	top: 0px;

	width: 67.99%;

}



.ts-4 {

	border: none;

	height: 18px;

	position: relative;

	text-align: left;

	width: 100%;

}



.ts-4-1 {

	border: none;

	height: 18px;

	left: 0.00%;

	line-height: 18px;

	padding: 0px;

	position: absolute;

	top: 0px;

	width: 100.00%;

}



.gen-2 {

	vertical-align: middle;

}



.ts-3-2 {

	border: none;

	height: 18px;

	left: 67.99%;

	padding: 0px;

	position: absolute;

	top: 0px;

	width: 32.01%;

}



.ts-5 {

	border: none;

	height: 18px;

	margin-left: auto;

	margin-right: auto;

	position: relative;

	text-align: left;

	width: 80%;

}



.ts-5-1 {

	border: none;

	height: 18px;

	left: 0.00%;

	line-height: 18px;

	padding: 0px;

	position: absolute;

	text-align: center;

	top: 0px;

	width: 33.16%;

}



.ts-5-2 {

	border: none;

	height: 18px;

	left: 33.16%;

	line-height: 18px;

	padding: 0px;

	position: absolute;

	text-align: center;

	top: 0px;

	width: 33.16%;

}



.ts-5-3 {

	border: none;

	height: 18px;

	left: 66.84%;

	line-height: 18px;

	padding: 0px;

	position: absolute;

	text-align: center;

	top: 0px;

	width: 33.16%;

}



.ts-2-2 {

	border: none;

	height: 130px;

	left: 0px;

	padding: 0px;

	position: absolute;

	top: 22px;

	width: 776px;

}



.ts-6 {

	border: none;

	height: 130px;

	position: relative;

	text-align: left;

	width: 776px;

}



.ts-6-1 {

	background-image: url('images/top_logo_bg.gif');

	border: none;

	height: 130px;

	left: 0px;

	line-height: 130px;

	padding: 0px;

	position: absolute;

	top: 0px;

	width: 240px;

}



.ts-6-2 {

	border: none;

	height: 130px;

	left: 240px;

	line-height: 130px;

	padding: 0px;

	position: absolute;

	top: 0px;

	width: 14px;

}



.ts-6-3 {

	border: none;

	height: 18px;

	left: 254px;

	line-height: 18px;

	padding: 0px;

	position: absolute;

	top: 0px;

	width: 468px;

}



.ts-6-4 {

	border: none;

	height: 130px;

	left: 722px;

	line-height: 130px;

	padding: 0px;

	position: absolute;

	top: 0px;

	width: 54px;

}



.ts-6-5 {

	background-image: url('images/top_banner.gif');

	border: none;

	height: 60px;

	left: 254px;

	overflow: hidden;

	padding: 0px;

	position: absolute;

	text-align: center;

	top: 18px;

	width: 468px;

}



.ts-6-6 {

	border: none;

	height: 52px;

	left: 254px;

	line-height: 52px;

	padding: 0px;

	position: absolute;

	top: 78px;

	width: 468px;

}



.ts-2-3 {

	background-image: url('images/top_menu_bg.gif');

	border: none;

	height: 38px;

	left: 0px;

	padding: 0px;

	position: absolute;

	top: 152px;

	width: 776px;

}



.ts-7 {

	border: none;

	height: 3px;

	margin-left: auto;

	margin-right: auto;

	margin-top: 17px;

	position: relative;

	text-align: left;

	width: 750px;

}



.ts-7-1 {

	border: none;

	height: 3px;

	left: 0px;

	padding: 0px;

	position: absolute;

	top: 0px;

	width: 750px;

}



.ts-8 {

	border: none;

	height: 3px;

	position: relative;

	text-align: left;

	width: 100%;

}



.ts-8-1 {

	border: none;

	height: 1px;

	left: 0.00%;

	padding: 1px;

	position: absolute;

	top: 0px;

	width: 99.73%;

}



.ts-9 {

	border: none;

	height: 1px;

	position: relative;

	text-align: left;

	width: 0px;

}



.ts-9-1 {

	border: none;

	height: 0px;

	left: 0px;

	line-height: 0px;

	padding: 0px;

	position: absolute;

	top: 0px;

	width: 0px;

}
hellNo 2012-05-14
  • 打赏
  • 举报
 回复
有个table转div的工具这个不行自己搜搜，以前用过，table全部转换成div了
一经注册不得修改 2012-05-14
  • 打赏
  • 举报
 回复
技术型钻牛角尖急躁者，table与div应用的场景并不相同，不要总让它们彼此仇视
仙剑 2012-05-14
  • 打赏
  • 举报
 回复
div真的比table布局好吗，不见得吧
licip 2012-05-14
  • 打赏
  • 举报
 回复
是的。如果你不自己学，就算人家写给你，你也看不懂呀。
hch126163 2012-05-14
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]

楼主，这个得靠自己啊，先学学

http://www.w3school.com.cn/h.asp

有什么问题 再贴上来，大家帮你。
[/Quote]
+++
001007009 2012-05-13
  • 打赏
  • 举报
 回复
楼主，这个得靠自己啊，先学学

http://www.w3school.com.cn/h.asp

有什么问题 再贴上来，大家帮你。
表格到DIV转换工具
Table2CSS是一款可以将表格布局网页完美转换 成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。
Div+CSS布局入门教程
Div+CSS布局入门教程（全套） 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的...
Div+CSS 基础demo
今天看到一个Div+CSS 布局的经典教程，奉献给大家，本人一向偏好DIV+CSS，但由于关注seo 和网站运营较多，造成了DIV+CSS 做网页模板的技术生疏，为了培养自己成全才，不得不好好消化一翻，其实很简单滴。这个DIV+CSS...
简洁 DIV+CSS布局入门之三 ( DIV+CSS常用 常用CSS DIV+CSS实例 简单DIV+CSS DIV+CSS布局分析 DIV+CSS流程)
简洁 DIV+CSS布局入门之三 作者：佚名 文章来源：蓝色理想简洁 DIV+CSS布局入门之三 ( DIV+CSS常用 常用CSS 
div+css基础教程
第一节 了解div+css 一、什么是div+css div元素是html(超文本语言)中的一个元素，是标签，用来为html文档内大块（block-level）的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章