css 菜单， 但不兼容IE8

于 2014-03-17 08:18:23 发布
阅读量1.1k 收藏
点赞数
分类专栏： 网页JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wxljmy77/article/details/21368543
版权
<%@ page language="java" import="java.util.*,java.text.SimpleDateFormat" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%
    //获取当天的日期和星期几
    Date date=new Date();
    SimpleDateFormat sdf=new SimpleDateFormat("yyyy年MM月dd日");
    String today=sdf.format(date);
    GregorianCalendar gc=new GregorianCalendar();
    gc.setTime(date);
    int i=gc.get(GregorianCalendar.DAY_OF_WEEK)-1;
    String sweek="";
    if(i==0) sweek="星期天";if(i==1) sweek="星期一";if(i==2) sweek="星期二";if(i==3) sweek="星期三";
    if(i==4) sweek="星期四";if(i==5) sweek="星期五";if(i==6) sweek="星期六";
 %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>开封农业机械化学校</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{font-size: 13px;}
        ul{margin: 0;padding: 0;list-style: none;}
        a{text-decoration: none;color: #000;}
        /*主菜单*/
        #wrap {
            position: relative;
            top: 0px;
            width: 650px;                  /*主菜单总宽度*/
            height: 34px;
            line-height: 34px;
            margin: 0;
            background-color:white;        /*菜单条背景*/
            padding:0;
        }
        
        ul#menu li {
            float: left;
            display: block;
            width: 80px;                   /*每个主菜单宽度*/
            height: 37px;
            line-height: 37px;
            text-align: center;
            margin-right: 1px;
            padding:0;
        }
        
        ul#menu li a:link {
            display: block;
            background: #EDEBEC;            /*主菜单背景色,没有访问过时*/
            font-size: 14px;
            color: #333;
            width: 80px;                    /*关联主菜单宽度*/
            height: 37px;
            line-height: 37px;
        }
        
        /*主菜单,鼠标悬停的背景和字体颜色*/
        ul#menu li a:hover,.red {
            background: #CE070E; /*!important; */
            color: #FFF; /* !important;*/
        }
        
        /*子菜单*/
        ul#menu li ul {
            position: absolute;
            top: 37px;
            width: 100px;                    /*关联主菜单宽度*/
            display: none;
            border: 1px #0a8fda solid;      /*子菜单边框颜色*/
            border-top: none;
            background: #FFF;
        }
        
        ul#menu li ul li {
            float: left;        
        }
        
        /*子菜单背景色，没访问过时，即默认*/
        ul#menu li ul li a:link {
            width: 100px;                    /*关联主菜单宽度*/
            height: 36px;                    /*影响子菜单分隔线粗细,比ul高度小1*/     
            line-height: 37px;
            background: #c2e1fc;            /*子菜单背景色#A0D5FC*/
            color:#4682B4;                  /*007FFF*/
            font-family:宋体;
            font-size:13px;
        }

        /*子菜单背景色,鼠标悬停的背景和字体颜色*/
        ul#menu li ul li a:hover {
            height: 36px;                   /*影响子菜单分隔线粗细,比ul高度小1*/
            background: #6bbceb;            /*子菜悬停背景色  #6bbceb*/
            color: #000000;
            text-decoration: none;    
            color:#664444;
            font-family:宋体;
            font-size:13px;    

        }
        /*子菜单背景色、宽、高等*/
        ul#menu li ul li {
            width: 100px;                    /*关联主菜单宽度*/
            height: 37px;
            line-height: 37px;
            float: left;
            background-color:skyblue;        /*影响子菜单分隔线颜色*/
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript" language="javascript">
    $(function(){
        try{
             $("ul#menu>li:has(ul)").hover(
              function(){
               $(this).children('a').addClass('red').end().find('ul').fadeIn(100);
              },
              function(){
               $(this).children('a').removeClass('red').end().find('ul').fadeOut(100);
              }
             );
         }catch(e){}
         //
         try
         {
            var speed=30;
            gpic2.innerHTML=gpic1.innerHTML;
            //alert(gpic.innerHTML);
            function MarqueePic()
            {
                if(gpic2.offsetWidth-gpic.scrollLeft<=0)
                    gpic.scrollLeft-=gpic1.offsetWidth;
                else
                {
                    gpic.scrollLeft++;
                }
            }
            var MyMar=setInterval(MarqueePic,speed);
            gpic.οnmοuseοver=function() {clearInterval(MyMar)};
            gpic.οnmοuseοut=function() {MyMar=setInterval(MarqueePic,speed)};
        }catch(e){}    
    });
    </script>    
</head>

<body>
<div align="center">
    <div style="width:1000px; background-color:">
        <!-- 导航菜单层 -->
        <div>
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="332" height="70">
                        <!-- logo图片 -->
                        <table width="333" border="0">
                            <tr>
                                <td width="339">
                                    &nbsp;
                                    <div align="center">
                                        <a href="http://www.htu.cn"><img
                                                src="image/main_logo.jpg" width="320" height="53"
                                                border="0" /> </a>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>

                    <td valign="bottom" >
                        <div style="font-size:13px;" align="center">
                            <!--  
                            <marquee direction="left" scrollamount="2"  οnmοuseοver="stop()" οnmοuseοut="start()"></marquee>
                            -->
                                欢迎光临<span style="color:red;">开封市农业机械化学校</span>!
                                今天是<span style="color:darkgreen;"><%=today %></span>,<%=sweek %>
                        </div>
                        <!-- 横向菜单导航条，css固定结构，不可乱改 -->
                        <div id="wrap">
                          <ul id="menu">
                            <li><a href="index_main.jsp" target="iframepage" title="网站首页"><img src="image/index/mainmenu_wzsy.png"/></a></li>
                            <li><a href="javascript:;" title="学校概况"><img src="image/index/mainmenu_xxgk.png"/></a>
                              <ul>
                                <li><a href="index_sub.jsp?pagename=school_introduce.htm" target="iframepage">
                                    学校简介</a></li>
                                <li><a href="index_sub.jsp?pagename=school_idea.htm" target="iframepage">
                                    办学思想</a></li>
                                <li><a href="index_sub.jsp?pagename=school_leaders.htm" target="iframepage">
                                    现任领导</a></li>
                                <li><a href="index_sub.jsp?pagename=school_master.htm" target="iframepage">
                                    校长寄语</a></li>
                                <li><a href="index_sub.jsp?pagename=school_view.htm" target="iframepage">
                                    校园风光</a></li>
                                <li><a href="index_sub.jsp?pagename=school_contact.htm" target="iframepage">
                                    联系我们</a></li>
                              </ul>
                            </li>
                            
                            <li><a href="#" ><img src="image/index/mainmenu_zysz.png"/></a>
                              <ul>
                                <li><a href="index_sub.jsp?pagename=department_car.htm" target="iframepage">
                                    汽车工程系</a></li>
                                <li><a href="index_sub.jsp?pagename=department_agriculture.htm" target="iframepage">
                                    农机工程系</a></li>
                                <li><a href="index_sub.jsp?pagename=department_machine.htm" target="iframepage">
                                    机械工程系</a></li>
                                <li><a href="index_sub.jsp?pagename=department_electronic.htm" target="iframepage">
                                    电气工程系</a></li>
                                <li><a href="index_sub.jsp?pagename=department_computer.htm" target="iframepage">
                                    计算机科学系</a></li>
                              </ul>
                            </li>
                            <li><a href="#" ><img src="image/index/mainmenu_jxky.png"/></a>
                              <ul>
                                <li><a href="index_sub.jsp?pagename=study_teacher.htm" target="iframepage">
                                    教师队伍</a></li>
                                <li><a href="index_sub.jsp?pagename=study_fact.htm" target="iframepage">
                                    实践教学</a></li>
                              </ul>                            
                            </li>
                            <li><a href="#" ><img src="image/index/mainmenu_zsjy.png"/></a>
                              <ul>
                                <li><a href="index_sub.jsp?pagename=findwork_info.htm" target="iframepage">
                                    招生政策</a></li>
                                <li><a href="index_sub.jsp?pagename=findwork_corporation.htm" target="iframepage">
                                    校企合作</a></li>
                                <li><a href="index_sub.jsp?pagename=findwork_worked.htm" target="iframepage">
                                    就业情况</a></li>
                                <li><a href="index_sub.jsp?pagename=findwork_ask.htm" target="iframepage">
                                    在线咨询</a></li>
                              </ul>                                    
                            </li>
                            <li><a href="index.jsp" target="iframepage"><img src="image/index/mainmenu_zzjg.png"/></a>
                              <ul>                      
                                <li><a href="index_sub.jsp?pagename=group_party.htm" target="iframepage">
                                    党群部门</a></li>
                                <li><a href="index_sub.jsp?pagename=group_policy.htm" target="iframepage">
                                    行政部门</a></li>
                                <li><a href="index_sub.jsp?pagename=group_department.htm" target="iframepage">
                                    教学部门</a></li>
                                <li><a href="index_sub.jsp?pagename=group_worker.htm" target="iframepage">
                                    工会</a></li>
                                <li><a href="index_sub.jsp?pagename=group_leader.htm" target="iframepage">
                                    领导职责</a></li>                                            
                              </ul>                        
                            </li>
                            <li><a href="#" ><img src="image/index/mainmenu_xsgz.png"/></a>
                              <ul>
                                <li><a href="index_sub.jsp?pagename=student_heart.htm" target="iframepage">
                                    校园文化</a></li>
                                <li><a href="index_sub.jsp?pagename=student_news.htm" target="iframepage">
                                    团青新闻</a></li>
                                <li><a href="index_sub.jsp?pagename=student_help.htm" target="iframepage">
                                    学生资助</a></li>
                              </ul>                                    
                            </li>
                            <li><a href="#" ><img src="image/index/mainmenu_sfjs.png"/></a>
                              <ul>
                                <li><a href="index_sub.jsp?pagename=build_findway.htm" target="iframepage">
                                    理论探索</a></li>
                                <li><a href="index_sub.jsp?pagename=build_news.htm" target="iframepage">
                                    建设动态</a></li>
                                <li><a href="index_sub.jsp?pagename=build_policy.htm" target="iframepage">
                                    政策文件</a></li>
                                <li><a href="index_sub.jsp?pagename=build_download.htm" target="iframepage">
                                    资料下载</a></li>
                              </ul>                                
                            </li>
                          </ul>
                        </div>    
                    </td>
                </tr>
            </table>    
        </div>                        

        <!-- 导航宣传图片 -->
        <div>
            <img src="image/main_tophead3.jpg" width="1002" height="226" />
        </div>

        <!-- 首页中间iframe -->
        <div>
            <script type="text/javascript" language="javascript">   
                function iFrameHeight() {   
                var ifm= document.getElementById("iframepage");
                //必须获取iframe的document,才能得到iframe页面内的内容高度。  
                //ie6,ie7document.frames["iframepage"].document
                //ie8,firefox用的是ifm.contentDocument
                var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   
                if(ifm != null && subWeb != null) {
                   ifm.height=0;
                   ifm.height = subWeb.body.scrollHeight;
                }   
                }   
            </script>      

                    <!-- iframe左边空15px，是为了和大图配合，大图左边留白了15px -->
                    <iframe src="index_main.jsp" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="1002px" onLoad="iFrameHeight();" >
                    </iframe>
        </div>
        
        <!-- 图片滚动展示器 -->
        <div id="gpic" style="overflow:hidden; width:100%; height:102px;">
            <style type="text/css">
            <!--
            #demo {
            background: #FFF;
            overflow:hidden;
            border: 1px dashed #CCC;
            width: 1000px;
            }
            #demo img {
            border: 3px solid #F2F2F2;
            }
            #indemo {
            float: left;
            width: 800%;
            }
            #demo1 {
            float: left;
            }
            #demo2 {
            float: left;
            }
            -->
            </style>
            <div id="demo">
            <div id="indemo">
            <div id="demo1">
            <a href="#"><img src="image/index/scrollpic_1.jpg" style="width:160px;height:100px;" border="0" /></a>
            <a href="#"><img src="image/index/scrollpic_2.jpg" style="width:160px;height:100px;" border="0" /></a>
            <a href="#"><img src="image/index/scrollpic_3.jpg" style="width:160px;height:100px;" border="0" /></a>
            <a href="#"><img src="image/index/scrollpic_4.jpg" style="width:160px;height:100px;"  border="0" /></a>
            <a href="#"><img src="image/index/scrollpic_5.jpg" style="width:160px;height:100px;"  border="0" /></a>
            <a href="#"><img src="image/index/scrollpic_6.jpg" style="width:160px;height:100px;"  border="0" /></a>
            <a href="#"><img src="image/index/scrollpic_7.jpg" style="width:160px;height:100px;"  border="0" /></a>
            <a href="#"><img src="image/index/scrollpic_8.jpg" style="width:160px;height:100px;"  border="0" /></a>
            <a href="#"><img src="image/index/scrollpic_9.jpg" style="width:160px;height:100px;"  border="0" /></a>
            <a href="#"><img src="image/index/scrollpic_10.jpg" style="width:160px;height:100px;"  border="0" /></a>            
            </div>
            <div id="demo2"></div>
            </div>
            </div>
            <script>
            <!--
            var speed=20;
            var tab=document.getElementById("demo");
            var tab1=document.getElementById("demo1");
            var tab2=document.getElementById("demo2");
            tab2.innerHTML=tab1.innerHTML;
            function Marquee(){
            if(tab2.offsetWidth-tab.scrollLeft<=0)
            tab.scrollLeft-=tab1.offsetWidth
            else{
            tab.scrollLeft++;
            }
            }
            var MyMar=setInterval(Marquee,speed);
            tab.οnmοuseοver=function() {clearInterval(MyMar)};
            tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
            -->
            </script>         
        </div>
        
        <!-- 页脚 -->
        <div><img src="image/main_footerbg.png"/></div>
        <div style="height:10px;"></div>
        <div id="foot" align="center">
            <div>
                快速链接：
                <a target="_blank" href="http://www.amic.agri.gov.cn/nxtwebfreamwork/html/amic/index.htm">中国农业机械化信息网</a>  &nbsp;|&nbsp;
                <a target="_blank" href="http://www.caams.org.cn/">中国农业机械化科学研究院</a>  &nbsp;|&nbsp;
                <a target="_blank" href="http://www.cama.org.cn/njxh/">中国农业机械化协会</a>  &nbsp;|&nbsp;
                <a target="_blank" href="http://www.hnnj.gov.cn/">河南省农机信息网</a>  &nbsp;|&nbsp;
                <a target="_blank" href="http://www.kfnjxxw.net/index.asp">开封市农机信息网</a>  &nbsp;|&nbsp;    
                <a target="_blank" href="http://www.kfedu.com.cn/">开封市教育网</a>  &nbsp;&nbsp;    
            </div>
            
            <div style="height:10px;"></div>
            <div align="center" style="height:25px;color:#555555;">
                版权所有:开封农业机械化学校<span style="font-family:Arial;">&copy;</span>2014 &nbsp;&nbsp;&nbsp;&nbsp;
                办公电话:0371-21234567 21234567&nbsp;&nbsp;&nbsp;&nbsp;
                地址：************                              
            </div>
            
            <div align="center" style="height:25px;color:#555555;">
                总访问量:12345678&nbsp;&nbsp;豫ICP备00000001号
            </div>            
        </div>  <!-- 页脚 -->
    </div>  <!-- 控制内容宽度，两边留白 -->
</div>  <!-- 控制整体居中 -->
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值