css 菜单， 但不兼容IE8

其他 2019-03-04 15:09:34 阅读次数: 0
<%@ 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.onmouseover=function() {clearInterval(MyMar)};
            gpic.onmouseout=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"  onmouseover="stop()" onmouseout="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.onmouseover=function() {clearInterval(MyMar)};
            tab.onmouseout=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>

猜你喜欢

转载自blog.csdn.net/wxljmy/article/details/21368543
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022