前端的案例

文字中间的横线

使用 CSS :before 及 :after 伪元素制作文字左右的横线

css

.title {
 	font-size: 20px;
 	color: #3D1101;
    line-height: 32px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
}

span {
	// 文字上下置中效果
	display: block; 
	// 定位横线(当横线的父元素)
	position: relative; 
}

.title span:before , .title span:after{
  	position: absolute; //定位背景横线位置
    content: ''; // CSS伪类用法
   	width: 122px;
 	height: 1px;
  	align-items: center; //罝中
 	background: #979797;
}

// 调整位置
.title span:before{
   	left: 25%;
}

.title span:after{
   	right: 25%;
}

HTML

<h2 class="title">客人总是在询问<span>这么好吃的秘诀是什么</span></h2>

单、多行省略

单行省略

	div {
            width: 200px;
            border: 1px solid red;
        
            /* 单行省略 */
            overflow: hidden;
            /* 溢出显示省略号，需要配置overflow使用 */
            text-overflow: ellipsis;
            /* 全部文字一行显示 */
            white-space: nowrap;
        }

多行省略

利用伪元素相互遮盖

    <p>
        当用户登录完成之后，当用户登录完成之后，当用户登录完成之后，当用户登录完成之后
        当用户登录完成之后，当用户登录完成之后，当用户登录完成之后，当用户登录完成之后
    </p>
    
    p {
            height: 86px;
            width: 200px;
            border: 1px solid red;
            overflow: hidden;
            position: relative;
            padding-right: 1em;
            text-align: justify;
        }

        p::before {
            content: "...";
            position: absolute;
            right: 0;
            bottom: 0;
        }

        p::after {
            content: "";
            /* 颜色要和背景颜色一致 用来覆盖掉省略号 */
            background: #fff;
            width: 1em;
            height: 1em;
            position: absolute;
            display: inline;
            right: 0px;
            /* 开发中根据实际位置调整 */
            margin-top: 0.5em;
        }

渐变省略

		<p>
        当用户登录完成之后，当用户登录完成之后，当用户登录完成之后，当用户登录完成之后
        当用户登录完成之后，当用户登录完成之后，当用户登录完成之后，当用户登录完成之后
    	</p>
    	
		p {
            height: 65px;
            width: 200px;
            border: 1px solid black;
            overflow: hidden;
            position: relative;
            text-align: justify;
        }
        p::after {
            content: "";
            position: absolute;
            height: 1.2em;
            width: 50%;
            background: linear-gradient(to right,rgba(255,255,255,0),#fff 80%);
            right: 0;
            bottom: 0;
            margin-bottom: 0.2em;
        }

tab栏切换

html

    <div class="tab">
        <div class="tab_list">
            <ul>
                <!-- 默认选中样式 -->
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
        </div>
    </div>

css

        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 400px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item {
            display: none;
        }

js

        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            //添加自定义属性 设置索引号 
            lis[i].setAttribute('index', i);

            lis[i].addEventListener('click',function() {
                //排他思想
                //清楚所有li的样式类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                //对应的li添加样式类
                this.className = 'current';

                //显示内容模块
                var index = this.getAttribute('index');
                console.log(index);
                //让所有的item隐藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                //让对应的item显示出来
                items[index].style.display = 'block';
            })
        }

a标签不跳转

<a href="javascrip:;">百度</a>

forEach()

​ 方法用于遍历数组，但需要一个函数才能使用

var arr = [1,2,3,4,5,6];
arr.forEach((s)=>{
	console.log(s)
});
//输出1 2 3 4 5 6