1、點擊聚焦

onfocus="if (value =='請輸入您的電話號碼'){value =''}" onblur="if (value ==''){value='請輸入您的電話號碼'}"

相信很多人在寫form表單的時候能用到。順帶提一下，當我們點擊input框時會有出現藍色邊框，我們可以這樣來處理input｛outline:none;｝。

2、ie的透明度兼容

background:#000;filter:Alpha(opacity=60); background:rgba(0,0,0,0.6) none repeat scroll !important;

很多人肯定遇到過，我們在做ie透明度兼容的時候，經常會用定位的方法，但是這個不用，有興趣的可以試試看。

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; }

滾動條太單一太丑？我們可以這樣試試，參數可以修改，當然ie不兼容的。

4、網頁素裝

html{filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); filter: gray;}

有些時候的時候我們需要把網站整體變灰，試試這個樣式。

5、返回頂部

function pageScroll(){//把內容滾動指定的像素數（第一個參數是向右滾動的像素數，第二個參數是向下滾動的像素數）window.scrollBy(0,-80);//延時遞歸調用，模擬滾動向上效果速度scrolldelay = setTimeout('pageScroll()',10);/*獲取scrollTop值，聲明了DTD的標準網頁取 document.documentElement.scrollTop，否則取document.body.scrollTop；因為二者只有一個會生效，另一個就恒為0，所以取和值可以得到網頁的真正的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[i].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-origin:(left,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%;} }

我個人認為這個還是非常有用的，我每次做移動端的東西都會用到，參數可以自行修改。

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;就可以了，我就是這么理解的。

我們在平時工作中，還會遇到很多效果，這里就整理這么多了，希望對大家有用，大家共勉，學無止境。

本文原創發布于慕課網 ，轉載請注明出處，謝謝合作！

原文鏈接（特此聲明）：http://www.imooc.com/article/8997

總結

以上是生活随笔為你收集整理的我在工作中总结的一些前端常用小细节 （转载）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。