javascript开发滑动门... 登录

javascript开发滑动门教程之布局

首先我们看以下预期的效果

2.png

当鼠标点击上面标题,下面内容发生变化

下面我们来看以下html代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{padding: 0;margin: 0;}
a{text-decoration: none;color:#000;}
li{float:left;width:75px;height:26px;line-height:26px;text-align:center;padding:0 1px; 
    border-top:1px solid #eee;list-style:none;}
#tanContainer{
    width:400px;height:120px;margin:0 auto;margin-top: 200px;border:1px solid #eee;}
#tabCon a{color:#999;}
#tabCon a:hover{color:red;}
#tabCon div {display:none;}
#tabCon div.fdiv {display:block;}
.mod{margin:10px 6px;}
.mod ul li{float:left;width:150px;height:25px;}
.fli{background:#FFF;border-bottom-color:#FFF;border-left:1px solid #eee;border-right:1px solid #eee;
    padding:0;font-weight:bolder;}
.fdiv li{width:150px;height:30px;float:left;list-style:none;overflow:hidden;line-height:30px;margin-left:30px;}
</style>
</head>
<body>
<div id="tanContainer">
         <div id="tab">
             <ul>
                  <li class="fli"><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="tabCon">
                 <div class="fdiv">
                     <ul>
                        <li><a href="#">张勇:要玩快乐的足球!</a></li>
                        <li><a href="#"> 阿里2000万驰援灾区!</a></li>
                        <li><a href="#">旅游宝让你边玩边赚钱!</a></li>
                        <li><a href="#">多行跟进阿里信用贷款!</a></li>
                    </ul>
                 </div>

                 <div class="mod">
                     <ul>
                        <li><a href="#">个人重要信息要管牢!</a></li>
                        <li><a href="#"> 卖家防范红包欺诈提醒!</a></li>
                        <li><a href="#">更换收货地址的陷阱!</a></li>
                        <li><a href="#">注意骗子的技术升级了!</a></li>
                    </ul>
                 </div>

                 <div class="mod">
                     <ul>
                         <li><a href="#">名公益机构淘宝开店攻略!</a></li>
                        <li><a href="#">走进无声课堂!</a></li>
                        <li><a href="#">淘宝之行大众评审赢公益金!</a></li>
                        <li><a href="#">爱心品牌联合征集!</a></li>
                    </ul>
                 </div>

                  <div class="mod">
                     <ul>
                         <li><a href="#">淘宝之行大众评审赢公益金</a></li>
                        <li><a href="#">爱心品牌联合征集</a></li>
                        <li><a href="#">走进无声课堂</a></li>
                        <li><a href="#">名公益机构淘宝开店攻略</a></li>
                    </ul>
                 </div>

                  <div class="mod">
                     <ul>
                        <li><a href="#">走进无声课堂</a></li>
                        <li><a href="#">淘宝之行大众评审赢公益金</a></li>
                        <li><a href="#">爱心品牌联合征集</a></li>
                        <li><a href="#">名公益机构淘宝开店攻略</a></li>
                    </ul>
                 </div>
        </div>
</div>
</body>
</html>


下一节
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding: 0;margin: 0;} a{text-decoration: none;color:#000;} li{float:left;width:75px;height:26px;line-height:26px;text-align:center;list-style:none;padding:0 1px; border-top:1px solid #eee;} #tanContainer{ width:400px;height:120px;margin:0 auto;margin-top: 200px;border:1px solid #eee;} #tabCon a{color:#999;} #tabCon a:hover{color:red;} #tabCon div {display:none;} #tabCon div.fdiv {display:block;} .mod{margin:10px 6px;} .mod ul li{float:left;width:150px;height:25px;} .fli{background:#FFF;border-bottom-color:#FFF;border-left:1px solid #eee;border-right:1px solid #eee; padding:0;font-weight:bolder;} .fdiv li{width:150px;height:30px;float:left;list-style:none;overflow:hidden;line-height:30px;margin-left:30px;} </style> </head> <body> <div id="tanContainer"> <div id="tab"> <ul> <li class="fli"><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="tabCon"> <div class="fdiv"> <ul> <li><a href="#">张勇:要玩快乐的足球!</a></li> <li><a href="#"> 阿里2000万驰援灾区!</a></li> <li><a href="#">旅游宝让你边玩边赚钱!</a></li> <li><a href="#">多行跟进阿里信用贷款!</a></li> </ul> </div> <div class="mod"> <ul> <li><a href="#">个人重要信息要管牢!</a></li> <li><a href="#"> 卖家防范红包欺诈提醒!</a></li> <li><a href="#">更换收货地址的陷阱!</a></li> <li><a href="#">注意骗子的技术升级了!</a></li> </ul> </div> <div class="mod"> <ul> <li><a href="#">名公益机构淘宝开店攻略!</a></li> <li><a href="#">走进无声课堂!</a></li> <li><a href="#">淘宝之行大众评审赢公益金!</a></li> <li><a href="#">爱心品牌联合征集!</a></li> </ul> </div> <div class="mod"> <ul> <li><a href="#">淘宝之行大众评审赢公益金</a></li> <li><a href="#">爱心品牌联合征集</a></li> <li><a href="#">走进无声课堂</a></li> <li><a href="#">名公益机构淘宝开店攻略</a></li> </ul> </div> <div class="mod"> <ul> <li><a href="#">走进无声课堂</a></li> <li><a href="#">淘宝之行大众评审赢公益金</a></li> <li><a href="#">爱心品牌联合征集</a></li> <li><a href="#">名公益机构淘宝开店攻略</a></li> </ul> </div> </div> </div> </body> </html>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送