html中布局
<title>无标题文档</title>
<link href="css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="logo"><img src="images/logo.gif" /></div>
<div id="menu">
<a href="#">网站首页<br /><span style="color:#ffffff;"> Home</span></a>
<a href="#">供用产品<br /><span style="color:#ffffff;"> chan pein</span></a>
<a href="#">公司简介<br /><span style="color:#ffffff;"> jian jie</span></a>
<a href="#">诚信档案<br /><span style="color:#ffffff;"> dang an</span></a>
<a href="#">技术文章<br /><span style="color:#ffffff;"> wen zhang</span></a>
<a href="#">公司动态<br /><span style="color:#ffffff;"> dong tai</span></a>
<a href="#">招聘中心<br /><span style="color:#ffffff;"> zhao pin</span></a>
<a href="#" style=" padding-right:5px; margin:0px;">联系我们<br /><span style="color:#ffffff;"> lian xi</span></a>
</div>
<div id="top"><img src="images/banner.gif" />
</div>
</div>
<div id="contenter">
<div id="left">
<div id="cpfl" class="leftcss">
<h3>产品分类</h3>
<ul>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
</ul>
</div>
<div id="znss" class="leftcss">
<h3>站内搜索</h3>
<ul>
<li><form action="" method="get" name="from1" style="margin-bottom:0;">
<input name="ss" type="text" size="5" />
<input type="button" value="搜索" style="background-color:#660000; color:#fff; padding-top:2px;" /></form></li>
</ul>
</div>
<div id="fgxx" class="leftcss">
<h3>反馈信息</h3>
<ul>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
</ul>
</div>
<div id="yqlj" class="leftcss">
<h3>友情链接</h3>
<ul>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
<li><a href="#">非共和国广告</a></li>
</ul>
</div>
<div id="lxwm" class="leftcss">
<h3>联系我们</h3>
<ul>
<li>电话：0516-12355565</li>
<li>传真：101-454564</li>
<li>手机：12345678910</li>
<li>网址：www.bd.com</li>
<li>联系人：张小姐</li>
<li>地址：来的快解放</li>
</ul>
</div>
</div>
<div id="right">
<div class="rightcss">产品推荐</div>
<div id="cptj">
<div class="tp">
<img src="images/product1_pic.gif" style="border:solid 1px #cc9966;"/><div ><a href="#">第一产品</a></div></div>
<div class="tp">
<img src="images/product2_pic.gif" style="border:solid 1px #cc9966;"/ ><div ><a href="#">第一产品</a></div></div>
<div class="tp">
<img src="images/product3_pic.gif" style="border:solid 1px #cc9966;"/><div><a href="#">第一产品</a></div></div>
<div class="tp">
<img src="images/product4_pic.gif" style="border:solid 1px #cc9966;"/><div><a href="#">第一产品</a></div></div>
<div class="tp">
<img src="images/product5_pic.gif" style="border:solid 1px #cc9966;"/><div><a href="#">第一产品</a></div></div>
<div class="tp">
<img src="images/product6_pic.gif" style="border:solid 1px #cc9966;"/><div><a href="#">第一产品</a></div></div>
<div class="tp">
<img src="images/product7_pic.gif" style="border:solid 1px #cc9966;"/><div><a href="#">第一产品</a></div></div>
<div class="tp">
<img src="images/product9_pic.gif" style="border:solid 1px #cc9966;"/><div><a href="#">第一产品</a></div></div>
<div class="tp">
<img src="images/product10_pic.gif" style="border:solid 1px #cc9966;"/><div><a href="#">第一产品</a></div></div>
<div class="tp">
<img src="images/product11_pic.gif" style="border:solid 1px #cc9966;"/><div><a href="#">第一产品</a></div></div>
</div>
<div class="rightcss">公司简介</div>
<div id="gsjj"> 未来，在我的眼里，它应是美好的，甜蜜的，幸福的。它是理想的代名词，是信念的灯火，是黎明的曙光。它常常会伴随着许多美好事物出现在我的梦中，令我无限向往。它仿佛摆动着柔美的舞姿，踏着欢快的脚步，从四面八方向我走来。它离我是多么近呀，仿佛一伸手就可以抓到。我的未来真的是非常美好吗？我的未来不会只是梦吧？未来，在我的眼里，它应是美好的，甜蜜的，幸福的。它是理想的代名词，是信念的灯火，是黎明的曙光。它常常会伴随着许多美好事物出现在我的梦中，令我无限向往。它仿佛摆动着柔美的舞姿，踏着欢快的脚步，从四面八方向我走来。它离我是多么近呀，仿佛一伸手就可以抓到。我的未来真的是非常美好吗？我的未来不会只是梦吧？</div>
<div class="rightcss">公司主营产品/服务</div>
<div id="zycp"> 未来，在我的眼里，它应是美好的，甜蜜的，幸福的。它是理想的代名词，是信念的灯火，是黎明的曙光。它常常会伴随着许多美好事物出现在我的梦中，令八方向我走来。它离我是多么近呀，仿佛一伸手就可以抓到。我的未来真的是非常美好吗？我的未来不会只是梦吧？</div>
<div class="rightcss">诚信档案</div>
<div id="cxda"> 未来，在我的眼里，它应是美好的，甜蜜的，幸福中，令我无限向往。它仿佛摆动着柔美的舞姿，踏着欢快的脚步，从四面八方向我走来。它离我是多么近呀，仿佛一伸手就可以抓到。我的未来真的是非常美好吗？我的未来不会只是梦吧？</div>
</div>
</div>
<div id="footer">
<span>免费申明:以上所提供的信息由企业自行提供,内容的真实性、准确性和合法性有发布企业负责。Goope对此不承担任何责任。</span>
<p>苏州是高品检测仪器有限公司</p>
<p>联系人：张小姐 联系电话：0512-45128879 传真：0512-548661265 联系地址：苏州市吴中经济开发区</p>
<p>中国环保设备网-环保设备网站群：www.goope.com 设计制作</p>
</div>
</body>
</html>
css中代码
body{
background-color:#FC6;
padding:0;
margin:0;
font-size:12px;
line-height:1.3em;
color:#663333;
}
a{
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#663333;
}
a:hover{
text-decoration:underline;
color:#663333;}
#left a:hover{
font-weight:bold;
}
#header,#contenter,#footer{
648px;
margin:0 auto;}
#contenter{
height:600px;}
#footer{
text-align:center;
clear:both;
font-size:10px;
height:77px;
padding-top:10px;
margin-bottom:0px;
background:url(images/footer_bj.gif) repeat-x left top;}
#logo{
background:url(images/logo_bj.gif) repeat-x left top;
height:55px;
padding-top:10px;
padding-left:20px;
}
#menu{
648px;
height:25px;
background:url(images/nav_a_bj.gif);
}
#menu a{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
}
#menu a span{
font-size:10px;
text-align:center;
}
#menu a,#menu:visited{
color:#FFF;
text-decoration:none;
display:block;
float:left;
margin:0px;
height:25px;
79.9px;
border-right:1px solid #660000;
padding-right:0px;
}
#menu a:hover{
background:url(images/nav_selected_bj.gif);
color:#ffcc66
}
#left{
margin-top:2px;
float:left;
height:600px;
130px;
background-color:#993300;}
.leftcss{
margin-bottom:0px;
border:2px solid #993300;}
.leftcss h3{
margin-top:0px;
padding-top:4px;
height:20px;
padding-left:30px;
font-size:12px;
color:#ffffcc;
margin-bottom:0px;
background:#ff3300 url(images/title_img.gif) no-repeat;}
.leftcss ul{
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
padding-left:5px;
list-style:none;
background-color:#ffffcc;
border:solid 2px #FC3;;
}
#right{
510px;
height:600px;
float:right;}
.rightcss{
background:url(images/title_bj.gif) repeat-x left top;
margin:5px 0 5px 0;
font-weight:bold;
font-size:12px;
color:330000;
padding-top:2px;
}
#gsjj,#zycp,#cxda{
border:1px solid #cc9933;
font-size:12px;
color:663333;
background-color:#ffcc99;
text-indent:2em;
text-indent:2em;
padding:5px;
}
#cptj{
background-color:#ffcc99;
color:663333;
border:1px solid #cc9933;
height:230px;
}
.tp{
84px;
height:100px;
text-align:center;
float:left;
margin:6px;
}
#footer span{
color:#fff;
}
#footer p{
margin:0px;
}