问题背景
在设计页面时，我们经常会遇到类似这样的页面布局：
图中一个容器内有多个内容块，每块都有一个底部的下划线，但是一般为了美观，最后一个内容块儿的下划线是要去掉的
接下来我们看看通常情况下，是如何处理这种样式的：
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>/* 此处为基本的展示样式，可以忽略不看 */.container{
border: 1px solid black;border-radius: 10px;width: 300px;height: 500px;margin: 100px auto;
}.child{
margin: 0 auto;width: 200px;height: 98px;border-bottom: 1px solid rgb(172, 163, 163);line-height: 98px;
}/* 此处为重点要看的样式 */.last{
border-bottom: 0;
}style>
head>
<body>
<div class="container">div>
<script>const elementList = ['我是内容1','我是内容2','我是内容3','我是内容4','我是内容5']const container = document.querySelector('.container')// 动态地向容器添加子元素
elementList.forEach((v, i, a) => {
const el = document.createEl
最低0.47元/天 解锁文章
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
