把TABAL表格形式改成DIV+css
发布网友
发布时间:2022-04-20 19:21
我来回答
共3个回答
热心网友
时间:2022-04-20 20:50
我用DIV UL LI把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=utf-8" />
<title>无标题文档</title>
<style>
<!--
#table {
clear:none;
width:100%;
border-top:1px #ff0000 solid;
}
#table ul {
clear:left;
margin:0px;
padding:0px;
width:100%;
list-style-type:none;
border-bottom:1px #ff0000 solid;
border-left:1px #ff0000 solid;
}
#table li {
float:left;
display:block;
margin:0px;
padding:0px;
border-right:1px #ff0000 solid;
width:100%;
}
#tab {
clear:none;
width:100%;
}
#tab ul {
clear:left;
margin:0px;
padding:0px;
width:100.2%;
list-style-type:none;
border-bottom:1px #ff0000 solid;
border-left:1px #ff0000 solid;
}
#tab li {
float:left;
display:block;
margin:0px;
padding:0px;
border-right:1px #ff0000 solid;
height:107px;
line-height:107px;
}
-->
</style>
</head>
<body>
<div id="table">
<ul>
<li>123</li>
</ul>
<div id="tab">
<ul>
<li style="width:74.85%;"><img src="file:///E|/gswz/img/logo1.gif" width="758" height="107"></li>
<li style="width:24.9%;"><img src="file:///E|/gswz/img/GG.gif" width="242" height="107"></li>
</ul>
</div>
<ul>
<li>DEF</li>
</ul>
<ul>
<li>456</li>
</ul>
</div>
</body>
</body>
</html>
热心网友
时间:2022-04-20 22:08
<div style="width:100%; margin:0 autol;">
<div style="width:100%;height:23px;background:url(file:///E|/gswz/img/hand_top.gif)">
</div>
<div style="width:100%; margin:0 autol;">
<div style:width:758px; height:107; float:left;>
<img src="file:///E|/gswz/img/logo1.gif" width="758" height="107"></div>
<div style="width:242px; height:107px; float:left; margin-left:10px;>
<img src="file:///E|/gswz/img/GG.gif" width="242" height="107"></div>
<div style="width:100%;height:41px;margin-top:10px;">
background="file:///E|/gswz/img/hang.gif"></div>
<div style="width:100%;height:39px;margin-top:10px">
background="file:///E|/gswz/img/loginf.gif"></div>
</div>
</div>
热心网友
时间:2022-04-20 23:43
<style type="text/css">.ts-1 {
border: none;
height: 210px;
margin-left: auto;
margin-right: auto;
position: relative;
text-align: left;
width: 1000px;
}
.ts-1-1 {
background-image: url('file:///E|/gswz/img/hand_top.gif');
border: none;
height: 23px;
left: 0px;
overflow: hidden;
padding: 0px;
position: absolute;
top: 0px;
width: 1000px;
}
.ts-1-2 {
border: none;
height: 107px;
left: 0px;
line-height: 107px;
padding: 0px;
position: absolute;
top: 23px;
width: 758px;
}
.ts-1-3 {
border: none;
height: 107px;
left: 758px;
line-height: 107px;
padding: 0px;
position: absolute;
top: 23px;
width: 242px;
}
.ts-1-4 {
background-image: url('file:///E|/gswz/img/hang.gif');
border: none;
height: 41px;
left: 0px;
overflow: hidden;
padding: 0px;
position: absolute;
top: 130px;
width: 1000px;
}
.ts-1-5 {
background-image: url('file:///E|/gswz/img/loginf.gif');
border: none;
height: 39px;
left: 0px;
overflow: hidden;
padding: 0px;
position: absolute;
top: 171px;
width: 1000px;
}
</style>
<div class="ts-1">
<div class="ts-1-1"></div>
<div class="ts-1-2"><img height="107" src="file:///E|/gswz/img/logo1.gif" width="758"></div>
<div class="ts-1-3"><img height="107" src="file:///E|/gswz/img/GG.gif" width="242"></div>
<div class="ts-1-4"></div>
<div class="ts-1-5"></div>
</div>