小知识

  • selcet框内的文字垂直居中，兼容ie8

在对<select>标签进行一些样式设计的同时，会要求选择框内的文字是垂直居中的，之前用height=line-height的方法很好，但是在IE8下不能兼容，今天发现一个方法，就是设置<select>标签的高度，但不设置高度和行高，用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>

在页面顶部引入两套样式

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

/*星光位移*/
@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; 

//PC端的锚点跳转滑动效果
//<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;
    }
  }
})

//移动端的锚点跳转滑动效果
//<a href="javascript:annzmy.slideTo('[name=part1]')">点击跳转</a>
$.fn.scrollTo = function(options) {
  var defaults = {
    toT: 0, //滚动目标位置
    durTime: 500, //过渡动画时间
    delay: 30, //定时器时间
    callback: null //回调函数
  };
  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 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

.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;   只对英文起作用，以字母作为换行依据
word-wrap:break-word;   只对英文起作用，以单词作为换行依据
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(设置旋转元素的基点位置，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) 设置除了这个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; /*需要显示的行数*/
  • 单行超出显示省略号
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
  • 水平翻转
-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;
  • 垂直翻转
-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"
  • 颜色转换(IE不兼容)
-ms-filter: hue-rotate(0deg); /* 0度则不变，维持原色，可以是任何度数，但每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,'');
        },
        /**
         * 时间字符串转时间戳
         * @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); //返回秒数
            return time_str; //返回毫秒数
        },
        //添加灰度
        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;

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,980评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,178评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,868评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,498评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,492评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,521评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,910评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,569评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,793评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,342评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,931评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2赞 342

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1赞 92
  • html基础小知识
    大的网站将css放在head里面是为了防止散屏、白屏，内容出来样式摆出来 index.html约定俗成的文件名，访...
    findmoon阅读 381评论 0赞 0
  • 小知识点集汇三
    小知识点集汇三 JavaScript 所有对象都有 __proto__ 属性，都指向创造对象的函数对象的 prot...
    晗笑书生阅读 143评论 0赞 1
  • 简短小知识
    标题标签:h1一级标题（一个页面只能出现一次），特点 文字会加粗，自己一行，自己有间距 内容 最多六级标题段...
    形象代言人阅读 281评论 0赞 0
  • 小麦花
    一种流动的思想催促我开放 关于茅屋，关于炊烟 和来自泥土的问候 值得见识的世界 安睡的我，如此渴望 可世界，你可以...
    月亮河418阅读 679评论 1赞 3