请教DIV+CSS高手，这样的网页布局的DIV+CSS代码怎么写？
请教DIV+CSS高手，这样的网页布局的DIV+CSS代码怎么写？
我试了很多方法都不行。希望高手能指教下，高手我在写一下的DIV+CSS网页布局代码。谢谢
看图片
希望哪位比较有空的兄弟帮忙弄一下。尝试了好多次都会变形
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>要给力</title>
<style type="text/css">
<!--
#box{ width:960px; margin:0px auto;}
#header{ width:960px; height:100px; background:#930;}
#center{ width:960px; margin:7px 0px;}
#left{ width:710px; float:left;}
#zj{ width:400px; height:200px; float:left; background:#21516d;}
#hihi{ width:300px; height:200px; float:left; margin-left:10px; background:#26516d;}
#left_down{ width:710px; margin-top:7px;}
#right{ width:240px; float:left; margin-left:10px; background:#999; height:900px;}
#footer{ width:960px; height:50px; background:#39F; clear:both;}
#le_cont{ width:240px; float:left; height:690px; background:#9C9;}
#new{ width:466px; float:right; margin:-10px 0px 0px 4px; list-style-type:none;}
#new li{ width:466px; height:200px; background:#F60; margin-top:10px;}
-->
</style>
</head>
<body>
<div id="box">
<div id="header"></div>
<div id="center">
<div id="left">
<div id="left_top">
<div id="zj"></div>
<div id="hihi"></div>
</div>
<div id="left_down">
<div id="le_cont"></div>
<ul id="new">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>要给力</title>
<style type="text/css">
<!--
#box{ width:960px; margin:0px auto;}
#header{ width:960px; height:100px; background:#930;}
#center{ width:960px; margin:7px 0px;}
#left{ width:710px; float:left;}
#zj{ width:400px; height:200px; float:left; background:#21516d;}
#hihi{ width:300px; height:200px; float:left; margin-left:10px; background:#26516d;}
#left_down{ width:710px; margin-top:7px;}
#right{ width:240px; float:left; margin-left:10px; background:#999; height:900px;}
#footer{ width:960px; height:50px; background:#39F; clear:both;}
#le_cont{ width:240px; float:left; height:690px; background:#9C9;}
#new{ width:466px; float:right; margin:-10px 0px 0px 4px; list-style-type:none;}
#new li{ width:466px; height:200px; background:#F60; margin-top:10px;}
-->
</style>
</head>
<body>
<div id="box">
<div id="header"></div>
<div id="center">
<div id="left">
<div id="left_top">
<div id="zj"></div>
<div id="hihi"></div>
</div>
<div id="left_down">
<div id="le_cont"></div>
<ul id="new">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
温馨提示：答案为网友推荐，仅供参考
第1个回答 2011-01-17
方法就比较多了，目前用的大致有两种，虽然CSS3直接提供了相关属性，但不是一定要等它普及...
1是纯CSS，构建很多格子条条，下层比上层多或少一个像素，填充好纯色，大概6到8层可以做一个小弧了。这个高手可能用过，但现在很多人不用了，因为这个不仅有些麻烦，而且只做纯色的框。况且现在网速快了，背景也就几个k，很容易载，下面这个方法就比较主流了。
2是CSS和做图结合，用PS什么的画一个有圆弧的边框。
你可以直接画一个完整的圆角矩形，用一句background:url(图片地址)铺设到DIV上，这是长宽固定的。
要做变宽变长的框，就需要把圆角矩形分割，利用overflow:hidden或repeat:y这类属性结合着去铺设。具体分割成几块看个人习惯或具体要求。
贴个以前做的相关的图，不懂的再说啦。
1是纯CSS，构建很多格子条条，下层比上层多或少一个像素，填充好纯色，大概6到8层可以做一个小弧了。这个高手可能用过，但现在很多人不用了，因为这个不仅有些麻烦，而且只做纯色的框。况且现在网速快了，背景也就几个k，很容易载，下面这个方法就比较主流了。
2是CSS和做图结合，用PS什么的画一个有圆弧的边框。
你可以直接画一个完整的圆角矩形，用一句background:url(图片地址)铺设到DIV上，这是长宽固定的。
要做变宽变长的框，就需要把圆角矩形分割，利用overflow:hidden或repeat:y这类属性结合着去铺设。具体分割成几块看个人习惯或具体要求。
贴个以前做的相关的图，不懂的再说啦。
第2个回答 2011-01-20
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>其实就是这么简单</title>
<style type="text/css">
<!--
#box{ width:960px; margin:0px auto;}
#header{ width:960px; height:100px; background:#930;}
#center{ width:960px; margin:7px 0px;}
#left{ width:710px; float:left;}
#zj{ width:400px; height:200px; float:left; background:#21516d;}
#hihi{ width:300px; height:200px; float:left; margin-left:10px; background:#26516d;}
#left_down{ width:710px; margin-top:7px;}
#right{ width:240px; float:left; margin-left:10px; background:#999; height:900px;}
#footer{ width:960px; height:50px; background:#39F; clear:both;}
#le_cont{ width:240px; float:left; height:690px; background:#9C9;}
#new{ width:466px; float:right; margin:-10px 0px 0px 4px; list-style-type:none;}
#new li{ width:466px; height:200px; background:#F60; margin-top:10px;}
-->
</style>
</head>
<body>
<div id="box">
<div id="header"></div>
<div id="center">
<div id="left">
<div id="left_top">
<div id="zj"></div>
<div id="hihi"></div>
</div>
<div id="left_down">
<div id="le_cont"></div>
<ul id="new">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>其实就是这么简单</title>
<style type="text/css">
<!--
#box{ width:960px; margin:0px auto;}
#header{ width:960px; height:100px; background:#930;}
#center{ width:960px; margin:7px 0px;}
#left{ width:710px; float:left;}
#zj{ width:400px; height:200px; float:left; background:#21516d;}
#hihi{ width:300px; height:200px; float:left; margin-left:10px; background:#26516d;}
#left_down{ width:710px; margin-top:7px;}
#right{ width:240px; float:left; margin-left:10px; background:#999; height:900px;}
#footer{ width:960px; height:50px; background:#39F; clear:both;}
#le_cont{ width:240px; float:left; height:690px; background:#9C9;}
#new{ width:466px; float:right; margin:-10px 0px 0px 4px; list-style-type:none;}
#new li{ width:466px; height:200px; background:#F60; margin-top:10px;}
-->
</style>
</head>
<body>
<div id="box">
<div id="header"></div>
<div id="center">
<div id="left">
<div id="left_top">
<div id="zj"></div>
<div id="hihi"></div>
</div>
<div id="left_down">
<div id="le_cont"></div>
<ul id="new">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
第3个回答 2011-01-16
额 比较忙 这个不太难的 还是先百度吧 一点一点来 要不就算给你你如果实际应用很多问题
第4个回答 2011-01-17
呃 其实自己找的答案比别人给的印象深很多 你可以慢慢学习·· 多问 多看 多想····
嘿嘿····· 不懂的可以来找我·· ！
嘿嘿····· 不懂的可以来找我·· ！
第5个回答 2011-01-20
这种布局略显简单。简单的按照float元素，clear:both overflow: 就可操作起来，注意clear:both后margin-top不是7px.
相似回答