注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

陈钟鸣的博客

独立之精神,自由之思想.

 
 
 

日志

 
 

初学css作的一个combbox  

2008-10-23 09:01:13|  分类: java |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<html>
<head>
    
    <script language="javascript">
        function dropdown(lst){
            var list = document.getElementById(lst);
            if(list.style.display=="block")
                list.style.display="none";
            else
                list.style.display="block";
        }    
        
        function select_item(txtName,values){
            var txt =  document.getElementById(txtName);
            txt.value=values;
            if(list.style.display=="block")
                list.style.display="none";
            else
                list.style.display="block";
                            
        }
    </script>
    
    <style type="text/css">
        *{
            font-size:12px;
            font-family:simsu;
            color:#000;
        }
        body{
            margin:0 0;
            padding:0 0;
        }
        .combbox{
        
            background-color:#fff;
            padding:0;
            min-width:108px;
            height:auto;
            margin:0px auto;
            position:relative ;
            
        }   
        
        .combbox_backgroud{
            float:left;
            min-width:200px;
            border:1px solid #80FFFF;
            background-color:transparent;
            height:auto;
            
        }
        
        .combbox_text{
            float:left;
            border-top:0px;
            border-bottom:0px;
            border-left:0px;
            border-right:0px;
            margin-top:0px;
            margin-left:0px;
            width:200px;
            height:16px;

        }  
        
        .combbox_dropdown{
            border:0px;
            margin:0 auto;
            /*margin:10px auto;*/
        }
        
        .combbox_dropdown_a {
            border :0px;
            
        }
        
        
        .combbox_list{
        
            float:left;
            position:absolute ;
            top:20px;
            left:0;
            display:none;
            border-top:1px solid #80FFFF;
            border-right:1px solid #80FFFF ;
            border-left:1px solid #80FFFF ;
            border-bottom:1px solid #80FFFF ;
            min-width:200px;
            background-color:#fff;
            line-height:180%;
            +top:20px
        }
        
        
        a:{
            
            display:list-item;
        }
        
        a:visited{
        
            color:#000;
            background-color:#fff;
            
        }
        
        a:hover,#Title a:active{
        
            color:#000;
            background-color:#f1b000;
            border:1px none #f0f0f0;
            
        }
        .clear{
            clear:both;
        }
        
    </style>
</head>
<body>
    
    <div id="comb1" class="combbox" style="width:300px">  
        
        <div name="background" class="combbox_backgroud">
            <input  id="txt" class="combbox_text" type="text" value="abc"/>
            <a href="#"c class="combbox_dropdown_a " onclick="dropdown('list');"><img class="combbox_dropdown" src="arrow2.gif"/></a>
        </div>
        
        <span id="list" class="combbox_list">
            <a href="#" onclick="select_item('txt','dsfdsf')">dsjkdshfkdsjhfksdjhfksdhfksdhkfhsdkfjhskdfhfdsf</a><br>
            <a href="#" onclick="select_item('txt','a1')">a1</a><br>
            <a href="#" onclick="select_item('txt','a2')">a2</a><br>
            <a href="#" onclick="select_item('txt','a3')">a3</a><br>
        </span>
        
    </div>
    
    <div class="clear"></div>
        sdfasdfs dskfjhsd kdsfjh sd<br>
        dsflk dsfkjsad f dslkfj sdlfkjsd lf<br>
        dsflkj dslf sdlf  <br>
        sdfjds lfs  <br>
        dslfj lsdf  <br>
        sdfdsf  <br>
        dslkfjsd <br>
        siuewrfiwe <br>
</body>
</html>
  评论这张
 
阅读(263)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017