求助！javascript放进去之后 页面就乱了？

Question

在ｂａｎｎｄｅｒ。想设置轮播图片！但代码放进去之后 就页面就乱了？居中不了呢?下面是网站的 代码：<style>
body {
margin:0px;
font-weight:bold;
background:#EDEFEF;

}
img {
margin:0px 0px;
padding:0px 0px;
}

/*链接*/
#heder #menu ul li a{
color:#999;
text-decoration:none;
font-size:18px;
font-weight:bold;
}#conter #left #l2 #l22 .l2p a{
color:#999;
text-decoration:none;
}
#dt #dt2 #dt22 ul li a{
color:#666;
}
#dt #dt2 #dt22 ul li a:hover{
color:#333;
}
/*顶部*/
#heder {
width:900px;
height:74px;
border:solid 1px #00F;
background:url(img/beilogo.gif);
margin:0px auto;
}
#menu {
width:550px;
height:30px;
float:right;
line-height:30px;
margin-left:10px;
margin-top:30px;
}
#menu ul {
list-style-type:none;
height:30px;
line-height:30px;
margin:0px;
}
#menu ul li {
float:left;
display:block;
margin:0px 10px;
height:20px;
line-height:20px;

}
#menu .menuDiv {
width:1px;
height:20px;
background:#CCC;
}
/*bannder*/
#banner {position:relative; width:900px; height:220px; border:1px solid #666; overflow:hidden;
margin:0px auto;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;cursor:pointer; width:900px; }
#banner_info{position:absolute; bottom:0; left:5px; line-height:30px;color:#fff;z-index:1001}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=75);opacity:0.75; border:1px solid #fff;z-index:1002;margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#fff 1px solid;background-color:#6f4f67;cursor:pointer}
#banner ul li.on{ background-color:#900}
#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->/*conter*/
#conter {
width:900px;
margin:0px auto;
height:490px;
margin-top:30px;
background-color:#ECF0F8;
}
#left{
width:200px;
height:472px;
float:left;

}
#l1{
width:195px;
height:190px;
float:left;
border:solid 1px #ccc;
margin-bottom:10px;
border-right:solid 2px #999;
border-bottom:solid 2px #666;
background:#F6F6F6;
}
#l11 ,#l21{
width:185px;
height:25px;
border-bottom:solid 2px #218D71;
padding-left:10px;
line-height:25px;
margin:0 auto;
font:14px;
color: #FFF;
background:#31AAC7;
}
#l12{
width:180px;
height:125px;
margin:0 auto;
}#conter #left #l2 #l22 .l2p a:hover{
color:#000;
}
.lp {
font-size:14px;
color:#666;
line-height:18px;
padding-left:15px;
padding-top:10px;
border-bottom:solid 1px #CCC;
}
.cion {
width:23px;
height:22px;
background:url(img/ys/cion.jpg);
float:left;
margin-left:0px;
margin-top:-5px;
}
.cion2 {
width:23px;
height:22px;
background:url(img/ys/cion2.jpg);
float:left;
margin-left:0px;
margin-top:-5px;
}
#l2 {
width:195px;
height:250px;
background:#F6F6F6;
float:left;
border:solid 1px #ccc;
border-bottom:solid 2px #666;
border-right: solid 2px #999;
}#l22 {
width:190px;
height:200px;
margin-top:12px;
margin-left:3px;}.l2p {
font-size:14px;
color:#666;
line-height:31px;
margin:0px auto;
width:180px;
height:31px;
border:solid 1px #ccc;
background:#E7E8E9;
border-top:solid 1px #C5C6C7;
border-bottom:solid 1px #FFF;

}.cion3 {
width:23px;
height:20px;
float:left;
background:url(img/ys/cion3.jpg);
margin-top:5px;
margin-right:4px;
}/*right*/
#right{
width:688px;
height:480px;
float:left;
border:solid 1px #ccc;
margin-left:5px;
background:#EFEFEF;
}
#sm{
width:675px;
height:20px;
border:solid 1px #CCC;
margin:2px auto;
background:url(img/ys/fb.jpg) repeat;
color:#FFF;
line-height:20px;
padding-left:10px;
}
#r1,#r4,#r7 {
width:220px;
height:120px;

background:#fff;
float:left;
margin-left:5px;
border-right:solid 2px #999;
border-bottom:solid 1px #666;
}
#r2,#r3,#r5,#r6,#r8,#r9 {
width:220px;
height:120px;
border-right:solid 2px #999;
border-bottom:solid 2px #666;
background:#fff;
float:left;
margin-left:6px;
}#sm2,#sm3 {
width:675px;
height:20px;
border:solid 1px #ccc;
float:left;
margin:3px 5px;
background:#53B2C6;}
#sm4 {
width:675px;
height:25px;
float:left;
border:solid 1px #ccc;
margin:3px 5px;
background:#53B2C6;
}
/*动态*/
#dt {
width:900px;
height:200px;
border:solid 1px #ccc;
margin:0px auto;
}#dt1{
width:280px;
height:190px;
border:solid 1px #ccc;
float:left;
margin-left:3px;
margin-top:5px;
}
#dt2, #dt3{
width:280px;
height:190px;
border:solid 1px #ccc;
float:left;
margin-left:20px;
margin-top:5px;
}#dt11,#dt21,#dt31{
width:270px;
height:25px;
line-height:25px;
padding-left:10px;
background:#31AAC7;
color:#fff;
border-bottom:solid 2px #666;
border-right:solid 2px #999;
}
.dtxm{
width:250px;
height:26px;
border-bottom:solid 1px #999;
margin-left:10px;
}
#dt22{
width:270px;
}
#dt22 ul li {
height:20px;
line-height:20px;

}
#dt22 ul li a:hover{
color:#f00;
}/*bottom*/
#bottom {
width:900px;
height:70px;
margin:0px auto;
border:solid 1px #CCC;
margin-top:10px;
}
#zl {
width:100px;
height:60px;
border:solid 1px #ccc;
margin:5px 5px;
float:left;
}
#zllogo{
width:780px;
height:60px;
float:left;
border:solid 1px #ccc;
margin-top:5px;
}
/*footer*/#links {
width:900px;
height:30px;
margin:0px auto;
border:solid 1px #CCC;
margin-top:5px;
line-height:30px;
}
#yq {
width:100px;
height:25px;
float:left;
padding-left:20px;

}
#lj{
width:775px;
height:24px;
border:solid 1px #ccc;
float:left;
margin-top:2px;
}
#footer {
width:100%;
height:60px;
border:solid 1px #ccc;
background:url(img/ys/fb.jpg) repeat;
text-align:center;
margin:0px auto;
padding-top:10px;
margin-top:5px;
}
#ba{
font:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
margin-top:-8px;
}</style>
</head><body>
<div id="heder">
<div id="menu">
          <ul>
    <li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">案例</a></li>
<li class="menuDiv"></li>
<li><a href="#">服务</a></li>
<li class="menuDiv"></li>
<li><a href="#">艺术家</a></li>
<li class="menuDiv"></li>
<li><a href="#">联系</a></li>
  </ul
></div></div><div id="banner">
<div id="banner_bg"></div>  <!--标题背景-->
<a href="#" id="banner_info"></a> <!--标题-->
    <ul id="list"></ul>
   <div id="banner_list">
        <a href="#" target="_blank"><img src="../img/lb/01.jpg" title="UFA 蛇 blog1" alt="橡树小屋的blog" /></a>
        <a href="#" target="_blank"><img src="../img/lb/02.jpg" title="UFA 蛇 blog2" alt="橡树小屋的blog" /></a>
        <a href="#" target="_blank"><img src="../img/lb/03.jpg" title="UFA 蛇blog3" alt="橡树小屋的blog" /></a>
        <a href="#" target="_blank"><img src="../img/lb/04.jpg" title="UFA 蛇blog4" alt="橡树小屋的blog" /></a>
</div>
</div>
</div>
<div id="conter">
<div id="left">
<div id="l1"><div id="l11">联系方式</div>
<div id="l12">
<div class="lp"><div class="cion"></div>联系人：黄先生</div>
<div class="lp"><div class="cion2"></div>职位：艺术总监</div>
<div class="lp"><div class="cion"></div>电 话：13482543411</div>
<div class="lp"><div class="cion2"></div>Q Q:1523005432</div>
<div class="lp"><div class="cion"></div>E-mail:[email protected]</div>
</div></div>
<div id="l2">
<div id="l21">服务范围</div>
<div id="l22">
<div class="l2p"><div class="cion3"></div><a href="#">立体画</a></div>
<div class="l2p"><div class="cion3"></div><a href="#">手绘墙</a></div>
<div class="l2p"><div class="cion3"></div><a href="#">墙体彩绘</a></div>
<div class="l2p"><div class="cion3"></div><a href="#">立体画设计</a></div>
<div class="l2p"><div class="cion3"></div><a href="#">手绘背景墙</a></div>
<div class="l2p"><div class="cion3"></div><a href="#">更多</a></div>
</div>
</div>
</div><div id="right">
<div id="sm">参考图库</div>
<div id="r1"><img src="img/ys/r1.jpg" width="220" height="120" /></div>
<div id="r2">2</div>
<div id="r3">3</div>
<div id="sm2">sm2</div>
<div id="r4">4</div>
<div id="r5">5</div>
<div id="r6">6</div>
<div id="sm3">sm3</div>
<div id="r7">7</div>
<div id="r8">8</div>
<div id="r9">9</div>
<div id="sm4">sm4</div>
</div>
</div>
<!-- Baidu Button BEGIN -->
<!--
<script type="text/javascript" id="bdshare_js" data="type=slide&amp;img=2&amp;pos=right&amp;uid=6609187" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
</script>
-->
<!-- Baidu Button END -->
<div id="dt">
<div id="dt1">
<div id="dt11">公司公告</div>
<div id="dt12">
<div class="dtxm">动态</div>
<div class="dtxm">xxxxxx</div>
<div class="dtxm">xxxxxx</div>
<div class="dtxm">xxxxxx</div>
<div class="dtxm">xxxxxxxx</div>
<div class="dtxm">xxxxxxxx</div>
</div></div><div id="dt2">
<div id="dt21">墙体彩绘知识</div>
<div id="dt22">
<ul>
<li><a href="#">动态</a></li>
<li><a href="#">XXXXXXX</a></li>
<li><a href="#">XXXXXXX</a></li>
<li><a href="#">XXXXX</a></li>
<li><a href="#">XXXXXX</a></li>
<li><a href="#">XXXXXX</a></li>
<li><a href="#">XXXXXXXX</a></li>
</ul>
</div>
</div><div id="dt3">
<div id="dt31">最新动态</div>
<div id="da32">动态</div>
</div></div><div id="bottom"><div id="zl">战略合作伙伴</div>
<div id="zllogo">logo</div>
javascript 页面乱了

Answer 1

求高手 帮忙呀！！！本人菜鸟

Answer 2

现两个一弄然后三个依次递加