不想浪费时间写重复代码(一)

叉

.icon_close{
    position: absolute;
    top: 50%;
    right: 0.5rem;
    display: inline-block;
    width: 0.85rem;
    height: 0.1rem;
    background: #a3a3a3;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    -webkit-transform: rotate(45deg);
}
.icon_close:after{
    content: '/';
    display: block;
    width: 0.85rem;
    height: 0.1rem;
    background: #a3a3a3;
    -webkit-transform: rotate(-90deg);
}

上线左右箭头

.icon_down{
    display: inline-block;
    position: absolute;
    right: 0.25rem;
    bottom: 0.9rem;
    content: '';
    height: 0.6rem;
    width: 0.6rem;
    box-shadow: 2px 2px #aeaeae;
    transform: rotate(135deg);
    -webkit-transform: rotate(45deg);  
}
.icon_right{
    display: inline-block;
    position: absolute;
    right: 0.5rem;
    bottom: 0.9rem;
    content: '';
    height: 0.6rem;
    width: 0.6rem;
    box-shadow: 2px 2px #aeaeae;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); 
}
.icon_up{
    display: inline-block;
    position: absolute;
    right: 0.25rem;
    bottom: 0.9rem;
    content: '';
    height: 0.6rem;
    width: 0.6rem;
    box-shadow: 2px 2px #aeaeae;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg); 
}
.icon_left{
    display: inline-block;
    position: absolute;
    right: 0.5rem;
    bottom: 0.9rem;
    content: '';
    height: 0.6rem;
    width: 0.6rem;
    box-shadow: 2px 2px #aeaeae;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg); 
}

开关

<div class="switchWrap1 open close" id="J_lpyh_status">
    <div class="switchWrap2" id="J_lpyh_switch"></div>
</div>

.switchWrap{
    float: right;
    text-align: right;
    width: 4rem;
    height: 2.2rem;
}
.switchWrap1{
    width: 2.4rem;
    height: 1.2rem;
    border-radius: 0.6rem;
    position: relative;
    top: 0.5rem;
    left: 1.6rem;
}
.switchWrap2{
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.55rem;
    position: absolute;
    background: white;
}

设置字体大小（小于12px）

html{-webkit-text-size-adjust: none;}

1.只对chrome27.0 版本以下有效，27.0以上版本无效；

2.只对英文才有效，对中文无效。

在新版的chrome中，已经禁止了改属性,建议使用CSS3中的方法:

font-size: 9px; 
-webkit-transform: scale(0.75);
-o-transform: scale(1);

字体省略

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

去除input默认样式：

//去除边框
input{
    outline: none;
}

inout:focus{
    outline: none;
}

//去除Chrome自动填充的表单时淡黄色的背景
input:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
     -webkit-box-shadow: 0 0 0px 1000px white inset;//第一应用了自定义样式，第二个作为对照
}

//去除数字键盘右边的默认按钮
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;  
    height: auto;
}

这里比较丰富： http://www.zhangxinxu.com/wordpress/2013/06/%E4%BC%AA%E5%85%83%E7%B4%A0-%E8%A1%A8%E5%8D%95%E6%A0%B7%E5%BC%8F-pseudo-elements-style-form-controls/

多行文本垂直居中

方法一：采用display：table-cell

<div class="help_box">
    <div class="help_cont">
        <p>好好学习</p>
        <p>天天向上</p>
    </div>
</div>


.help_box{
    display: table;
    width: 100%;
    height: 2.75rem;
    text-align: center;
    font-size: 0.6rem;
}
.help_cont{
    vertical-align:middle; 
    display:table-cell; ; 
}

方法一：采用line-height( 让help_cont容器居中)

<div class="help_box">
    <div class="help_cont">
        <p>好好学习</p>
        <p>天天向上</p>
    </div>
</div>


.help_box{
    width: 100%;
    height: 7.75rem;
    line-height: 7.75rem;
}
.help_cont{
    display: inline-block;

    p{
        line-height: 1rem; 
    }
}

限制文本行数，多出文字已省略号结束

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
<p style="
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
">
 static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。fixed：对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。center：对象脱离常规流，使用top，right，bottom，left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。（CSS3）page：盒子的位置计算参照absolute。盒子在分页媒体或者区域块内，盒子的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） sticky： 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新
</p>
</body>
</html>

参考链接： http://www.css88.com/webkit/-webkit-line-clamp/

禁用默认菜单（触摸目标时）

-webkit-touch-callout
none：
系统默认菜单被禁用
inherit：
系统默认菜单不被禁用

参考链接： http://www.css88.com/webkit/-webkit-touch-callout/ （有兼容性）

不想浪费时间写重复代码(一)

猜你喜欢