文档章节

jQurey导航

蒙娜丽莎对我笑了
 蒙娜丽莎对我笑了
发布于 2014/06/10 11:05
字数 519
阅读 20
收藏 0
点赞 0
评论 0
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<title>导航</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-1.7.2.min.js"></script>
<!--[if IE 6]>
	<script src="js/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>
	DD_belatedPNG.fix('body,.nav');
	</script>
<![endif]-->
</head>
<body>
		<div class="nav">
			<ul class="clearfix">
				<li><a href="#">首页</a></li>
				<li><a href="#">公司简介</a></li>
				<li><a href="#">行业资讯</a></li>
				<li id="pro"><a href="#">产品中心</a>
					<dl>
		        <dd><a href="#">组织芯片产品</a></dd>
		        <dd><a href="#">组织芯片定制</a></dd>
					</dl>
				</li>
				<li id="jy"><a href="#">基因检测</a>
						<dl>
							<dd><a href="#">无创产前DNA检测</a></dd>
							<dd><a href="#">单基因病遗传检测</a></dd>
							<dd><a href="#">新生儿耳聋基因检测</a></dd>
							<dd><a href="#">新生儿遗传代谢检测</a></dd>
							<dd><a href="#">Y染色体DNA检测</a></dd>
		        </dd>
					</dl>				
				</li>
				<li id="gxh"><a href="#">个性化用药</a>
					<dl>
							<dd><a href="#">孕期叶酸代谢</a></dd>
							<dd><a href="#">基因检测</a></dd>
					</dl>				
				</li>
				<li><a href="#">联系我们</a></li>
				<li><a href="#">在线留言</a></li>
			</ul>
		</div>	
		<script type="text/javascript">
				$(function(){
						$(".nav li").hover(function()
						{
								$(this).addClass("select");
						},function()
						{
								$(this).removeClass("select");
						})
				})
		</script>
</body>
</html>

@charset "utf-8";
/*
* 	CSS Document
*	Author:Mr.Huang
*	Email:737061077@qq.com	
* 	LastModify:2014/06/10
*/

/*ResetCss*/
body,div,ul,ol,li,dl,dt,dd,a,
input,select,textarea,
pre,q,blockquote,fieldset,lengend,p,
form,button,h1,h2,h3,h4,h5,h6,table,tr,td {
	margin:0px;
	padding:0px;
}
body {
	background:#fff url(../images/header_bg.png) repeat-x left top;
	font-family:tahoma,"\5b8b\4f53";
	font-size:12px;
	font-weight:normal;
	color:#555;
}
ul li {list-style:none;text-decoration:none;}
a {text-decoration:none;color:#555;}
a:visited:{color:#555;}
a:hover {text-decoration:none;color:#555;}
img,a img {border:none;vertical-align:middle;-ms-interpolation-mode:bicubic;}
input,select {vertical-align:middle;overflow:visible;}
table {border-collapse:collapse;border-spacing:0;}


.nav{margin:100px auto 0px auto;width:950px;height:39px;z-index:99;position:relative;}
.nav ul li{float:left;height:39px;background:url(../images/navBor.png) no-repeat right center; overflow:hidden;padding:0 2px 0 0px;}
.nav ul li a{display:block;float:left;height:39px;font:500 14px/39px "Microsoft Yahei",tahoma;color:#FFF !important;padding:0 25px;}
.nav li dl {display: none;}
.nav .select dl{
		display:block;
		position:absolute;
		width:120px;
		left:0px;
		top: 39px;
}
.nav .select dl dd {
		width:180px;
		height:32px;
		opacity:0.95;
		filter:Alpha(opacity=95);
		text-align:center;
		background:#3E7DC9 url(../images/nav.png) left top repeat-x;
}
.nav .select dl dd a {
	display:block;
	color: #8aa9cf;
	height:32px;
	line-height:32px;
}
.nav #pro dl {
		left:280px;
		width:180px;
}
.nav #jy dl {
		left: 370px;
		width:180px;
}
.nav #gxh dl {
		left:510px;
		width:180px;
}


© 著作权归作者所有

共有 人打赏支持
蒙娜丽莎对我笑了
粉丝 0
博文 2
码字总数 1276
作品 0
黄冈
多级菜单制作总结

在制作多级菜单的过程中,遇到了一些问题,花费了几天的时间才解决,途中几乎都想放弃自学了,但是还是坚持下来了。希望我的经历能帮助到自学的大家;如有前辈指教的话就更好了! 1:效果图:...

yujide ⋅ 2016/05/17 ⋅ 1

jqurey学习碎片-0001-jquery初识入门

十多年一直在做传统公司的运营与管理,公司也逐步交给其他股东来做。基于兴趣,再次接触编程,宁静有趣的世界,从现在开始坚持编程学习的记录。1、关于十多年前的前端开发,记得09年初年初识...

wx599c47c7bdcad ⋅ 2017/12/16 ⋅ 0

jqurey mobile页面转场后,怎么呼出手机键盘?

jqurey mobile页面转场后,怎么呼出手机键盘? 比如,点评论的时候,转到一个输入框页面,这时候手机键盘已经默认弹出来了。 请哪位高手帮忙解答一下。谢谢!

venpoo ⋅ 2013/05/08 ⋅ 3

10 个非常有用的 jQuery 插件

1. jQuery Plugins For Overlay 2. GMAP3 jQuery Plugin 3. Simple Tooltip jQuery 4. jQuery Frome Validation engine Pulgin 5. Space Gallery Pulgin 6. Drop Down With CSS and jQuery 7......

红薯 ⋅ 2011/07/09 ⋅ 4

调用Bootstrap.js 报错 "e is not a function"

这是关于Bootstrap.js的报错TypeError:e is not a function. !function(e){... 还有关于jqurey.paper.js 的报错 ReferenceError:jQuery is not defined ...})(jQuery) 还有自定义的js中 报错......

切切 ⋅ 2013/11/28 ⋅ 3

如何修改套版語法的圖片(左/右的電話圖形)?

我本身會HTML、CSS跟一些jQurey 但是我都是自學的,所以不是專業的想知道如何換圖跟做網站的一些語法。因為只是換圖語法,非常簡單。我是從這裡抓套版語法的http://codepen.io/romswellparia...

jackie_hung ⋅ 2016/08/24 ⋅ 0

求助 Jsp cookie 问题

访问路径www.xxx.com:8080/项目路径 使用环境: Tomcat7.0 ,设置cookie是在struts2的Action中进行的,请求为Jqurey.form提交的Ajax请求。 设置的cookie在本地用localhost测试正常,上传服务器...

unknown ⋅ 2012/04/18 ⋅ 2

12306前台页面技术

通过火狐浏览器,查看源代码的方式我看到12306某个页面引用的东西, 1、jquery-1.4.2.min.js; 2、jquery.easyui.min.js 和easyui.css 实现可拖动的表格(他把样式改了); 3、jquery-ui-1.8.2...

fanyongwei3 ⋅ 2013/02/06 ⋅ 10

11个jQuery表单元素美化插件

因为浏览器兼容性的原因,表单元素往往是整个网页设计过程中最难以美化的,尤其是单选按钮、下拉选择框和复选框。不过我们可以通过jquery来美化它样。下面为大家推荐11个简单易用的jQurey插件...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

jqurey操作radio总结

在我们前端的项目中,会经常用到radio单选按钮,下面给出个例子总结jquery对radio的各种操作: 示例如下: <html><head> <meta charset="UTF-8"> <title>radio </title> <script type="text......

双月通天 ⋅ 2015/05/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从 Confluence 5.3 及其早期版本中恢复空间

如果你需要从 Confluence 5.3 及其早期版本中的导出文件恢复到晚于 Confluence 5.3 的 Confluence 中的话。你可以使用临时的 Confluence 空间安装,然后将这个 Confluence 安装实例升级到你现...

honeymose ⋅ 17分钟前 ⋅ 0

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部