DIV + CSS 样式滑动门经典案例跟大家分享

yzz9i

浏览: 221180 次
性别:
来自: 湖南

最近访客更多访客>>

weswe154

xueshanfeizhu

等到音信断绝

jadechenfei

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

CSS XHTML HTML

//css 样式源码

/*全局样式*/
*{
	font-size:12px;
}
body{
	margin:0;
	padding:0;
	background-color:#FFFFFF;
	font-size:12px;
	color:#666666;
	font-family: "宋体",Arial, Helvetica, sans-serif;
}


/*主导航菜单*/
#menu ul{
	padding:0;
	border:0;
	list-style:none;
	line-height:150%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 15px;
}
#menu_out{
	width:966px;
	padding-left:4px;
	margin-left:auto;
	margin-right:auto;
	background:url(Myskin/menu_left.gif) no-repeat left top;
}
#menu_in{
	background:url(Myskin/menu_right.gif) no-repeat right top;
	padding-right:4px;
}
#menu{
	background:url(Myskin/menu_bg.gif) repeat-x;
	height:73px;
}
.menu_line{
	background:url(Myskin/menu_line.gif) no-repeat center top;
	width:8px;
}
.menu_line2{
	background:url(Myskin/menu_line2.gif) no-repeat center top;
	width:15px;
}
#nav{
	padding-left:20px;
}
#nav li{
	float:left;
	height:35px;
}
#nav li a{
	float:left;
	display:block;
	padding-left:6px;
	height:35px;
	background:url(Myskin/menu_on_left.gif) no-repeat left top;
	cursor:pointer;
	text-decoration:none;
}
#nav li a span{
	float:left;
	padding:11px 14px 10px 10px;
	line-height:14px;
	background:url(Myskin/menu_on_right.gif) no-repeat right top;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
}
#nav li .nav_on{   /*鼠标经过时变换背景，方便JS获取样式*/
	background-position:left 100%;
}
#nav li .nav_on span{  /*鼠标经过时变换背景，方便JS获取样式*/
	background-position:right 100%;
	color:#333333;
	text-decoration:none;
	padding:14px 14px 7px 10px;
}
/*子栏目*/
#menu_con{
	text-align:left;
	padding-left:20px;
	clear:both;
}
#menu_con li{
	float:left;
	height:22px;
	margin-top:8px;
}
#menu_con li a{
	display:block;
	float:left;
	background:url(Myskin/menu_on_left2.gif) no-repeat left top;
	cursor:pointer;
	padding-left:3px;
}
#menu_con li a span{
	float:left;
	padding:6px 10px 4px 10px;
	line-height:12px;
	background:url(Myskin/menu_on_right2.gif) no-repeat right top;
}
#menu_con li a:hover{
	text-decoration:none;
	background:url(Myskin/menu_on_left2.gif) no-repeat left bottom;
}
#menu_con li a:hover span{
	background:url(Myskin/menu_on_right2.gif) no-repeat right bottom;
}

// html 页面源码

<!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" lang="zh-CN">
<head>
<title>漂亮滑动门</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
#a {
	width: 970px;
	font-size: 14px;
	text-align: center;
	color: #000000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
-->
</style>
</head>
<body>

<br />
<br />


<script language="javascript">
	function qiehuan(num){
		for(var id = 0;id<=9;id++)
		{
			if(id==num)
			{
				document.getElementById("qh_con"+id).style.display="block";
				document.getElementById("mynav"+id).className="nav_on";
			}
			else
			{
				document.getElementById("qh_con"+id).style.display="none";
				document.getElementById("mynav"+id).className="";
			}
		}
	}
</script> 
<div id=menu_out>
<div id=menu_in>
<div id=menu>
<UL id=nav>
<LI><A class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0) href="/"><SPAN>首 页</SPAN></A></LI>

<LI class="menu_line"></LI><li><a href="#" onmouseover="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>AAA</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(2)" id="mynav2" class="nav_off"><span>AAA</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(3)" id="mynav3" class="nav_off"><span>BBB</span></a></li>
<li class="menu_line"></li>
<li><a href="#" onmouseover="javascript:qiehuan(4)" id="mynav4" class="nav_off"><span>CCCC</span></a></li>
<li class="menu_line"></li>
<li><a href="#" onmouseover="javascript:qiehuan(5)" id="mynav5" class="nav_off"><span>DDDD</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(6)" id="mynav6" class="nav_off"><span>EEE</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(7)" id="mynav7" class="nav_off"><span>FFF</span></a></li><li class="menu_line"></li> 
<LI><A class=nav_off id=mynav8 onmouseover=javascript:qiehuan(8) href="#"><SPAN>GGG</SPAN></A></LI>
<LI class=menu_line></LI>
<LI><A class=nav_off id=mynav9 onmouseover=javascript:qiehuan(9) href="#" target=_blank><SPAN>HHH</SPAN></A></LI>
<LI class=menu_line></LI>
</UL>
<div id=menu_con><div id=qh_con0 style="DISPLAY: block">
<UL>
  <LI><a href="http://www.websjy.com"><span>出处:设计源 http://www.websjy.com</span></A></LI>
  <LI class=menu_line2></LI><LI><A href="#"><SPAN>test</SPAN></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>test1</SPAN></A></LI></UL></div> 
<div id=qh_con1 style="DISPLAY: none">
<UL><LI><a href="http://www.websjy.com"><span>出处:设计源 http://www.websjy.com</span></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>aaaaaaaaaaaaaaaaaaa</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con2 style="DISPLAY: none">
<UL><LI><a href="http://www.websjy.com"><span>出处:设计源 http://www.websjy.com</span></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>bbbbbbbbbbbbbbbbbb</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con3 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>ccccccccccccccccccc</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con4 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>ddddddddddddddddddd</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con5 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>eeeeeeeeeeeeeeee</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con6 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>fffffffffffffffffff</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con7 style="DISPLAY: none">
<UL><LI><A href="#"><SPAN>gggggggggggggggg</SPAN></A></LI><LI class=menu_line2></LI></UL></div> 
<div id=qh_con8 style="DISPLAY: none">
<UL><LI>##############################</LI></UL></div>
<div id=qh_con9 style="DISPLAY: none">
<UL><LI>###############################</LI></UL></div> </div></div></div></div> 

<br /><br />
</body>
</html>

完整的还需要图片。下面的下载提供完整的案例，下载运行即可

如果觉得好，给个评价。谢谢

经典滑动门div_css.rar (25.9 KB)
下载次数: 31

分享到：

一个简单功能强大的Google Map 搜索源码 ... | org.hibernate.exception.SQLGrammarExcept ...

2011-05-15 17:54
浏览 1119
评论(1)
分类:Web前端
查看更多

1 楼 lisgking 2011-05-20

不错，收下了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

DIV + CSS 样式滑动门经典案例跟大家分享

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

DIV + CSS 样式 滑动门经典案例 跟大家分享

评论

发表评论

相关推荐

JAVA 执行可执行文件的方法整理

springMVC 框架敏捷搭建

一个文本框输入显示提示的js 页面代码

(JAVA)未登录获取系统数据，例如一些公告之类的展示数据

encodeURIComponent 与 decodeURIComponent 编码互转

c:foreach 中jsp页面 中怎么对时间类型进行格式化问题

留言板回复html模板代码 [用的时候直接copy]

怎么控制 显示 DIV 里面的 字数 只显示部分文字

FCKeditor 在jsp [ssh 框架中]中怎么调用 实现 图片上传/文件浏览【自己看文档摸索出来的】跟大家一块分享

txt文件上传数据 批量解析批量存入数据库方法操作（1）

txt解析经典测试（2）

一个简单功能强大的Google Map 搜索源码 【我在CSDN上也有发布】

Write operations are not allowed in read-only mode (FlushMode.NEVER/MANUAL)..

dwr 动态创建表. 主键查询加载数据显示【javascript 中实现】

框架必知必熟的基础【笔记】

最近访客更多访客>>

DIV + CSS 样式滑动门经典案例跟大家分享

c:foreach 中jsp页面中怎么对时间类型进行格式化问题

怎么控制显示 DIV 里面的字数只显示部分文字

FCKeditor 在jsp [ssh 框架中]中怎么调用实现图片上传/文件浏览【自己看文档摸索出来的】跟大家一块分享

txt文件上传数据批量解析批量存入数据库方法操作（1）

一个简单功能强大的Google Map 搜索源码【我在CSDN上也有发布】