搞了个CSS树节点ico,没有图片哦

来源:未知 责任编辑:责任编辑 发表时间:2013-12-06 08:45 点击:
知道css中的border用法的一看就懂了。看一下代码:
 [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">
 <head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test</title> 
<style type="text/css"> 
    body{margin:0px; padding:0px;} 
    #arrow{width:12px; height:12px; border:1px solid #ccc; margin:50px;} 
    #arrowOpen{visibility:hidden;} 
    .closed{width:0px; height:0px; border-left:#060 6px solid; border-bottom:#fff 6px solid; border-top:#fff 6px solid;} 
    .open{width:0px; height:0px; margin-top:-8px; margin-left:-1px; border-left:#fff 6px solid; border-right:#fff 6px solid; border-top:#060 6px solid;} 
</style> 
<script type="text/javascript" src="jquery-1.7.js"></script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function(){ 
    //隐藏向右开的箭头 
    $("#arrowClose").click(function(){ 
        if($(this).css("visibility")!="hidden"){ 
            $(this).css("visibility","hidden"); 
            $("#arrowOpen").css("visibility","visible"); 
        } 
    }) 
    //隐藏向下开的箭头 
    $("#arrowOpen").click(function(){ 
        if($(this).css("visibility")=="visible"){ 
            $(this).css("visibility","hidden"); 
            $("#arrowClose").css("visibility","visible"); 
        } 
    }) 
}) 
</script> 
</head> 
 
<body> 
<div id="arrow"> 
    <div id="arrowClose" class="closed"></div> 
    <div id="arrowOpen" class="open"></div> 
</div> 
</body> 
</html> 
给个demo下载地址
http://www.2cto.com/uploadfile/2012/0217/20120217103207206.zip
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • 浅析.NET下XML数据访问新机制
  • asp.net 面试+笔试题目第1/2页
  • C# 邮件地址是否合法的验证
  • C#高级编程:数据库连接[1]
  • asp.net 设置GridView的选中行的实现代码
  • 经典C++程序1
  • IIS 自动回收导致后台定时器失效的问题解决
  • ASP.NET&#160;GridView列表代码示例
  • 微软ASP.NET站点部署指南(3):使用Web.Config文件的Transforma
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1