(div+css特效代码) 导航菜单栏

墨蓝 2024-04-17 23:15 34阅读 0赞

截图效果：

![Center][]

Jsp代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
    body {
    	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    }
    
    h1 {
    	font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
    	color: #333;
    	margin: 0;
    	padding: 5px 0;
    }
    
    h1 small {
    	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    	text-transform: uppercase;
    	letter-spacing: 1.5em;
    	display: block;
    	color: #fff;
    }
    
    .container {
    	width: 970px;
    	margin: 0 auto;
    }
    
    ul#topnav {
    	margin: 0;
    	padding: 0;
    	float: left;
    	width: 970px;
    	list-style: none;
    	position: relative;
    	font-size: 1.2em;
    	background: url(images/topnav_s.gif) repeat-x;
    }
    
    ul#topnav li {
    	float: left;
    	margin: 0;
    	padding: 0;
    	border-right: 1px solid #555;
    }
    
    ul#topnav li a {
    	padding: 10px 15px;
    	display: block;
    	color: #f0f0f0;
    	text-decoration: none;
    }
    
    ul#topnav li:hover {
    	background: #1376c9 url(images/topnav_a.gif ) repeat-x;
    }
    
    ul#topnav li span {
    	float: left;
    	padding: 15px 0;
    	position: absolute;
    	left: 0;
    	top: 35px;
    	display: none;
    	width: 970px;
    	background: #1376c9;
    	color: #fff;
    	-moz-border-radius-bottomright: 5px;
    	-khtml-border-radius-bottomright: 5px;
    	-webkit-border-bottom-right-radius: 5px;
    	-moz-border-radius-bottomleft: 5px;
    	-khtml-border-radius-bottomleft: 5px;
    	-webkit-border-bottom-left-radius: 5px;
    }
    
    ul#topnav li:hover span {
    	display: block;
    }
    
    ul#topnav li span a {
    	display: inline;
    }
    
    ul#topnav li span a:hover {
    	text-decoration: underline;
    }
    
    
    
    
    </style>
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
    
    <script type="text/javascript">
    	$(document).ready(function() {
    
    		$("ul#topnav li").hover(function() { //Hover over event on list item
    			$(this).css({
    				'background' : '#1376c9 url(topnav_active.gif) repeat-x'
    			}); //Add background color + image on hovered list item
    			$(this).find("span").show(); //Show the subnav
    		}, function() { //on hover out...
    			$(this).css({
    				'background' : 'none'
    			}); //Ditch the background
    			$(this).find("span").hide(); //Hide the subnav
    		});
    
    	});
    </script>
    
    </head>
    
    <body>
    
    <div class="container">	
    	<h1></h1>
    	<div style="clear: both; display: block; padding-bottom: 20px;">  <ul id="topnav">
            <li><a href="">首页</a></li>
            <li>
                <a href="">关于克明</a>
                <span>
                    <a href="">企业介绍</a> |
                    <a href="">发展历程</a> |
                    <a href="">组织机构</a> |
    				<a href="">企业风采</a> |
                    <a href="">领导关怀</a> |
    				<a href="">企业荣誉</a>
                </span>
            </li>
            <li>
                <a href="">新闻中心</a>
                <span>
                    <a href="">公司新闻</a> |
                    <a href="">行业资讯</a> |
                    <a href="">媒体报道</a>
                </span>
            </li>
            <li>
                <a href="">克明文化</a>
                <span>
                    <a href="">企业文化</a> |
                    <a href="">员工风采</a>               
                </span>
            </li>
            <li><a href="">克明产品</a>
    			 <span>
                    <a href="">挂面</a> |
                    <a href="">调味酱</a>               
                </span>
    		</li>
    		 <li><a href="">品牌推广</a>
    			 <span>
                    <a href="">VI规范</a> |
                    <a href="">品牌推广</a>               
                </span>
    		</li>
    		<li><a href="">售后服务</a>
    			 <span>
                    <a href="">售后服务</a> |
                    <a href="">销售网络</a> | 
    				<a href="">联系我们</a>
                </span>
    		</li> 
    		<li><a href="">投资者服务</a>
    			 <span>
                    <a href="">投资者互动平台</a>                            
                </span>
    		</li>
    		<li><a href="">加入克明</a>
    			 <span>
                    <a href="">人才战略</a> |
                    <a href="">职位需求</a> |   
    				 <a href="">简历提交</a>
                </span>
    		</li>
    		<li><a href="">联系我们</a>
    			
    		</li>
        </ul>
    	
    
    </div>
    <br><br><br><br>
    <div style="text-align:center;clear:both">
    </div>
     
    <div class="content_right">
      <div class="ad" >
        <ul class="slider" >
          <li><a href="#"><img src="images/buttom_0.jpg"/></a></li>
          <li><a href="#"><img src="images/buttom_1.jpg"/></a></li>
          <li><a href="#"><img src="images/buttom_2.jpg"/></a></li>
          <li><a href="#"><img src="images/buttom_3.jpg" /></a></li>
        </ul>
        <ul class="num" >
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    
    
    
    
    
    </body>
    </html>

[Center]: https://img-blog.csdn.net/20130817232247562?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center