- 浏览: 346746 次
- 性别:
- 来自: 保定
文章分类
- 全部博客 (266)
- ERP (69)
- ERP-SAP-MM (50)
- ERP-SAP-FICO (23)
- ERP-SAP-HR (2)
- ERP-SAP-HU (1)
- ERP-SAP-BASIS (4)
- ERP-SAP-EWM (2)
- div+css (34)
- flex (9)
- 网页设计理论 (17)
- 网页代码理论 (1)
- 网页代码技巧 (12)
- UI设计理论 (6)
- flash (3)
- 界面设计 (14)
- 数码照片处理 (7)
- 影像处理 (1)
- logo设计 (3)
- 测试 (6)
- 习惯性思维 (6)
- 心情日记 (14)
- 印刷 (3)
- seo优化 (5)
- 人力资源eHR管理 (3)
- 项目管理相关链接 (1)
- PPT演示沟通 (5)
- 项目管理 (4)
- TAMM40_Part2.rar (1)
- SAP VIM (1)
- SAP使用公司 (1)
- 会计 (1)
- erp-sap-qm (1)
- WEB前端 (0)
最新评论
-
liomao:
火狐浏览器不通用吧?
收藏本站代码及设为首页代码 -
上善如水:
我刚刚开始写网页,看了不少的写作规范写作规范,可是还是有浏览器 ...
UL-LI 标签结合CSS的运用基础 -
ksmjava:
关于技术人员的前途,目前在国内确实得用"惨淡&quo ...
WEB前端设计师需要的技能 -
AlexChen_China:
Web开放工具是如此的丰富啊...初来乍道很多工具都不知道;
前端开发大众手册(包括工具、网址、经验等) -
xiaoqing20:
不错长见识了
什么是UI
html>
<script>
function changevisible(element){
var children = element.parentNode.childNodes;
for(var i= 0; i<children.length;i++){
if(children[i].nodeName == "DIV"){
var className = children[i].className;
if(className == "show"){
element.className="fold";
children[i].className="hidden";
}
else{
element.className="expend";
children[i].className="show";
}
}
}
}
</script>
<style type="text/css">
div.show{
display:block;
width:100%;
background-color:#339966;
}
div.hidden{
display:none;
}
span.fold{
width:20px;
height:20px;
padding:0px 10px 0px 10px;
background-image:url("P1.gif");
background-repeat:no-repeat;
}
span.expend{
width:20px;
height:20px;
padding:0px 10px 0px 10px;
background-image:url("M1.gif");
background-repeat:no-repeat;
}
span.2blank{
width:20px;
}
span.3blank{
width:40px;
}
span.def{
width:20px;
height:20px;
padding:0px 10px 0px 10px;
background-image:url("D.gif");
background-repeat:no-repeat;
}
</style>
<body>
<div id="sidenav">
<div class="show"><span class="fold" onclick="changevisible(this)"> </span>10
<div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>20</div>
<div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>21</div>
<div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>22
<div class="hidden"><span class="3blank"> </span><span class="def"> </span>30</div>
<div class="hidden"><span class="3blank"> </span><span class="def"> </span>31</div>
</div>
</div>
</div>
</body>
</html>
(由于展开和收起的图标使用的相对链接,利用改变span的className属性来改变图标,在blog里不方便实用,暂且用+代替原来图表的位置,大家使用的时候可以用你自己的图标代替M1.gif 、P1.gif、D.gif,和你的页面放在一层文件夹下即可)
转载于:http://blog.csdn.net/dyingcow/archive/2006/09/20/1255794.aspx
<script>
function changevisible(element){
var children = element.parentNode.childNodes;
for(var i= 0; i<children.length;i++){
if(children[i].nodeName == "DIV"){
var className = children[i].className;
if(className == "show"){
element.className="fold";
children[i].className="hidden";
}
else{
element.className="expend";
children[i].className="show";
}
}
}
}
</script>
<style type="text/css">
div.show{
display:block;
width:100%;
background-color:#339966;
}
div.hidden{
display:none;
}
span.fold{
width:20px;
height:20px;
padding:0px 10px 0px 10px;
background-image:url("P1.gif");
background-repeat:no-repeat;
}
span.expend{
width:20px;
height:20px;
padding:0px 10px 0px 10px;
background-image:url("M1.gif");
background-repeat:no-repeat;
}
span.2blank{
width:20px;
}
span.3blank{
width:40px;
}
span.def{
width:20px;
height:20px;
padding:0px 10px 0px 10px;
background-image:url("D.gif");
background-repeat:no-repeat;
}
</style>
<body>
<div id="sidenav">
<div class="show"><span class="fold" onclick="changevisible(this)"> </span>10
<div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>20</div>
<div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>21</div>
<div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>22
<div class="hidden"><span class="3blank"> </span><span class="def"> </span>30</div>
<div class="hidden"><span class="3blank"> </span><span class="def"> </span>31</div>
</div>
</div>
</div>
</body>
</html>
(由于展开和收起的图标使用的相对链接,利用改变span的className属性来改变图标,在blog里不方便实用,暂且用+代替原来图表的位置,大家使用的时候可以用你自己的图标代替M1.gif 、P1.gif、D.gif,和你的页面放在一层文件夹下即可)
转载于:http://blog.csdn.net/dyingcow/archive/2006/09/20/1255794.aspx
发表评论
-
精通 CSS 造型设计元素
2010-01-20 13:35 1264CSS 是现代网页设计的重要基石。Web 标准要求使用 CSS ... -
你必须知道的10个不常用的HTML标签
2009-09-10 21:31 946http://www.qianduan.net/you-hav ... -
wofoo表单模板下载
2009-09-10 21:01 846http://wufoo.com/gallery/ -
加个地址栏图标
2009-08-23 21:56 762<link rel="shortcut ico ... -
解决IE8兼容性问题的便捷方法
2009-08-20 09:19 1206微软告知我们:在目前兼容IE 7 的网站上只需添加一行代码(加 ... -
div垂直居中
2009-08-20 08:08 937position: absolute; width:880 ... -
标准化良构之路
2009-08-10 15:24 813专题:标准化良构之路 标准化走到今天,当CSS被我们充分的接 ... -
使用CSS为图片添加更多趣味的5种方法.
2009-07-17 23:38 10741, 阴影效果. 通过使用带有一些padding之的背景 ... -
Blueprint CSS 框架学习笔记概述
2009-07-17 23:34 1550这个 CSS 框架将 html 标签设定为如下情况: 统一 ... -
CSS框架思维雏形与CSS文件精简
2009-07-17 23:31 886假如在你切完所有图之后,假如你切的网站是娱乐性的网站.(重复性 ... -
CSS BUG顺口溜
2009-07-16 22:23 878CSS BUG顺口溜 一、IE边框若显若无,须注意,定是高度 ... -
用CSS替换传统方法
2009-07-16 18:16 839下面的列表将帮助你用CSS替换传统方法: HTML属性以及相对 ... -
UL-LI 标签结合CSS的运用基础
2009-07-16 13:46 1497LI代码的格式化: A).运用CSS格式化列表符: ul l ... -
css相关工具
2009-07-16 13:45 987附加 工具 http://www.ziuo.cn/box/c ... -
DIV+CSS 命名规范
2009-07-16 13:44 11231.CSS ID 的命名 外 套: wrap 主导航: m ... -
Css单词英汉对照
2009-07-16 13:44 986margin:页边的空白, (湖、池等的)边缘, 极限, 利润 ... -
Web标准概念--摘抄《CSS布局实录》
2009-07-16 13:43 1038前言 对于日常的很多事情,我们并没有注意到这背后都有着一个隐藏 ... -
用CSS做一个最简单的导航栏
2009-07-16 13:41 1485导航栏是网页中常用的模块,有很多方法可以实现,下面是用css实 ... -
Iframe高度自适应
2009-07-16 13:41 843<iframe width="190" ... -
css背景渐变的技巧与方法
2009-07-16 13:40 2498用css实现网页背景渐变的代码如下: 一、从上往下渐变 ...
相关推荐
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页...
HTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+...
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...
web期末大作业 基于HTML+CSS+JavaScript实现的商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的商城首页源码 web期末大作业 基于...
web期末大作业 基于HTML+CSS+JavaScript实现的分期购物商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的分期购物商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的分期购物商城源码 web期末大作业 基于...
Html+Css+Javascript从入门到精通.pdfHtml+Css+Javascript从入门到精通.pdf
web期末大作业 基于HTML+CSS+JavaScript实现的积分兑换商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的积分兑换商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的积分兑换商城源码 web期末大作业 基于...
web期末大作业 基于HTML+CSS+JavaScript实现的团购商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的团购商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的团购商城首页源码 web期末大作业 基于...
web期末大作业 基于HTML+CSS+JavaScript实现的母婴用品购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的母婴用品购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的母婴用品购物商城首页...
Web期末大作业 基于HTML+CSS+JavaScript实现的海尔电器商城首页源码 Web期末大作业 基于HTML+CSS+JavaScript实现的海尔电器商城首页源码 Web期末大作业 基于HTML+CSS+JavaScript实现的海尔电器商城首页源码 Web期末...
web期末大作业 基于HTML+CSS+JavaScript实现的蛋糕团购商城网页源码(4页) web期末大作业 基于HTML+CSS+JavaScript实现的蛋糕团购商城网页源码(4页) web期末大作业 基于HTML+CSS+JavaScript实现的蛋糕团购商城网页...
web期末大作业 基于HTML+CSS+JavaScript实现的生活类购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的生活类购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的生活类购物商城首页源码 ...
web期末大作业 基于HTML+CSS+JavaScript实现的农业类水果商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的农业类水果商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的农业类水果商城首页源码 ...
web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末...
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript...
web期末大作业 基于HTML+CSS+JavaScript实现的仿蘑菇街时尚购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿蘑菇街时尚购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿蘑菇街时尚...
web期末大作业 基于HTML+CSS+JavaScript实现的仿苏宁易购官网商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿苏宁易购官网商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿苏宁易购官网...
学习 HTML+CSS+JavaScript等学习 HTML+CSS+JavaScript等 学习 HTML+CSS+JavaScript等学习 HTML+CSS+JavaScript等 学习 HTML+CSS+JavaScript等学习 HTML+CSS+JavaScript等 学习 HTML+CSS+JavaScript等学习 ...
web期末大作业 基于HTML+CSS+JavaScript实现的家用电器电子商务商城源码(7页) web期末大作业 基于HTML+CSS+JavaScript实现的家用电器电子商务商城源码(7页) web期末大作业 基于HTML+CSS+JavaScript实现的家用电器...