网页div+css如何简易布局
发布网友
发布时间：2022-04-06 12:22
共3个回答
热心网友
时间：2022-04-06 13:52
<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">
body{
margin:0px;
}
#box{
width:750px;
height:1000px;
margin:auto;
}
#head{
width:750px;
height:150px;
background:#00FFCC;
}
#mid{
width:750px;
height:700px;
background:#33CCFF;
}
#mid_left{
width:350px;
height:700px;
float:left;
}
#mid_right{
width:400px;
height:700px;
float:left;
}
#foot
{
width:750px;
height:150px;
background:#00FFCC;
}
</style>
</head>
<body>
<div id="box">
<div id="head">此处显示 id "head" 的内容</div>
<div id="mid">
<div id="mid_left">此处显示 id "mid_left" 的内容</div>
<div id="mid_right">此处显示 id "mid_right" 的内容</div>
</div>
<div id="foot">此处显示 id "foot" 的内容</div>
</div>
</body>
</html>
我给每个div块都设置了高度和背景颜色，如果不设置的话，运行效果看不出来，你把代码复制到dw运行下看效果，看是你想要的效果吗。而且在做网页的时候，高度也是需要设置的，不设置又没有内容的话就占一行。
热心网友
时间：2022-04-06 15:10
<div class="logo"></div>
<div class="menu"></div>
</div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="foot">
</div>追问能不能把具体head什么的一起写出来，宽度750，高自适应
热心网友
时间：2022-04-06 16:44
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
body{ margin:0; padding:0}
div.warper{ width:750px; margin:0 auto;}
div.warper div.header{ height:80px; background:#f8f8f8;}
div.warper div.header div.logo{ height:50px; color:#333; font-size:40px;}
div.warper div.header div.menu{ line-height:30px; background:#f1f1f1}
div.warper div.main div.left{ float:left; width:500px; line-height:30px; }
div.warper div.main div.right{
width:240px; float:right;
}
div.warper div.main div.foot{ height:50px; border-top:1px solid #CCC; clear:both;}
div.cl{ clear:both; height:0px; overflow:hidden;}
</style>
</head>
<body>
<div class="warper">
<div class="header">
<div class="logo">LOGO</div>
<div class="menu">
<a href="#">首页</a>
</div></div>
<div class="main">
<div class="left">
<p>asdasd</p>
<p>ad</p>
<p>asd</p>
<p>asd</p>
<p>asd<br />
<br />
<br />
</p>
</div>
<div class="right">
<p>asdasdasdasd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p> </p>
</div>
<div class="cl"></div>
<div class="foot">这里是footer</div>
</div>
</div>
</body>
</html>
