常用标签

1.文本超出两行显示省略号

 //一行

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

    word-break: break-all;

//两行

 text-overflow: -o-ellipsis-lastline;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  line-clamp: 2;

  -webkit-box-orient: vertical;

 

2.左右位置互换

  display: -webkit-flex;
    /* Safari */
    -webkit-flex-direction: row-reverse;
    /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
左右

3.上下位置互换（当一排多个内容时  可通过order调整子类位置）

order: -1;

4.小三角形

span {
0;
height:0;
overflow:hidden;
border:7px solid transparent;
border-top-color:#2DCB70;//top就是倒三角，bottom就是上三角，left,right类似
}

5.鼠标移入图片放大

div{ 300px; height: 300px; border: #000 solid 1px; margin: 50px auto; overflow: hidden; }

div img{

cursor: pointer; 

transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;

}

div img:hover{

transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);

} 

6.背景上盖一层阴影

 background: rgba(0, 0, 0, .3) url(../image/ban_l.png) no-repeat center;

7.水平、垂直居中+换行（加在父级上）

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

7_1.两边对齐

justify-content: space-between;

8.设置文本框内提示文字

   /* 谷歌 */

input::-webkit-input-placeholder{
color:red;
font-size:20px;
}

input::placeholder{
color:red;
font-size:20px;
}

 绝对定位居中

 .conter{

     600px; height: 400px;

    position: absolute; left: 50%; top: 50%;

    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */

}

.jj_nr_wz {

    display: flex;

    justify-content: center;

    /* align-items: center; */

    /* 换主轴 */

    flex-direction: column;

    height: 100%;

}

 反转div

  .gy_tdjs .tdjs_nr ul li:hover .ne_qiu {

                    transform: rotateY(180deg);

                    -webkit-transform: rotateY(180deg);

                    -moz-transform: rotateY(180deg);

                    -ms-transform: rotateY(180deg);

                    -o-transform: rotateY(180deg);

                }

加过度时间

 文字间隔

 letter-spacing

去轮播图左右箭头默认边框

 outline:none

 

渐变

 background: linear-gradient( to right, #e5e8f5, #ccdafe) no-repeat;

     background: -webkit-linear-gradient( left,  #e5e8f5, #ccdafe) no-repeat;

 

鼠标移入图片翻转

.gy_gdt ul li .sy_xiaobanner {

     115px;

    height: 115px;

    padding: 19px 35px;

    transition: all .6s;

}

.gdt_tu:hover .sy_xiaobanner {

    transform: rotateY(180deg);

    -webkit-transform: rotateY(180deg);

    -moz-transform: rotateY(180deg);

    -ms-transform: rotateY(180deg);

    -o-transform: rotateY(180deg);

}

鼠标移入图片上移

-webkit-transform:translateY(-20px);
-moz-transform:translateY(-20px);
-ms-transform:translateY(-20px);
-o-transform:translateY(-20px);
transform:translateY(-20px)

手风琴效果

.jj_zt img{

   25%;

  height: 400px;

  transition: all .7s;

}

.jj_zt img:nth-child(1){

   50%;

  

}

.jj_zt:hover  img{

   25%;

}

.jj_zt img:hover{

   50%;

  

}

  <div class="jj_zt">

   

              

                    <img src="images/xxjj_08.jpg" alt="">

               

              

                

                    <img src="images/xxjj_08.jpg" alt="">

              

               

                    <img src="images/xxjj_08.jpg" alt="">

               

           

    </div>

点击下拉效果

                       <span class="gzy_nei">

                            <div class="yuan"></div>更专业

                        </span>

                        <div class="nerrong111">

                           1

                        </div>

                        <span class="gzy_nei2">

                            <div class="yuan"></div>更贴心

                        </span>

                        <div class="nerrong222">

                           2

                      </div>

 

    

                <script>

                    $(".gzy_nei").click(function() {

                        $(this).siblings(".nerrong111").slideDown().siblings(".nerrong222").slideUp();

                        // $(this).siblings(".nerrong222").slideUp();

                    });

                    $(".gzy_nei2").click(function() {

                        $(this).siblings(".nerrong222").slideDown().siblings(".nerrong111").slideUp();

                        // $(this).siblings(".nerrong222").slideUp();

                    });

                </script>