亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js+csss實(shí)現(xiàn)的一個(gè)帶復(fù)選框的下拉框

 更新時(shí)間:2014年09月29日 16:42:38   投稿:whsnow  
用js+csss實(shí)現(xiàn)的一個(gè)帶復(fù)選框的下拉框,用到了很基礎(chǔ)的技術(shù),但是比較實(shí)用,喜歡的朋友可以參考下

效果圖:

css:

<style type="text/css"> 
/* 帶復(fù)選框的下拉框 */ 
ul li{ 
list-style: none; 
padding:0px; 
margin: 0px; 
} 

.select_checkBox{ 
border:0px solid red; 
position: relative; 
display:inline-block; 


} 
.chartQuota{ 
height:23px; 
float:left; 
display:inline-block; 
border:0px solid black; 
position: relative; 
} 

.chartOptionsFlowTrend{ 
z-index:300; 
background-color:white; 
border:1px solid gray; 
display:none; 
position: absolute; 
left:0px; 
top:23px; 
width:150px; 
} 
.chartOptionsFlowTrend ul{ 
float:left; 
padding: 0px; 
margin: 5px; 
} 
.chartOptionsFlowTrend li{ 
/* float:left; */ 
display:block; 
position: relative; 
left:0px; 
margin: 0px; 
clear:both; 
} 
.chartOptionsFlowTrend li *{ 
float:left; 
} 
a:-webkit-any-link { 
color: -webkit-link; 
text-decoration: underline; 
cursor: auto; 
} 
.chartQuota p a { 
float: left; 
height: 21px; 
outline: 0 none; 
border: 1px solid #ccc; 
line-height: 22px; 
padding: 0 5px; 
overflow: hidden; 
background: #eaeaea; 
color: #313131; 
text-decoration: none; 
} 

.chartQuota p { 
margin:0px; 
folat:left; 
overflow: hidden; 
height: 23px; 
line-height:24px; 
display: inline-block; 
} 
.chartOptionsFlowTrend p { 
height: 23px; 
line-height: 23px; 
overflow: hidden; 
position: relative; 
z-index: 2; 
background: #fefbf7; 
padding-top: 0px; 
display: inline-block; 
} 
.chartOptionsFlowTrend p a { 
border: 1px solid #fff; 
margin-left: 15px; 
color: #2e91da; 
} 
</style>

html:

<div class="select_checkBox"> 
<div class="chartQuota"> 
<p> 
<a href="javascript:;" hidefocus="true" title="請(qǐng)選擇指標(biāo)"><span>選擇指標(biāo)</span> 
<b></b> 
</a> 
</p> 

</div><br> 
<div class="chartOptionsFlowTrend""> 
<ul> 
<li class=""><input type="checkbox" value="1"><span>瀏覽次數(shù)(PV)</span> 
</li> 
<li class=""><input type="checkbox" value="1"><span>獨(dú)立訪客(UV)</span> 
</li> 
<li class=""><input type="checkbox" value="1"><span>IP</span> 
</li> 
<li class=""><input type="checkbox" value="1"><span>新獨(dú)立訪客</span> 
</li> 
<li class=""><input type="checkbox" value="1"><span>訪問次數(shù)</span> 
</li> 
</ul> 
<p> 
<a href="javascript:;" title="確定" hidefocus="true" class="a_0">確定</a><a 
href="javascript:;" title="取消" hidefocus="true" class="a_1">取消</a> 
</p> 
</div> 
</div>

js:

<script type="text/javascript"> 
$(function(){ 
$(".select_checkBox").hover(function(){ 
$(".chartOptionsFlowTrend").css("display","inline-block"); 
},function(){ 
$(".chartOptionsFlowTrend").css("display","none"); 
}); 
}); 
</script>

相關(guān)文章

  • js在ie下打開對(duì)話窗口的方法小結(jié)

    js在ie下打開對(duì)話窗口的方法小結(jié)

    下面小編就為大家?guī)硪黄猨s在ie下打開對(duì)話窗口的方法小結(jié)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-10-10
  • 微信小程序npm引入vant-weapp的踩坑記錄

    微信小程序npm引入vant-weapp的踩坑記錄

    這篇文章主要給大家介紹了關(guān)于微信小程序npm引入vant-weapp的踩坑記錄,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • 基于JavaScript實(shí)現(xiàn)留言板功能

    基于JavaScript實(shí)現(xiàn)留言板功能

    這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)留言板功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • 微信小程序 wxParse插件顯示視頻問題

    微信小程序 wxParse插件顯示視頻問題

    這篇文章主要介紹了微信小程序 wxParse插件顯示視頻問題,文中給大家提到了微信小程序插件wxParse的使用,需要的朋友可以參考下
    2019-09-09
  • 詳解JavaScript中的坐標(biāo)和距離

    詳解JavaScript中的坐標(biāo)和距離

    在前端開發(fā)中總會(huì)遇到各種各樣需要使用或計(jì)算坐標(biāo)和距離的情況,于是便有了整理記錄的想法,即加深了印象,又方便隨時(shí)查閱。
    2019-05-05
  • 不用typsescript如何使用類型增強(qiáng)功能

    不用typsescript如何使用類型增強(qiáng)功能

    這篇文章主要給大家介紹了關(guān)于不用typsescript如何使用類型增強(qiáng)功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • js 判斷checkbox是否選中的實(shí)現(xiàn)代碼

    js 判斷checkbox是否選中的實(shí)現(xiàn)代碼

    大家在很多場(chǎng)合也許會(huì)遇到判斷頁(yè)面是否有元素選中,下面介紹的是利用js判斷是否選中CheckBox的方法。
    2010-11-11
  • JS DOM實(shí)現(xiàn)鼠標(biāo)滑動(dòng)圖片效果

    JS DOM實(shí)現(xiàn)鼠標(biāo)滑動(dòng)圖片效果

    這篇文章主要為大家詳細(xì)介紹了JS DOM實(shí)現(xiàn)鼠標(biāo)滑動(dòng)圖片效果,只要將鼠標(biāo)放上該商品的區(qū)域,原本折疊起來的商品便會(huì)自動(dòng)展開,感興趣的小伙伴們可以參考一下
    2016-03-03
  • JS組件封裝之監(jiān)聽localStorage的變化

    JS組件封裝之監(jiān)聽localStorage的變化

    這篇文章主要介紹了JS組件封裝之監(jiān)聽localStorage的變化,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-09-09
  • 微信小程序動(dòng)態(tài)增加按鈕組件

    微信小程序動(dòng)態(tài)增加按鈕組件

    這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)態(tài)增加按鈕組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-09-09

最新評(píng)論