- 浏览: 217208 次
- 性别:
- 来自: 湖南
文章分类
- 全部博客 (94)
- jQuery实例 (2)
- 数据库篇章 (13)
- Java杂谈 (5)
- SSH技术 (33)
- 工作流 (3)
- ajax技术 (2)
- Web前端 (13)
- Struts2 笔记 (1)
- Struts1 笔记 (0)
- 软件面试题目 (0)
- DWR技术篇章 (4)
- 智力题集 (4)
- 正则表达式 (3)
- C语言经典实例 (10)
- C语言学习 (1)
- ibatis and lucene (2)
- jsp_javascript (5)
- 单个功能模块实现源码 (2)
- jsp网站 (1)
- Linux (1)
- 文件解析 (5)
- 各种分页方法 (3)
- android (0)
- XML 技术 (1)
- HTTP通信 & XML (0)
- springMVC (0)
- 平台框架 (1)
最新评论
-
aiwei:
可不可以解释一下每个参数的意思?看不明白啊
Java 动态加载jsp页面 在div 刷新这么简单 就可以实现了 -
hzau_chen:
:i
很强大的jsp手写分页插件 实现json 等一些ajax技术 联合查询 模糊查询 条件查询 -
yzz9i:
你想怎么操作?这个是可以直接使用的
jsp里面实现 注册成功后 系统自动发送电子邮件 -
Zhang987526341:
我想请问在数据库里面还要加字段什么的吗,
jsp里面实现 注册成功后 系统自动发送电子邮件 -
tlk20071:
我现在要写一个类似的东西,但是一点都不熟悉,你能不能帮忙讲解一 ...
一个简单功能强大的Google Map 搜索源码 【我在CSDN上也有发布】
//css 样式源码
// html 页面源码
完整的还需要图片。下面的下载提供完整的案例,下载运行即可
如果觉得好,给个评价。谢谢
/*全局样式*/ *{ 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
发表评论
-
JAVA 执行可执行文件的方法整理
2014-04-03 15:29 0一 前言 通过java.lan ... -
springMVC 框架敏捷搭建
2014-04-02 12:21 0敏捷搭建强大注释控制的SpringMVC框架 一、开发环 ... -
一个文本框输入显示提示的js 页面代码
2012-03-27 18:04 0将以下代码执行就有效果了 引用 <!DOCT ... -
(JAVA)未登录获取系统数据,例如一些公告之类的展示数据
2012-01-14 15:30 902在jsp页面上可以 通过Java代码得到 。 <% ... -
encodeURIComponent 与 decodeURIComponent 编码互转
2011-11-25 10:17 1632package com.file; import ... -
c:foreach 中jsp页面 中怎么对时间类型进行格式化问题
2011-09-14 12:00 7585具体实现很简单 就两步走: 引用 <%@ taglib ... -
留言板回复html模板代码 [用的时候直接copy]
2011-08-29 10:57 4962<tr> <td align ... -
怎么控制 显示 DIV 里面的 字数 只显示部分文字
2011-08-29 09:19 4210在 DIV 里面加如下 样式就可以了。 <div st ... -
FCKeditor 在jsp [ssh 框架中]中怎么调用 实现 图片上传/文件浏览【自己看文档摸索出来的】跟大家一块分享
2011-08-25 14:58 22811:下载 解压FCKeditor_2.6.4.1.zip ... -
txt文件上传数据 批量解析批量存入数据库方法操作(1)
2011-08-06 16:15 2600/** *常用方法 * ... -
txt解析经典测试(2)
2011-08-06 16:08 943package com.file; import j ... -
一个简单功能强大的Google Map 搜索源码 【我在CSDN上也有发布】
2011-05-16 18:17 2455单独页面功能。google Map 搜索功能 引用 < ... -
Write operations are not allowed in read-only mode (FlushMode.NEVER/MANUAL)..
2011-01-11 20:28 1838在保存时候总是弹出对话框: Write operations ... -
dwr 动态创建表. 主键查询加载数据显示【javascript 中实现】
2011-01-03 18:47 1271dwr 动态创建表的几个步骤: 前提 :dwr ... -
框架必知必熟的基础【笔记】
2010-12-31 17:41 781一. 框架frameset/frame ...
相关推荐
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示,可以根据窗口的大小自动调节所显示的大小! DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格...
div+css+js的纵向滑动门代码,在网页中显示左右滑动的tab标签
div +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +css
div+css,web标准,div+css布局,div+css实例,div+css模板
div+css div+css精通CSS
Div+CSS 3.0网页布局案例精粹
div+css 网站布局案例精粹 袁润非 div+css 网站布局案例精粹 袁润非 div+css 网站布局案例精粹 袁润非 div+css 网站布局案例精粹 袁润非 div+css 网站布局案例精粹 袁润非 div+css 网站布局案例精粹 袁润非 div+css ...
div+css布局制作箭头步骤流程样式 - div+css教程 案例源码 志峰创业室提供技术支持微信公众平台开发,是移动互联网开发API供应商,是移动互联解决供应商
《DIV+CSS 3.0:网页布局案例精粹》系统地介绍了CSS样式的基础理论和实际应用技术,并结合实例来介绍使用Div+CSS布局制作网页的方法和技巧。在介绍使用CSS样式进行设计的同时,还结合实际网页制作中可能遇到的问题,...
div+css手册,比较不错呀!
通过对十个经典案例进行分析,分别从不同类型网站的布局风格以及实现方法来讲解DIV+CSS网页布局和制作方法。本教程系统地讲解了CSS样式的基础理论和实际运用技术,并结合实例来讲解层叠样式表与层布局相结合制作网页...
html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习...
DIV+CSS 源码DIV+CSS
DIV+CSS网页布局商业案例精粹光盘源文件
一本很好的实例讲解书籍,每个安全均按照效果图切割、页面效果分析、html代码编写,最终css页面布局实现进行讲解。即使刚入门的新手,也可以一步步轻松实现复杂的css页面布局。
基础篇 1.1 必须知道的基础知识 知识一 DIV+CSS的叫法是不准确的 标准叫法是xHTML+CSS 知识二两大误区 误区一用了Table就不标准。误区二DIV标签越多越好 Table是为了存储数据DIV是为了架设...
div+css,web标准,div+css布局,div+css实例,div+css模板
div+css布局大全 B/S项目表现层也很重要!
DIV+CSS简单登录界面模板,DIV+CSS布局,有用户名、密码登录框,登录按钮。