我的日常小积累总结

1. 点击一个标题时让它的背景颜色变成蓝色，其他的则是灰色

demo.html

<div class="container-box">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="#" class="color-style">流行</a>
            </div>
            <div class="swiper-slide">
                <a href="#">书单</a>
            </div>
            <div class="swiper-slide">
                <a href="#">喜欢</a>
            </div>
        </div>
    </div
</div>

demo.css

.color-style{
    color: #fff;
	background-color: #2385ff;
}

demo.js

$(function(){
    $('.container-box a').on('click', function(){
        $(this).addClass('color-style');
        $(this).parent('div').siblings().find('a').removeClass('color-style');
    });
    var swiper = new Swiper('.container-box .swiper-container',{
        slidesPerview: 3,//设置slide容器能够同时显示的slide数量，可以为数字(可以为小数，小数不可loop)，或者auto则自动根据slide宽度来设定数量，loop模式下如果设置auto，还需要设置另外一个参数loopSlides
        slidePerGroup: 1,//在carousel mode 下定义slide数量多少为一组
        loop: true,//循环
        autoplay: {
            delay: 5000,//自动切换的时间间隔
            disableOnInteraction: false//用户操作swiper之后，是否禁止autoplay,默认true：禁止。如果设置false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触碰、拖动、点击pagination
        }
    })
})

2. 在写table表格的时候去除表格间隙

table {
      border-collapse:collapse;
 }

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

• separate：默认值。边框会被分开。不会忽略border-spacing（设置相邻单元格的边框间的距离）和empty-cells（设置是否显示表格中的空单元格）属性
• collapse：边框回合并为单一的边框。会忽略border-spacing和empty-cells属性
• inherit：规定应该从复原继承border-collapse属性的的值

3. 字体图标旋转

.rotation{
    display: inline-block;
    transform: rotate(180deg);
}

4.多行文本溢出显示成略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;