1.button里面,用letter-spacing調整中文字間距
問題描述:設置之后現代瀏覽器無法使文字水平居中,會偏右,
原因:最后一個字后面也有間距存在
解決方式:用空格解決;或者用paddding-left:2px解決
2.兼容ie6,7,8背景透明內容不透明解決方法:
rgba(a,b,c,0.8);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";//有時有問題
3.行間距設置
用line-height :number/%;
4.文字陰影css3
text-shadow:h-shadow v-shadow blur color; 詳見夢想天空http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-text-shadow.html
5.input框陰影css3
box-shadow: h-shadow v-shadow blur spread color inset;詳見w3plus
6.ie8下margin-top失效
- 當該div上面的div是絕對定位或者浮動時,ie8下,設置該div的margin-top無效,
解決方法:單獨為ie8設置hack,float;或者如果上div是絕對定位的話,可以將其移到該div的下方.
- 還有父元素未設置border,子元素 設置margin-top無效
解決方法:為父元素設置overflow:hidden;為父元素設置border透明;改margin-top為padding-top
7.不用js實現placeholder的類似功能
<input type="text" value="請輸入您的姓名" onfocus="javascript:if(this.value='請輸入您的姓名'){this.value='';}" onblur="javascript:if(!this.value){this.value='請輸入您的姓名';}" class="name" NO="0"/>
8.文字豎排(類蒙古文)
暫用li浮動,width為字體大小解決
ie有writing-model:tb-rl屬性,可以實現,其他瀏覽器暫未有
9.輸入框input輸入文字豎排顯示
- ie瀏覽器的writing-model屬性支持input框豎排效果的實現,其他瀏覽器暫未查到;
- <textarea cols="1" rows="10" ></textarea>可以實現,限定列和行,但是會出現滾動條.
要設置textarea文本域的滾動條是否開啟，使用style.overflow-x屬性來控制。如：如果要隱藏該文本域的橫向滾動條，在style屬性中增加overflow-x屬性控制，如下：
<textarea id=txtComments style="overflow-x:hidden"></textarea>
相應的，若要隱藏縱向滾動條：
<textarea id=txtComments style="overflow-y:hidden"></textarea>
如果使用代碼控制的話，可能需要如下代碼實現：
document.all("txtComments").style.overflowX="hidden";
overflow-x,overflow-y的可取值為：visible(默認取值),hidden,auto,scroll。
10.特殊字體
字體打包技術,后台處理
11.option設置背景顏色
在option標簽里加入style="background-color:#000;";(css里設置沒有效果)
12.手機號碼正則(較新)
/(^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$)|(^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$)/
13.手機字體大小設置
html里面設置fontsize 1rem=12px
不同分辨率對應不同的大小
一般320對應12px,375對應14,414對應16px,在手機16px偏大
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
14.input的button按鈕的文字不居中
padding,line-height解決
15.ie中父元素float:left;子元素float:right;父元素未設置寬高,float:left就會失效
解決:父元素設置寬度
16.冒泡,點擊菜單顯示,點擊其他地方隱藏(事件流)
//點擊#a元素,菜單顯示,然后在body上點擊一次任何元素,隱藏菜單
$("#a").on("click", function(e){
$("#menu").show();
$(document).one("click", function(){
$("#menu").hide();
});
e.stopPropagation();//(阻止捕獲)
});
//點擊菜單本身,阻止捕獲
$("#menu").on("click", function(e){
e.stopPropagation();
});
17.jquery 獲取下拉列表的值
獲取select選中的option的值:$("#select").find("option:selected").val();
詳見博客http://blog.csdn.net/cui_angel/article/details/8000432
18.超級簡單的橫向手風琴代碼jquery
鏈式操作的體現
$(".num").click(function(){
$(this).css({"background-color":"#c20000"}).find("h1").css("color","#fff");
$(this).parent().siblings().find(".num").css({"background-color":"#e5e5e5"}).find("h1").css("color","#8a8a8a");
$(this).parent().siblings().find("div:last").css({width:0});
$(this).next().animate({width:"315px"},500);
});