怎么样实现这样的效果

解决方案 »

  1.   

    http://zhidao.baidu.com/question/12372853.html?fr=ala0
      

  2.   

    用handle或者 module都可以处理,很简单的
      

  3.   

    样式就是这样，具体的css楼主自己修改吧。<!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 runat="server">
        <title>无标题页</title>
       <script>
       function show(i) 
        { 
       for(var x=1;x<4;x++) 
       {
        var obj= document.getElementById("content"+x);
       if(x==i) 
       obj.style.display="";
       else
       obj.style.display="none";
       }
        } 
       </script> 
       <style>
       .bk{ background-color:teal; width:200px; padding-left:20px;}
       </style>
    </head>
    <body style="padding:0px;margin:0px;cursor:default">
        <form id="form1" runat="server">
            <div>
                <div id="title1" onmouseover="show(1)">※WOMAN</div>
                <div id="content1" style="display:;" class="bk">
                    <a>◆111111111111</a><br />
                   <a>◆111111111111</a><br />
                   <a>◆111111111111</a><br />
                   <a>◆111111111111</a> <br />
                </div>
            </div>
            <div>
                <div id="title2" onmouseover="show(2)">※MAN</div>
                <div id="content2" style="display:none;" class="bk">
                    <a>◆222222222222</a><br />
                   <a>◆222222222222</a><br />
                   <a>◆222222222222</a><br />
                   <a>◆222222222222</a><br />
                </div>
            </div>
            <div>
                <div id="title3" onmouseover="show(3)">※KIDS</div>
                <div id="content3" style="display:none;" class="bk">
                    <a>◆33333333333</a><br />
                   <a>◆33333333333</a><br />
                   <a>◆33333333333</a><br />
                   <a>◆33333333333</a><br />
                </div>
            </div>
        </form>
    </body>
    </html>
      

  4.   

    不过建议楼主最好用treeview控件，简单点。用repeater模拟也可以，代码量大一点。动态表格也不错。呵呵
      

  5.   

    图片仿盗链 用Httphander处理一下
      

  6.   

    http://b29.photo.store.qq.com/http_imgload.cgi?/rurl4_b=94765fe292ee3aa8a6bfcd6fdc5364d86910e4063b2b15ccef74a8477b4196c6f7896b4542b0ee3415b0f24f20422100e987b0ff519d3de3870ec3a6d3b79838b1f2d0d0bc48b0ff745bf6d05909113a31595e87
    不会用treeview 实现这样的效果啊
      

  7.   

            TreeView tree = new TreeView();
            //tree.CollapseImageUrl = "a.jpg";//这里是要显示的左侧图片
            TreeNode tn = new TreeNode("<span style='background-color:teal;'>WOMAN<span>");//这里设置你的css样式和要显示的文本        TreeNode ctn = new TreeNode("<span style='background-color:red;'>shoes<span>");
            tn.ChildNodes.Add(ctn);        tree.Nodes.Add(tn);
            Form.Controls.Add(tree);