• 滑动门 js css


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>▒ 恋婷滑动门技术</title>
    
    <style media="screen" type="text/css">
    
    <!--
    
    *{font-size:14px; padding:0; margin:0;}
    
    html,body{margin:0;text-align:center;over-flow:hidden;height:100%;100%;}
    
    UL{list-style-type:none; margin:0px;}
    
    
    
    /* 标准盒模型 */
    
    .gpttl{height:18px;}
    
    .gpctt{height:auto;padding:6px;clear:both;text-align:left;}
    
    .w936{margin:2px 0;clear:both;936px;/*这里调整整个滑动门的宽度*/}
    
    
    
    /* TAB 切换效果 */
    
    .gptb_{ height:32px; background-color:#eee;}
    
    .gptb_ ul{height:32px;}
    
    .gptb_ li{float:left; height:30px;line-height:30px; 94px; cursor:pointer;}
    
    
    
    /* 用于控制显示与隐藏的css类 */
    
    .gpnormaltab   {background-repeat:no-repeat; color:#1F3A87 ;}
    
    .gphovertab    {color:#1F3A87; font-weight:bold; border-bottom:2px solid #669acc; }
    
    .dis{display:block;}
    
    .undis{display:none;}
    
    -->
    
    </style>
    
    <script type="text/javascript" language="javascript">
    
    function g(o){return document.getElementById(o);}
    
    function HoverLi(n){
    
    for(var i=1;i<=3;i++){g('gptb_'+i).className='normaltab';g('gptbc_0'+i).className='undis';}g('gptbc_0'+n).className='dis';g('gptb_'+n).className='gphovertab';}
    
    </script>
    
    </head>
    
    <body>
    
    
    
    <div class="w936">
    
    	<div id="gptb_" class="gptb_">
    
    			<ul>
    
    				<li id="gptb_1" class="gphovertab" onmouseover="x:HoverLi(1);">
    
    				公棚资讯</li>
    
    				<li id="gptb_2" class="gpnormaltab" onmouseover="i:HoverLi(2);">
    
    				协会资讯</li>
    
    				<li id="gptb_3" class="gpnormaltab" onmouseover="a:HoverLi(3);">
    
    				俱乐部资讯</li>
    
    			</ul>
    
    	</div>
    
    	<div class="gpctt">
    
    		<div class="dis" id="gptbc_01">流行音乐 的内容</div>
    
    		<div class="undis" id="gptbc_02">美女写真 的内容</div>
    
    		<div class="undis" id="gptbc_03">平面设计 的内容</div>
    
    	</div>
    
    </div>
    
    </body>
    
    </html>
    
  • 相关阅读:
    tomcat虚拟机配置
    日期时分秒毫秒+3位随机数
    springmvc action访问路径不带项目名
    nginx 配置模板
    AES加密
    spring-mvc里的 <mvc:resources> 及静态资源访问
    MySQL——事务(Transaction)
    mysql索引
    < aop:aspect>与< aop:advisor>的区别
    annotation-driven
  • 原文地址:https://www.cnblogs.com/nanxiaoxiang/p/2729507.html
Copyright © 2020-2023  润新知