• 【荐】jQuery+Css打造位于网页顶部漂亮黄色下拉导航


    代码简介:

    一款jquery制作的下拉风格导航,用在网页的顶部,大气又不占地方,值得推荐给您,单击运行,您就能看见效果。

    代码内容:

    <!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=gbk" />
    <title>【荐】jQuery+Css打造位于网页顶部漂亮黄色下拉导航_网页代码站(www.webdm.cn)</title>
    
    <script type="text/javascript" src="http://www.webdm.cn/images/20091029/jquery.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
    
    	$(".btn-slide").click(function(){
    		$("#panel").slideToggle("slow");
    		$(this).toggleClass("active"); return false;
    	});
    	
    	 
    });
    </script>
    
    <style type="text/css">
    body {
    	margin: 0 auto;
    	padding: 0;
    	 570px;
    	font: 75%/120% Arial, Helvetica, sans-serif;
    }
    a:focus {
    	outline: none;
    }
    #panel {
    	background: #754c24;
    	height: 200px;
    	display: none;
    }
    .slide {
    	margin: 0;
    	padding: 0;
    	border-top: solid 4px #422410;
    	background: url(http://www.webdm.cn/images/20091029/btn-slide.gif) no-repeat center top;
    }
    .btn-slide {
    	background: url(http://www.webdm.cn/images/20091029/white-arrow.gif) no-repeat right -50px;
    	text-align: center;
    	 144px;
    	height: 31px;
    	padding: 10px 10px 0 0;
    	margin: 0 auto;
    	display: block;
    	font: bold 120%/100% Arial, Helvetica, sans-serif;
    	color: #fff;
    	text-decoration: none;
    }
    .active {
    	background-position: right 12px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="panel">
    	<p style="margin: 5px;color: #fff;line-height:20px;">网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br></p>
    </div>
    
    <p class="slide"><a href="#" class="btn-slide">网页代码站</a></p>
    
    <p>看不到效果请您刷新本页面</p>
    
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/d4bd35ce-46c7-45e5-b584-14f962f46ba0.html

  • 相关阅读:
    (五)Oracle学习笔记—— 视图
    (四)Oracle学习笔记—— 常见函数
    (三)Oracle学习笔记—— sql语句
    (二)Oracle学习笔记—— 序列
    mybatis部分版本异常invalid comparison: java.util.Date and java.lang.String
    spring 配置多数据源 (案例)
    spring 配置多数据源 (可行)
    使用Maven编译项目遇到——“maven编码gbk的不可映射字符”解决办法
    Java三大器之过滤器(Filter)的工作原理和代码演示
    Java三大器之监听器(Listener)的工作原理和代码演示
  • 原文地址:https://www.cnblogs.com/webdm/p/2033282.html
Copyright © 2020-2023  润新知