wlq530
2011-08-31 12:42 阅读 274
已采纳

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    AngelAndAngel AngelAndAngel 2011-08-31 13:06

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

    点赞 评论 复制链接分享
  • zpl123456 程序江湖_zpl 2011-08-31 13:17



    <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">
    

    添加客房基本信息

    床位类型:
    客房总数:
    客房面积:
    *(请填正整数)
    客房价格:
    *(请填正整数)
    是否特价:
    是 否
         
    客房介绍: 填写房间介绍








    点赞 评论 复制链接分享

相关推荐