问题描述
公司要我做一个人做一个网站，不会美工。如下图所示的展示框是怎么做出来的。是JS吗？旁边的边框怎么搞的啊。中间的tabpanel鼠标移上去就会自动展开。怎么做的啊，没有做过网站。悲剧啊 问题补充：给个关键字啊，或给个网址
解决方案
js+css+div做的啊。网上一大把这个效果，你搜搜就出来了。
解决方案二：
<html><head><script type="text/javascript"> function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } }</script><style type="text/css"> <!-- /*Tab1*/ #lib_Tab1 { width:500px; margin:0px; padding:0px; margin-bottom:15px; } .lib_tabborder { border:1px solid #95C9E1; } .lib_Menubox { height:28px; line-height:28px; position:relative; width: 1000px; } .lib_Menubox ul { margin:0px; padding:0px; list-style:none; position:absolute; top:3px; left:0; margin-left:10px; height:25px; text-align:center; } .lib_Menubox li { float:left; display:block; cursor:pointer; width:114px; color:#949694; font-weight:bold; margin-right:2px; height:25px; line-height:25px; background-color:#E4F2FD } /* www.codefans.net */ .lib_Menubox li.hover { padding:0px; background:#fff; width:116px; border-left:1px solid #95C9E1; border-top:1px solid #95C9E1; border-right:1px solid #95C9E1; color:#739242; height:25px; line-height:25px; } .lib_Contentbox { clear:both; margin-top:0px; border-top:none; height:469px; text-align:center; padding-top:8px; width: 1000px; } } --> </style></head> <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="#"> <table width="100%" border="1" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;color:black;"> <tr> <td width="74">客房总数</td> <td width="171"><label> <input name="total_room" type="text" id="total_room" /> </label></td> <td width="85">客房面积</td> <td width="226"><label> <input name="toatl_" type="text" id="room_area" /> </label></td> </tr> <tr> <td>客房价格</td> <td><input type="text" name="baseprice" id="baseprice"/></td> <td>是否特价</td> <td> <input type="text" name="tspecials" id="tspecials"/> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>客房介绍</td> <td colspan="3"><label> <textarea name="room_description" id="room_description"></textarea> </label></td> </tr> <tr> <td colspan="4"><div align="center"><span style="color: red;">*</span>点击修改 <label> <input type="submit" name="Submit" value=" 修 改 " /> </label> </div></td> </tr> </table></form></div> </div> <div id="con_one_2" style="display:none"><div id="user_content"><div class="user_con"><h3>添加客房基本信息</h3><form action="addHotelRoom.do" onsubmit="return check()" method="post"><table class="user_table" border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td width="15%" style="width:15%;white-space:nowrap;text-align:center;"><span style="text-align:center">床位类型:</span></td> <td colspan="3"><div align="left"> <select name="room_type" id="selects" class="room_types"> </select> </div></td> </tr> <tr> <td style="text-align:center">客房总数:</td> <td width="19%" style="width:35%;"><div align="left"><input type="text" name="total_room" id="total_rooms" size="10" value="输入整数" onclick="this.value=''" style="color: gray;" /></div> </td> <td width="31%" style="width:15%;text-align:center">客房面积:</td> <td width="35%" style="width:35%;"><div align="left"><input name="room_area" type="text" class="common_txt" id="room_areas" value="输入整数" onclick="this.value=''" style="color: gray;" /> <span class="red">*</span>(请填正整数)</div></td> </tr> <tr> <td style="text-align:center">客房价格:</td> <td><div align="left"><span style="width:35%;"> <input name="baseprice" type="text" class="common_txt" id="baseprices" value="输入整数" onclick="this.value=''" style="color: gray;" /> <span class="red">*</span>(请填正整数)</span></div></td> <td style="text-align:center">是否特价：</td> <td><div align="left"><span style="cursor:pointer;"> <input type="radio" name="specials" value="1"/>是<input type="radio" name="specials" value="0" checked="checked" />否 </span></div></td> </tr> <tr> <td style="text-align:center"> </td> <td> </td> <td style="text-align:center"> </td> <td><label for="O_Breakfast_1" style="cursor:pointer;"></label></td> </tr> <tr> <td style="text-align:center">客房介绍:</td> <td colspan="3"><textarea name="room_description" id="room_description" cols="80" rows="5" style="color: gray;">填写房间介绍</textarea></td> </tr> <tr> <td style="text-align:left;padding-left:50px;" colspan="4"><div align="center"> <input name="submit" type="submit" id="O_Add" value="提 交" style="color: red;" /></div></td> </tr></table></form></div></div> </div> </div> </div> </html>