點選文字可以選中相應的checkbox 、
一、點選文字可以選中相應的checkbox
注意事項:文字必須是label標籤內,checkbox的id和<label>標籤內的for=""中的名字必須相同.
<form>
<label for="check1">人人網</label>
<input type="checkbox" id="check1" value="123" name="name">
<label for="check2">QQ</label>
<input type="checkbox" id="check2" value="456" name="name">
</form>
</body>
</html>
二、複選框樣式設定
三、列印
四、返回頂部
在html裡面新增：
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
//當滾動條的位置處於距頂部100畫素以下時，跳轉連結出現，否則消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500);
}
else
{
$("#back-to-top").fadeOut(1500);
}
});
//當點選跳轉連結後，回到頁面頂部位置
$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
});
});
</script>
以及
<p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p>
在對應的css樣式新增：
/*returnTop*/
p#back-to-top{
position: fixed;
display: none;
bottom: 2%;
right: 2%;
}
p#back-to-top a{
text-align:center;
text-decoration:none;
color:#d1d1d1;
display:block;
width:44px;
/*使用CSS3中的transition屬性給跳轉連結中的文字新增漸變效果*/
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}
p#back-to-top a:hover{
color:#979797;
}
p#back-to-top a span{
background:transparent url(../images/sprite.png) no-repeat 0 0;
background-size:100% 100%;
border-radius:6px;
display:block;
height:44px;
width:36px;
margin-bottom:2px;
/*使用CSS3中的transition屬性給<span>標籤背景顏色新增漸變效果*/
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
}
#back-to-top a:hover span{
background:transparent url(../images/sprite.png) no-repeat 0 0;
background-size:100% 100%;
}