请教DIV+CSS高手，这样的网页布局的DIV+CSS代码怎么写？

请教DIV+CSS高手，这样的网页布局的DIV+CSS代码怎么写？我尝试了很多次都做不出来。希望高手指教如图：... 请教DIV+CSS高手，这样的网页布局的DIV+CSS代码怎么写？
我尝试了很多次都做不出来。希望高手指教
如图： 展开
 我来答
7个回答
#热议# 上班途中天气原因受伤算工伤吗？
Victoriness
推荐于2017-09-02 · TA获得超过707个赞
知道答主
回答量：97
采纳率：0%
帮助的人：84.9万
我也去答题访问个人页
展开全部
给你写好了，你看下。模型给你定了高，否则看不到效果的，你用时可以将高删除就可以高度自适应了。

<!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 type="text/css">
*{
margin:0;
padding:0;}
body{
width:960px;
position:relative;
left:50%;
margin-left:-480px;}
div{
border:1px solid black;}
#header,#fooder{
height:100px;}
#container{
float:left;
border:none;}
.floatL{
float:left;
width:713px;
border:none;}
.floatR{
float:right;
width:240px;}
.zhuanji{
width:464px;
float:left;
height:180px;
}
.hihi{
width:240px;
height:180px;
float:left
}
.ri_cont{
width:240px;
height:500px;
float:left;}
.le_cont{
float:left;
width:240px;
height:315px;}
.new_tuijian01,.new_tuijian02,.new_tuijian03{
width:464px;
height:100px;
float:right;}
.clearB{
clear:both;}
.mb5{
margin-bottom:5px;}
.mb7{
margin-bottom:7px;}
.mr5{
margin-right:5px;}
</style>
</head>
<body>
<div id="header" class="mb7">header</div>
<div id="container" class="mb7">
<div class="floatL mr5">
<div class="zhuanji mr5 mb5">zhuanji</div>
<div class="hihi">hihi</div>
<div class="le_cont mr5">le_cont</div>
<div class="new_tuijian01 mb5">new_tuijian01</div>
<div class="new_tuijian02 mb5">new_tuijian02</div>
<div class="new_tuijian03">new_tuijian03</div>
</div>
<div class="ri_cont floatR">ri_cont</div>
</div>
<div id="fooder" class="clearB"></div>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
cdeoug
2011-01-17 · TA获得超过3136个赞
知道小有建树答主
回答量：1224
采纳率：0%
帮助的人：1111万
我也去答题访问个人页
展开全部
方法就比较多了，目前用的大致有两种，虽然CSS3直接提供了相关属性，但不是一定要等它普及...

1是纯CSS，构建很多格子条条，下层比上层多或少一个像素，填充好纯色，大概6到8层可以做一个小弧了。这个高手可能用过，但现在很多人不用了，因为这个不仅有些麻烦，而且只做纯色的框。况且现在网速快了，背景也就几个k，很容易载，下面这个方法就比较主流了。

2是CSS和做图结合，用PS什么的画一个有圆弧的边框。
你可以直接画一个完整的圆角矩形，用一句background:url(图片地址)铺设到DIV上，这是长宽固定的。
要做变宽变长的框，就需要把圆角矩形分割，利用overflow:hidden或repeat:y这类属性结合着去铺设。具体分割成几块看个人习惯或具体要求。

贴个以前做的相关的图，不懂的再说啦。
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
teo_h
2011-01-17
知道答主
回答量：12
采纳率：0%
帮助的人：5.7万
我也去答题访问个人页
展开全部
<!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 type="text/css" >
.container{
text-align:center;
height:1150px;
width:960px;
border: 1px solid #000000;
margin:auto;
}
.heard{
height:100px;
border: 1px solid #000000;
}
.mainleft{
float:left;
height:960px;
width:750px;
border: 1px solid #000000;
}
.mainright{
float:right;
height:960px;
width:200px;
border: 1px solid #000000;
}
.zhuanji{
width:430px;
float:left;
height:150px;
border: 1px solid #000000;
margin-top:10px;
}
.hihi{
float:left;
width:300px;
height:150px;
margin-top:10px;
margin-left:10px;
border: 1px solid #000000;
}
.Le_cont{
float:left;
width:240px;
height:790px;
border: 1px solid #000000;
margin-top:10px;
}
.new1{
float:left;
width:489px;
height:230px;
margin-top:10px;
margin-left:10px;
border: 1px solid #000000;
}
.new2{
float:left;
width:489px;
height:230px;
margin-top:10px;
margin-left:10px;
border: 1px solid #000000;
}
.new3{
float:left;
width:489px;
height:290px;
margin-top:10px;
margin-left:10px;
border: 1px solid #000000;
}
.footer{
clear:both;
height:90px;
border: 1px solid #000000;
}
.Re_cont{
float:right;
margin-top:10px;
height:950px;
width:200px;
border: 1px solid #000000;
}
</style>
</head>
<body>

<div class="container">
<div class="heard">heard
</div>
<div class="mainleft">
<div class="zhuanji">zhuanji
</div>
<div class="hihi">hihi
</div>
<div class="Le_cont">Le_cont
</div>
<div class="new1">new1
</div>
<div class="new2">new2
</div>
<div class="new3">new3
</div>
</div>
<div class="mainright">
<div class="Re_cont">Re_cont
</div>
</div>
<div class="footer">footer
</div>

</div>

</body>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
越花越有518
2011-01-16 · TA获得超过125个赞
知道答主
回答量：148
采纳率：0%
帮助的人：46.1万
我也去答题访问个人页
展开全部
<style>
body{margin:0px; padding:0px;}
.header{margin:0px auto 7px auto;width:960px;}
.center{margin:0px auto ;width:960px;}
.foot{margin:7px auto 0px auto;width:960px;}
.re_cont{width:240px;}
.left{display:inline;margin-right:7px;}
.one{height:200px;margin-bottom:7px;}
.zhuanji{ width:466px; height:200px; float:left;margin-right:7px;}
.hihi{ width:240px; height:200px; float:left;}
.tow{height:700px;}
.le_cont{height:700px;width:240px; float:left;margin-right:7px;}
.tow_right{float:left;width:466px;}
</style>
<div class="header"></div>
<div class="center">
<div class="left" >
<div class="one" >
<div class="zhuanji"></div>
<div class="hihi"></div>
</div>
<div class="tow" >
<div class="le_cont"></div>
<div class="tow_right">
<div class="new_tuijian" style="margin-bottom:7px;" ></div>
<div class="new_tuijian2" style="margin-bottom:7px;"></div>
<div class="new_tuijian3" style="margin-bottom:7px;"></div>
</div>
</div>
</div>
<div style="display:inline" ><div class="re_cont"></div></div>
</div>
<div class="foot"></div>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
doworker
2011-01-17
知道答主
回答量：23
采纳率：0%
帮助的人：9.6万
我也去答题访问个人页
展开全部
给你个结构
<div class="header"></div>
<div class="container">
<div class="content">
<div class="zhuanji"></div>
<div class="hihi"></div>
<div class="lecont"></div>
<div class="new_tuijian"></div>
<div class="new_tuijian2"></div>
<div class="new_tuijian3"></div>
</div>
<div class="re_cont"><div>
</div>
<div class="foot"></div>

css

主要的 大框架 我就不写了 你可以参照一楼的

.zhuanji,.le_cont{ float:left;}
.hihi,.new_tuijian,.new_tuijian2,.new_tuijian3{ float:right;}
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 更多回答（5）
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式