问一个DIV+CSS的有关问题
日期：2014-05-18 浏览次数：20433 次
问一个DIV+CSS的问题
这两天开始学习W3C标准做网页
按W3C的标准：不用表格
在家研究了一下
准备用DIV模仿出表格的效果
结果整了一个多小时愣没整出来
不知哪位高手解救我。。。。
------解决方案--------------------
看看这个有没有用
http://www.cnblogs.com/grandydong/archive/2007/03/05/664295.html
------解决方案--------------------
http://www.zishu.cn/blogview.asp?logID=579
http://www.mybict.com/archiver/tid-8929.html
<!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 "; lang= "gb2312 ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<meta http-equiv= "Content-Language " content= "gb2312 " />
<meta content= "all " name= "robots " />
<meta name= "Author " content= "huobazi@aspxboy.com ,活靶子 " />
<meta name= "Copyright " content= "www.AspxBoy.Com,自由版权,任意转载. " />
<meta name= "Description " content= "www.AspxBoy.Com " />
<meta name= "Keywords " content= "www.AspxBoy.Com,活靶子,huobazi " />
<title> Div布局 </title>
<style>
div
{
height:200px;
color:red;
}
.title
{
margin:0 auto;
width:776px;
background-color:#abcdef;
}
.middle
{
margin:0 auto;
width:776px;
}
.left
{
float:left;
clear:right;
width:20%;
background-color:#eeefff;
}
.center
{
float:left;
clear:right;
width:50%;
background-color:#CCC000;
}
.right
{
float:left;
clear:right;
width:30%;
background-color:#fff000;
}
.both
{
clear:both;
width:100%;
background-color:#666999;
}
.footer
{
margin:0 auto;
width:776px;
clear:both;
background-color:#000fff;
}
</style>
</head>
<body>
<div class= "title "> 顶部 </div>
<div class= "middle ">
<div class= "left "> 左侧 </div>
<div class= "center "> 中部 </div>
<div class= "right "> 右侧 </div>
<div class= "both "> 全行 </div>
<div class= "left "> 左侧 </div>
<div class= "center "> 中部 </div>
<div class= "right "> 右侧 </div>
<div class= "both "> 全行 </div>
<div class= "left "> 左侧 </div>
<div class= "center "> 中侧 </div>
<div class= "right "> 右侧 </div>
</div>
<div class= "footer "> 底部 </div>
</body>
</html> [/
------解决方案--------------------
div是以层的方式放置的，比较灵活，多了个像素少了个像素都会使人崩溃！可以考虑div+table布局！
------解决方案--------------------
<ul> <li> 来做吧
可以做成表格
------解决方案--------------------
table的原意是显示数据的。
------解决方案--------------------
象素要精确,其他挺少代码的.共同学习
------解决方案--------------------
这两天开始学习W3C标准做网页
按W3C的标准：不用表格
在家研究了一下
准备用DIV模仿出表格的效果
结果整了一个多小时愣没整出来
不知哪位高手解救我。。。。
------解决方案--------------------
看看这个有没有用
http://www.cnblogs.com/grandydong/archive/2007/03/05/664295.html
------解决方案--------------------
http://www.zishu.cn/blogview.asp?logID=579
http://www.mybict.com/archiver/tid-8929.html
<!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 "; lang= "gb2312 ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<meta http-equiv= "Content-Language " content= "gb2312 " />
<meta content= "all " name= "robots " />
<meta name= "Author " content= "huobazi@aspxboy.com ,活靶子 " />
<meta name= "Copyright " content= "www.AspxBoy.Com,自由版权,任意转载. " />
<meta name= "Description " content= "www.AspxBoy.Com " />
<meta name= "Keywords " content= "www.AspxBoy.Com,活靶子,huobazi " />
<title> Div布局 </title>
<style>
div
{
height:200px;
color:red;
}
.title
{
margin:0 auto;
width:776px;
background-color:#abcdef;
}
.middle
{
margin:0 auto;
width:776px;
}
.left
{
float:left;
clear:right;
width:20%;
background-color:#eeefff;
}
.center
{
float:left;
clear:right;
width:50%;
background-color:#CCC000;
}
.right
{
float:left;
clear:right;
width:30%;
background-color:#fff000;
}
.both
{
clear:both;
width:100%;
background-color:#666999;
}
.footer
{
margin:0 auto;
width:776px;
clear:both;
background-color:#000fff;
}
</style>
</head>
<body>
<div class= "title "> 顶部 </div>
<div class= "middle ">
<div class= "left "> 左侧 </div>
<div class= "center "> 中部 </div>
<div class= "right "> 右侧 </div>
<div class= "both "> 全行 </div>
<div class= "left "> 左侧 </div>
<div class= "center "> 中部 </div>
<div class= "right "> 右侧 </div>
<div class= "both "> 全行 </div>
<div class= "left "> 左侧 </div>
<div class= "center "> 中侧 </div>
<div class= "right "> 右侧 </div>
</div>
<div class= "footer "> 底部 </div>
</body>
</html> [/
------解决方案--------------------
div是以层的方式放置的，比较灵活，多了个像素少了个像素都会使人崩溃！可以考虑div+table布局！
------解决方案--------------------
<ul> <li> 来做吧
可以做成表格
------解决方案--------------------
table的原意是显示数据的。
------解决方案--------------------
象素要精确,其他挺少代码的.共同学习
------解决方案--------------------
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
