html总结 javascript 下拉菜单个人博客入门学习

最新推荐文章于 2016-05-23 09:13:30 发布

TCH987551623

最新推荐文章于 2016-05-23 09:13:30 发布

阅读量111

点赞数

分类专栏： javascript 文章标签： html总结 javascript 下拉菜单个人博客入门学习 ViewUI

本文链接：https://blog.csdn.net/TCH987551623/article/details/84470487

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

首先，在html页面开头加这句话：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

可以避免很多不同浏览器的处理问题

设置背景图片：

#page_header{
	background:url("../../common/images/xxx.png") repeat-x scroll 0 0 transparent;
}

页面代码：

<html>
<head>
<style type="text/css">
body{
	margin:0;
	padding:0;
	font-size:12px;
}
#header{
	background: repeat-x url("header_bg.png") ;
	height:30px;
	width:90%;
	margin:0px auto;//居中
}
#header .logo{
	float:left;
}
#header .member{
	float:right;
	line-height:30px;
	width:100px;
	height:30px;
	background: url("arrow.png") no-repeat 70% center;
	margin:0 auto;
	cursor:pointer;
}
ul{
	position:absolute;
	top:30px;
	left:1198px;
	padding:10px 0 0 0;
	margin:0;
	border:1px solid ;
	border-top:none;
	width:100px;
	height:100px;
	display:none;
}
ul li{
	list-style-type:none;
	height:25px;
	line-height:25px;
	text-indent:20px;
}
ul li a{
	text-decoration:none;
	display:block;
	background:url("arrow3.gif") no-repeat 5px 45%;
}
ul li a:hover{
	background:#fc0 url("arrow4.gif") no-repeat 5px 45%;
}


</style>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript">
	$(function(){
		$("#header .member").hover(
		  function () {
			$("ul").css("display","block");
			$(this).css("background","url(arrow2.png) no-repeat 70% center");
		  },
		  function () {
			$("ul").css("display","none");
			$(this).css("background","url(arrow.png) no-repeat 70% center");
		  }
		);
	});

</script>


</head>
<body>


<div id="header">
	<div class="logo"><image src="logo.gif"></div>
	<div class="member">
		个人中心
		<ul>
			<li><a href="###">修改密码</a></li>
			<li><a href="###">关于我</a></li>
			<li><a href="###">账号中心</a></li>
			<li><a href="###">订单中心</a></li>
		</ul>
	</div>
	
</div>

</body>
</html>

TCH987551623

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html总结 javascript 下拉菜单个人博客入门学习

首先，在html页面开头加这句话： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; 可以避免很多不同浏览器的处理问题设置背景图片： #page_header{...
复制链接

扫一扫