一个非常简单的网站首页排版问题

[code="java"]公司要我做一个人做一个网站，不会美工。如下图所示的展示框是怎么做出来的。是JS吗？旁边的边框怎么搞的啊。中间的tabpanel鼠标移上去就会自动展开。怎么做的啊，没有做过网站。悲剧啊[/code]

js+css+div做的啊。网上一大把这个效果，你搜搜就出来了。

<br> function setTab(name,cursel,n){<br><br> for(i=1;i&lt;=n;i++){<br><br> var menu=document.getElementById(name+i);<br><br> var con=document.getElementById(&quot;con_&quot;+name+&quot;_&quot;+i);<br><br> menu.className=i==cursel?&quot;hover&quot;:&quot;&quot;;<br><br> con.style.display=i==cursel?&quot;block&quot;:&quot;none&quot;;<br><br> }<br><br> }<br>
<br><br> &lt;!--<br><br> /*Tab1*/<br><br> #lib_Tab1 {<br><br> width:500px;<br><br> margin:0px;<br><br> padding:0px;<br><br> margin-bottom:15px;<br><br> }<br><br> .lib_tabborder {<br><br> border:1px solid #95C9E1;<br><br> }<br><br> .lib_Menubox {<br><br> height:28px;<br><br> line-height:28px;<br><br> position:relative; <br> width: 1000px; <br> }<br><br> .lib_Menubox ul {<br><br> margin:0px;<br><br> padding:0px;<br><br> list-style:none;<br><br> position:absolute;<br><br> top:3px;<br><br> left:0;<br><br> margin-left:10px;<br><br> height:25px;<br><br> text-align:center;<br><br> }<br><br> .lib_Menubox li {<br><br> float:left;<br><br> display:block;<br><br> cursor:pointer;<br><br> width:114px;<br><br> color:#949694;<br><br> font-weight:bold;<br><br> margin-right:2px;<br><br> height:25px;<br><br> line-height:25px;<br><br> background-color:#E4F2FD<br><br> }<br><br> /* <a href="http://www.codefans.net">www.codefans.net</a> */<br><br> .lib_Menubox li.hover {<br><br> padding:0px;<br><br> background:#fff;<br><br> width:116px;<br><br> border-left:1px solid #95C9E1;<br><br> border-top:1px solid #95C9E1;<br><br> border-right:1px solid #95C9E1;<br><br> color:#739242;<br><br> height:25px;<br><br> line-height:25px;<br><br> }<br><br> .lib_Contentbox {<br><br> clear:both;<br><br> margin-top:0px;<br><br> border-top:none;<br><br> height:469px;<br><br> text-align:center;<br><br> padding-top:8px;<br><br> width: 1000px;<br> } </p> <p>}<br> --&gt;<br><br>

  <div id="lib_Tab1">  
  <div class="lib_Menubox lib_tabborder">  
    <ul>  
      <li id="one1" onclick="setTab('one',1,2)" class="hover">查看房间信息</li>  
      <li id="one2" onclick="setTab('one',2,2)" >添加房间</li>  
    </ul>  
  </div>  
  <div class="lib_Contentbox lib_tabborder">  
    <div id="con_one_1" >
    <div id="roomtype">
    <c:forEach items="${listRoomType}" var="listRoomType">
        <ul>
            <li><a href="javascript:void(0)" value="roomtype_${listRoomType.room_type}">${listRoomType.room_type_name}</a></li>
        </ul>
        </c:forEach>
    </div>
    <div id="roomdes">
    <form id="form1" name="form1" method="post" action="#">

客房总数		客房面积
客房价格		是否特价
客房介绍
*点击修改

    </div>
    </div>  
    <div id="con_one_2" style="display:none">
    <div id="user_content">