總結的一些前端常用小細節(jié)

baiyuxueque

1、點擊聚焦
onfocus="if (value =='請輸入您的電話號碼'){value =''}" onblur="if (value ==''){value='請輸入您的電話號碼'}"
相信很多人在寫form表單的時候能用到。順帶提一下，當我們點擊input框時會有出現(xiàn)藍色邊框，我們可以這樣來處理input｛outline:none;｝。

2、ie的透明度兼容
background:#000;filter:Alpha(opacity=60); background:rgba(0,0,0,0.6) none repeat scroll !important;
很多人肯定遇到過，我們在做ie透明度兼容的時候，經(jīng)常會用定位的方法，但是這個不用，有興趣的可以試試看。

3、修改滾動條樣式
.test1::-webkit-scrollbar {
width: 6px;
}
.test1::-webkit-scrollbar-track {
background-color:#808080;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.test1::-webkit-scrollbar-thumb {
background-color:#ff4400;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
滾動條太單一太丑？我們可以這樣試試，參數(shù)可以修改，當然ie不兼容的。

4、網(wǎng)頁素裝
html{filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: progidXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
filter: gray;}

有些時候的時候我們需要把網(wǎng)站整體變灰，試試這個樣式。
怎么學好web前端？web前端注重的是實戰(zhàn)項目，你要是真心學web前端可以來這個裙，前面是 四一八，中間是三五五，最后是五三一，每天都會有web前端的視頻教程更新，還有人交流學習互相幫助解決各種web前端問題，有專人講解。只要自己認真，再加上一起交流，你會學到很多的在別的地方學不到的web前端的知識以及項目實戰(zhàn)。

5、返回頂部
function pageScroll(){
//把內(nèi)容滾動指定的像素數(shù)（第一個參數(shù)是向右滾動的像素數(shù)，第二個參數(shù)是向下滾動的像素數(shù)）
window.scrollBy(0,-80);
//延時遞歸調(diào)用，模擬滾動向上效果速度
scrolldelay = setTimeout('pageScroll()',10);
//獲取scrollTop值，聲明了DTD的標準網(wǎng)頁取document.documentElement.scrollTop，否則取document.body.scrollTop；因為二者只有一個會生效，另一個就恒為0，所以取和值可以得到網(wǎng)頁的真正的scrollTop值
var sTop=document.documentElement.scrollTop+document.body.scrollTop;
//判斷當頁面到達頂部，取消延時代碼（否則頁面滾動到頂部會無法再向下正常瀏覽頁面）
if(sTop==0) clearTimeout(scrolldelay);
}
以上這些，花點時間百度一下也就能找的到。下面這些是我自己整理的。

6、無縫滾動輪播
function gqban(){
left+ = 1; //每次移動的像素
if(left>=width){
left=0;
$(".dbdoc ul".css("left",left).find("li:first".appendTo($(".dbdoc ul");
}else{
$(".dbdoc ul".css({left:-left+"px"});
}
}
這個只是個引導，有興趣的可以試試修改

7、js 切換樣式
var list_txt=document.querySelectorAll(".artlist_wrap ol li";
for(var i=0;i<list_txt.length;i++){
(function(){
var db_index=i;
list_txt[db_index].onclick=function(){
for(var i=0;i<list_txt.length;i++){
list_txt.className="";
}
this.className="active";
}
})()
}

8、 一些css3知識點
過渡
transition:屬性 時間 曲線 延遲時間;
transition:width 1s linear 2s;
transform:
2D
translate(0px,0px) (位置移動)
rotate(30deg) (旋轉)
scale(2,4) (寬度2倍，高度4倍)
skew(30deg,20deg) (X軸30度,Y軸20度)
matrix() （無視）
3D
rotateX(180deg) （上下3D旋轉）
rotateY(180deg) （左右3D旋轉）
transform-originleft,top)（改變軸心）

9、移動端字體自適應大小
body{font-family: "Microsoft YaHei";font-size: 0.14rem;color: #666;max-width: 640px;margin: auto;}
@media screen and (min-width: 360px) {
html {font-size: 710%;}
}
@media screen and (min-width: 414px) {
html {font-size: 825%;}
}
@media screen and (min-width: 600px) {
html {font-size: 1095%;}
}
我個人認為這個還是非常有用的，我每次做移動端的東西都會用到，參數(shù)可以自行修改。

10、css3自適應上下左右居中
.aboutlist_wrap ul li a{display:table; }
.aboutlist_wrap ul li a p{display: table-cell;text-align: center;}
.aboutlist_wrap ul li a p{vertical-align: middle;}
我想很多人會遇到上下居中不能的問題，原理就是把塊級元素，轉換成table，然后vertical-align: middle;就可以了，我就是這么理解的。