• selcet框內(nèi)的文字垂直居中，兼容ie8

在對<select>標簽進行一些樣式設(shè)計的同時残炮，會要求選擇框內(nèi)的文字是垂直居中的道媚，之前用height=line-height的方法很好恤溶，但是在IE8下不能兼容踩窖，今天發(fā)現(xiàn)一個方法坡氯，就是設(shè)置<select>標簽的高度，但不設(shè)置高度和行高，用padding把文字撐起來箫柳，看起來是垂直居中

//一個下拉選擇框
<label class="select">
  //下拉箭頭（ie不支持）
  <i class="s-down"></i>
  <select>
    <option value="1">ADC</option>
    <option value="2">中單</option>
    <option value="3">上單</option>
  </select>
</label>       
// CSS樣式
.select { position: relative; display: inline-block; vertical-align: middle; width: 296px; height: 60px; line-height: 60px; padding: 0; margin-right: 20px; cursor: pointer; overflow: hidden; }
.select .s-down { width: 23px; height: 13px; background: url("../ossweb-img/down.png") no-repeat center; display: block; position: absolute; right: 15px; top: 25px; z-index: 2; cursor: pointer; pointer-events: none; }
.select select { width: 100%; text-indent: 16px; border: 1px solid #655548; background: #23272b; font-size: 14px; text-align: left; position: absolute; box-sizing: border-box; color: #a57d5c; padding： 19px 0 18px 16px; margin: 0; left: 0; top: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.select select option { display: block; text-align: left; width: 353px; height: 60px; font-size: 14px; padding: 20px; }                                                                            

樣式

頁面

• word-wrap 文字自動換行手形，有可能會拆分英文單詞

word-wrap:break-word;

• text-overflow 文字溢出

div{
  width:200px;
  height:200px;
  overflow:hidden;
  white-space: nowrap;//文本禁止換行
  text-overflow:ellipsis;//溢出的文字用省略號...
  text-overflow:clip;//溢出的文字直接被修剪
}

text-overflow

• @font-face 字體

<style> 
  @font-face{
  font-family: myFirstFont;//字體名稱
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot'); /* IE9+ */
  }
  div{
    font-family:myFirstFont;
  }
</style>

• 在做移動端頁面的時候，有時會遇到讓頁面橫版時適配另一個樣式悯恍，這是就需要準備兩套樣式库糠，在第二套樣式中寫橫版的樣式
  githubDEMO地址
  https://github.com/Annzmy/autoResize

在頁面頂部引入兩套樣式

<script>
        var __css = {
            _p_css: 'css/index.css',
            _l_css: 'css/index2.css'
        }
    </script>
    <script src="js/resize.min.js"></script>

• 看騰訊的一個頁面，背景有星星移動的效果坪稽，覺得很好看曼玩。之前在做星之守護者頁面的時候鳞骤，也嘗試著用了星光背景位移的效果窒百。還不錯。其實實現(xiàn)起來很簡單豫尽，就是兩張星光圖片相對位移運動就可以啦
  項目地址：星之守護者-六周年狂歡開幕-全球首發(fā)-英雄聯(lián)盟周邊商城
  (http://lolriotmall.qq.com/act/a20170725star/index.html)

/*星光位移*/
@keyframes bg2 {
  0% {transform: translate3d(-1300px, 0, 0);}
  100% {transform: translate3d(0, 0, 0);}
}        
@keyframes bg {
  0%{transform: translate3d(0,0,0);}
  100%{transform: translate3d(-1300px,0,0);}
}
.bg2 { 
  height: 100%;
  left: 0;
  position: absolute;
  top: -10px;
  opacity: 1;
  fill: blur(20px);
  transform: translate3d(0, 0, 0);
  background: url("../ossweb-img/bg2.png") repeat bottom left;
  background-size: 800px auto;
  width: 2400px;
  animation: bg2 90s linear infinite;
 }
 .bg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 20px;
  opacity: .6;
  transform: translate3d(0, 0, 0);
  background: url("../ossweb-img/bg.png") repeat bottom left;
  background-size: 800px auto;
  width: 2400px;
  animation: bg 90s linear infinite; 

• 默認的錨點跳轉(zhuǎn)效果是比較生硬的篙梢，點擊之后直接到錨點所指向的部分，視覺體驗來說太僵硬了美旧，
  如果有頁面平滑滾動到“目的地”的效果就會好很多
  githubDEMO地址
  https://github.com/Annzmy/some-skills

//PC端的錨點跳轉(zhuǎn)滑動效果
//<a href="#part1"></a>
$('a[href*=#],area[href*=#]').click(function(){
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname){
    var $target = $(this.hash);
    $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
    if ($target.length) {
      var targetOffset = $target.offset().top;
      $('html,body').animate({
        scrollTop: targetOffset
      }, 500);
      return false;
    }
  }
})

//移動端的錨點跳轉(zhuǎn)滑動效果
//<a href="javascript:annzmy.slideTo('[name=part1]')">點擊跳轉(zhuǎn)</a>
$.fn.scrollTo = function(options) {
  var defaults = {
    toT: 0, //滾動目標位置
    durTime: 500, //過渡動畫時間
    delay: 30, //定時器時間
    callback: null //回調(diào)函數(shù)
  };
  var opts = $.extend(defaults, options),
  timer = null,
  _this = this,
  curTop = _this.scrollTop(), //滾動條當前的位置
  subTop = opts.toT - curTop, //滾動條目標位置和當前位置的差值
  index = 0,
  dur = Math.round(opts.durTime / opts.delay),
  smoothScroll = function(t) {
    index++;
    var per = Math.round(subTop / dur);
    if (index >= dur) {
      _this.scrollTop(t);
      window.clearInterval(timer);
      if (opts.callback && typeof opts.callback == 'function') {
        opts.callback();
      }
      return;
    }else {
       _this.scrollTop(curTop + index * per);
    }
  };
  timer = window.setInterval(function() {
    smoothScroll(opts.toT);
   }, opts.delay);
  return _this;
};

var annzmy ={
  init: function () {},
  slideTo:function(e){
    var offset = $(e).offset().top;
    $("html,body").scrollTo({
    "toT": offset
    });
   }
 };
 $(function () { annzmy.init(); });

• PC reset

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin:0}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5b8b\4f53',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none}
a:hover{text-decoration:none;-webkit-filter: brightness(1.1); filter: brightness(1.1);}
img{border:0}
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}
ul,ol,dl{list-style:none;}
*{outline:none}
a:focus{outline: none}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{*zoom:1;}
.fl {float: left}
.fr {float: right}
.hide{display: none}
body{
  line-heihgt:1;
}//這樣就不用每個元素再加了渤滞，可以繼承
//微軟雅黑8進制碼
font-family: '\5FAE\8F6F\96C5\9ED1';

• 移動端reset

*{-webkit-text-size-adjust: none;}
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin:0}
body,button,input,select,textarea{font-size: 24px; line-height:1.5}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none}
a:hover{text-decoration:none}
a:focus{outline:none}
*{outline:none}
img{vertical-align:middle;border: 0;padding: 0;margin:0;}
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}
ul,ol,dl{list-style:none;}
body *{box-sizing: border-box;}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{*zoom:1;}
.fl {float: left}
.fr {float: right}
//手機端蘋果版加了 overflow: auto; 的，后面都要加上 -webkit-overflow-scrolling: touch;

• 圖片按比例縮放榴嗅，不超過父元素
  max-width: 100%; 和 height: auto; 屬性妄呕，可以讓圖像按比例縮放，不超過其父元素的尺寸嗽测。

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

• 水平垂直居中

display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
flex-wrap: wrap;
text-align: center;

• 滾動條

::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-thumb  滾動條里面的小方塊绪励，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條）
::-webkit-scrollbar-track  滾動條的軌道（里面裝有Thumb）
::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕唠粥，允許通過點擊微調(diào)小方塊的位置疏魏。
::-webkit-scrollbar-track-piece 內(nèi)層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-corner 邊角晤愧，即兩個滾動條的交匯處
::-webkit-resizer 兩個滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件

.table-box::-webkit-scrollbar{width: 8px;}
.table-box::-webkit-scrollbar-track{background-color: #0f164f;border-radius: 10px;}
.table-box::-webkit-scrollbar-thumb{background-color: #4de0e9;border-radius: 10px;}
.table-box::-webkit-scrollbar-corner{display: none;}

• 文字換行

word-break:break-all;   只對英文起作用大莫，以字母作為換行依據(jù)
word-wrap:break-word;   只對英文起作用，以單詞作為換行依據(jù)
white-space:pre-wrap;  只對中文起作用官份，強制換行

• 文字描邊css

 -webkit-text-shadow:yellow 2px 0 0,red 0 2px 0,green -2px 0 0,blue 0 -2px 0;
  text-shadow:yellow 2px 0 0,red 0 2px 0,green -2px 0 0,blue 0 -2px 0;

image.png

• 文字描邊(加粗,描邊層級要比文字層級低)

.text-stroke{
  color:#ff0000;
  font-weight: bold;
  position:relative;
  z-index: 0;
  margin:0 auto;
  text-align: center;
  &:before{
    content: attr(data-text);
    -webkit-text-stroke:5px #f0d14d;
    position:absolute;
    z-index: -1;
  }
}

示意圖

• 禁止復制只厘、粘貼 默認可以復制、粘貼

* {
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input{
    -webkit-user-select: auto;
    user-select: auto;
}

• transform-origin(設(shè)置旋轉(zhuǎn)元素的基點位置舅巷，x y值) 動畫停在最后一幀

transform-origin: 50% 0;   animation-fill-mode: forwards;

• 替換checkbox,radio原有樣式

//CSS
.whether input[type="radio"]{display:none;}
.whether input[type="radio"]+span{}
.whether input[type="radio"]:checked+span{}
//HTML
<label class="wether" >
   <input type="radio" name="whether">
   <span>有<span>
</label>
<label class="wether">
   <input type="radio" name="whether">
   <span>無<span>
</label>

• tab標簽頁切換

<div class="tab">
  <ul>
    <li class="on"></li>
    <li></li>
  </ul>
</div>
<div class="con show"></div>
<div class="con"></div>
/*tab切換*/
$(".tab>li").click(function(){
  var indexs = $(this).index();
  $(this).addClass("on").siblings().removeClass("on");
  $(".con").eq(indexs).addClass("show").siblings().removeClass("show");
)};

• 邊框&背景漸變

border:2px solid transparent;
background-clip:padding-box,border-box; 
background-origin:padding-box,border-box; 
background-image:linear-gradient(#fff,#fff),linear-gradient(#22afc4,#56c6e1);

-背景顏色漸變

background:-webkit-gradient(linear, 0 0, 360 100%, from(#2b3038), to(#7a6649));
background:-moz-linear-gradient(left, #2b3038,#7a6649); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#2b3038,endColorstr=#7a6649,grandientType=1);
h5頁面可用
background: -webkit-linear-gradient(left, #e4e4e4 , #f1f1f1);
background: linear-gradient(to right, #e4e4e4 , #f1f1f1);

• 文字漸變

    background: -webkit-gradient(linear, left top, left bottom, from(#fee9c7), to(#c79d61));
    background: -webkit-linear-gradient(top, #fee9c7, #c79d61);
    background: -o-linear-gradient(top, #fee9c7, #c79d61);
    background: linear-gradient(top, #fee9c7, #c79d61);
    -webkit-background-clip: text;
    color: transparent;

• iOS加了 overflow: auto; 的羔味，后面都要加上 -webkit-overflow-scrolling: touch;

• 按鈕變灰加上gray這個class

.gray{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;pointer-events: none;}

• :not(.gray) 設(shè)置除了這個class之外的元素樣式

例子：
.sign tr td a:not(.gray):hover{-webkit-filter: brightness(1.2); filter: brightness(1.2);}

• a標簽為空是要加 兼容IE

background: url(about:blank);

• 變亮

-webkit-filter: brightness(1.2); filter: brightness(1.2);

• 多行超出顯示省略號

white-space: normal;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /*需要顯示的行數(shù)*/

• 單行超出顯示省略號

white-space: nowrap;overflow: hidden;text-overflow: ellipsis;

• 水平翻轉(zhuǎn)

-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;

• 垂直翻轉(zhuǎn)

-moz-transform:scaleY(-1);-webkit-transform:scaleY(-1);-o-transform:scaleY(-1);transform:scaleY(-1);filter:FlipV;

• 垂直居中

.team li p{width: .88rem;height: .88rem;display: table;}
.team li .img-box{vertical-align: middle; display: table-cell; height: .88rem;}

• css修改input、textarea標簽placeholder屬性默認文字顏色

textarea::-webkit-input-placeholder {color: #429ec5;  }
textarea:-moz-placeholder { color: #429ec5;  }
textarea::-moz-placeholder {color: #429ec5; }
textarea::-ms-input-placeholder {color: #429ec5; }

• input 禁止鍵盤輸入

onmousedown="return false"

• 顏色轉(zhuǎn)換(IE不兼容)

-ms-filter: hue-rotate(0deg); /* 0度則不變悄谐，維持原色介评，可以是任何度數(shù)，但每360度完成一次完整變化 */
  -webkit-filter: hue-rotate(0deg);
  filter: hue-rotate(0deg);

• 改變元素默認樣式

-webkit-appearance: none; 

• display：inline-block兼容ie7

display:inline-block;
*display:block;
*zoom:1;

加上這個屬性,安卓可以拍照和選擇照片了,如果不加,安卓只能選擇照片

<a class="input-img" href="javascript:;">
        <input type="file" accept="img/*"/>
    </a>

• 變灰

//CSS
/*變灰*/
.gray {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
   filter: gray;       
}       
//js
<script src="grayscale "></script>
<script>
 var cimi = {
        //三個活動時間
        activeDate: ['2017-6-21 10:00:00','2017-6-31 10:00:00','2017-6-31 10:00:00'],
        init: function () {
            //到活動時間去掉灰色
            var date = new Date();
            for (var i = 0; i < cimi.activeDate.length; i++) {
                var act = cimi.activeDate[i];
                if (date.getTime() < cimi.getUnixTime(act)) {
                    cimi.gray($('.s-bg-box').eq(i));
                }else {
                    $('.s-bg-box').eq(i).removeClass('gray');
                }
            }
        },
        /**
         * 判斷瀏覽器種類
         * e.g.
         * var browser = cimi.getBrowserInfo();
         * var verinfo = (browser+"").replace(/[^0-9.]/ig,"");
         * if (browser.indexOf('ie') != -1 && parseInt(verinfo) < 10) {}
         * */
        getBrowserInfo: function () {
            var agent = navigator.userAgent.toLowerCase() ;
            var regStr_ie = /msie [\d.]+;/gi ;
            var regStr_ff = /firefox\/[\d.]+/gi ;
            var regStr_chrome = /chrome\/[\d.]+/gi ;
            var regStr_saf = /safari\/[\d.]+/gi ;
            //IE11以下
            if(agent.indexOf('msie') > 0) {
                return agent.match(regStr_ie)[0] ;
            }
            //IE11版本中不包括MSIE字段
            if(agent.indexOf('trident') > 0&&agent.indexOf('rv') > 0){
                return 'ie ' + agent.match(/rv:(\d+\.\d+)/) [1];
            }
            //firefox
            if(agent.indexOf('firefox') > 0) {
                return agent.match(regStr_ff);
            }
            //Chrome
            if(agent.indexOf('chrome') > 0) {
                return agent.match(regStr_chrome);
            }
            //Safari
            if(agent.indexOf('safari') > 0 && agent.indexOf('chrome') < 0) {
                return agent.match(regStr_saf);
            }
        },
        //判斷瀏覽器版本
        getBrowserVersion: function () {
            return (cimi.getBrowserInfo()+'').replace(/[^0-9.]/ig,'');
        },
        /**
         * 時間字符串轉(zhuǎn)時間戳
         * @param dateStr 時間字符串 e.g. '2016-03-31 10:00:00'
         * return 時間戳 e.g. 1462762099645
         */
        getUnixTime: function(dateStr) {
            var newstr = dateStr.replace(/-/g,'/');
            var date =  new Date(newstr);
            var time_str = date.getTime();
            //return time_str.substr(0, 10); //返回秒數(shù)
            return time_str; //返回毫秒數(shù)
        },
        //添加灰度
        gray: function (elm) {
            var browser = cimi.getBrowserInfo();
            var verinfo = cimi.getBrowserVersion();
            if (browser.indexOf('ie') != -1 && parseInt(verinfo) >= 10) {
                grayscale(elm);
            }
            $(elm).addClass('gray');
        }
    };

    $(function () { cimi.init(); });
</script>

• bootstrap-datetimepicker在火狐下報錯的問題

使用bootstrap-datetimepicker這個日期插件來顯示日期，但在火狐下報如下錯誤：
TypeError: (intermediate value).toString(...).split(...)[1] is undefined
將插件中的this.defaultTimeZone=(new Date).toString().split("(")[1].slice(0,-1);
改為this.defaultTimeZone='GMT '+(new Date()).getTimezoneOffset()/60;