css|css 底部划线_一个非常实用的CSS小技巧，帮你应对各种场景 css|底部划线

问题背景在设计页面时，我们经常会遇到类似这样的页面布局：

文章图片
图中一个容器内有多个内容块，每块都有一个底部的下划线，但是一般为了美观，最后一个内容块儿的下划线是要去掉的
接下来我们看看通常情况下，是如何处理这种样式的：

html> Documenttitle><br>/* 此处为基本的展示样式，可以忽略不看 */.container{border: 1px solid black; border-radius: 10px; width: 300px; height: 500px; margin: 100px auto; <br>}.child{margin: 0 auto; width: 200px; height: 98px; border-bottom: 1px solid rgb(172, 163, 163); line-height: 98px; <br>}/* 此处为重点要看的样式 */.last{border-bottom: 0; <br>}style><br>head><br><body><br>div><br><br>const elementList = ['我是内容1','我是内容2','我是内容3','我是内容4','我是内容5']const container = document.querySelector('.container')// 动态地向容器添加子元素<br>elementList.forEach((v, i, a) => {const el = document.createElement('div')/* 判断添加的子元素是否为最后一个<br>若是，则给一个 last 类名<br>*/<br>el.className = i == a.length - 1 ? 'child last' : 'child'<br>el.innerHTML = v<br>container.appendChild(el)<br>})script><br>body><br>html><br></code></code></blockquote><br /> 上述代码中，假设我们不知道一共要往容器中添加多少个子元素，所以只能每次添加时都判断一下是否为最后一个，若是的话，就添加一个 <code>last</code> 类名用于清除 <code>border-bottom</code><br /> 这样的确完成可以解决问题，但却存在一个「缺陷」，那就是如果在添加完这些内容以后，又动态地要往这个容器内追加更多的内容时，上一次的最后一个内容块儿底部是没有下划线的，因为它被添加了一个 <code>last</code> 类名，此时就类似于「下拉加载更多」这样一个场景，我们来非常简单地模拟一下：<br /> <blockquote><code><code>html><br><br><br><meta charset="UTF-8"><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><title>Documenttitle><br>/* 此处为基本的展示样式，可以忽略不看 */.container{border: 1px solid black; border-radius: 10px; width: 300px; height: 500px; margin: 100px auto; overflow: scroll; <br>}.child{margin: 0 auto; width: 200px; height: 98px; border-bottom: 1px solid rgb(172, 163, 163); line-height: 98px; <br>}/* 此处为重点要看的样式 */.last{border-bottom: 0; <br>}style><br>head><br><body><br>div><br><br>const container = document.querySelector('.container')const elementList = ['我是内容1','我是内容2','我是内容3','我是内容4','我是内容5']function debounce(fn, delay=500) {let timer = nullreturn function(...args) {if(timer) clearTimeout(timer); <br>timer = setTimeout(() => {<br>fn.apply(this, args)<br>clearTimeout(timer)<br>}, delay)<br>}<br>}// 防抖处理let addMore = debounce(function(container, list) {<br>list.forEach((v, i, a) => {const el = document.createElement('div')<br>el.className = i == a.length - 1 ? 'child last' : 'child'<br>el.innerHTML = v<br>container.appendChild(el)<br>})<br>})// 页面初次加载，向容器中动态添加内容<br>addMore(container, elementList)// 为容器添加滚动事件<br>container.addEventListener('scroll', function() {<br>addMore(container, elementList)<br>})script><br>body><br>html><br></code></code></blockquote><br /> 我们来看看容器向下滚动后会出现什么情况：<br /> <img alt="css|css 底部划线_一个非常实用的CSS小技巧，帮你应对各种场景" onload="javascript:ImgReSize(this)" src="https://img.it610.com/image/info8/dcc6300c6f444da7b63a4f0b3e6bdfd8.gif"/> <br /> 文章图片 <br /> 在上述动图中可以很清晰地看到，每次加载的一段内容后，上一段内容的最后一个内容块儿底部是没有下划线的，这就非常得不友好了<br /> 接下来就来介绍一个css小技巧来解决上述问题的尴尬<br /> 解决方案这里可以用到css的「兄弟选择器」，即 <code>element1 + element2</code>，其表示的是选择 <code>element1</code> 之后的处于同一层级的所有 <code>element2</code><br /> 我们来看一下具体的代码实现：<br /> <blockquote><code><code>html><br><br><br><meta charset="UTF-8"><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><title>Documenttitle><br>/* 此处为基本的展示样式，可以忽略不看 */.container{border: 1px solid black; border-radius: 10px; width: 300px; height: 500px; margin: 100px auto; overflow: scroll; <br>}.child{margin: 0 auto; width: 200px; height: 98px; line-height: 98px; <br>}/* 此处为重点要看的样式 */.child + .child {border-top: 1px solid rgb(172, 163, 163); <br>}style><br>head><br><body><br>div><br><br>const container = document.querySelector('.container')const elementList = ['我是内容1','我是内容2','我是内容3','我是内容4','我是内容5']function debounce(fn, delay=500) {let timer = nullreturn function(...args) {if(timer) clearTimeout(timer); <br>timer = setTimeout(() => {<br>fn.apply(this, args)<br>clearTimeout(timer)<br>}, delay)<br>}<br>}// 防抖处理let addMore = debounce(function(container, list) {<br>list.forEach((v, i, a) => {const el = document.createElement('div')<br>el.className = 'child'<br>el.innerHTML = v<br>container.appendChild(el)<br>})<br>})// 页面初次加载，向容器中动态添加内容<br>addMore(container, elementList)// 为容器添加滚动事件<br>container.addEventListener('scroll', function() {<br>addMore(container, elementList)<br>})script><br>body><br>html><br></code></code></blockquote><br /> 上述代码中的 <code>.child + .child</code> 表示选择类名为 <code>child</code> 之后的所有同一层级的类名为 <code>child</code> 的元素，因此第一个类名为 <code>child</code> 的元素是无法被选择到的，因此为了达到效果，我们选择为选择到的每个元素设置 <code>border-top</code>，这样就达到了想要的效果，并且即使之后动态地添加了更多的元素，也不会有什么问题<br /> 效果验证：<br /> <img alt="css|css 底部划线_一个非常实用的CSS小技巧，帮你应对各种场景" onload="javascript:ImgReSize(this)" src="https://img.it610.com/image/info8/238437c04f0c426d91e75697e9f59f52.gif"/> <br /> 文章图片 <br /> 总结简单总结一下本文介绍的css小技巧有什么「优点」：<br /> <ol> <li>使得项目代码更加简洁</li> <li>不会像传统的处理方法那样有多余的类名</li> <li>能适应动态改变的元素</li> </ol> 希望这个小技巧对你们有所帮助，如果还有别的更巧妙的方法，可以评论告诉我哈~<br /> <strong>【css|css 底部划线_一个非常实用的CSS小技巧，帮你应对各种场景】</strong>「推荐阅读」 ?<br /> <ul> <li>多图生动详解浏览器与Node环境下的Event Loop</li> <li>学习过CSS，那你知道BFC是什么吗？</li> <li>快速使用Vue3最新的15个常用API</li> <li>关于Vue3获取当前组件实例的 getCurrentInstance 方法的补充</li> </ul></p> <div class="dede_pages"><ul></ul></div> <div class="pcd_ad"> <center><div class="_ahwullr0ac"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6834461", container: "_ahwullr0ac", async: true }); </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script></center> </div> <div class="mbd_ad"> <div style=margin-top:10px;margin-bottom:10px;> <div class="_i7aftr79jl"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u5950612", container: "_i7aftr79jl", async: true }); </script>  <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script> </div> </div> <h3>推荐阅读</h3> <ul class="post-loop post-loop-default cols-0"> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1392701.html" title="北控水务为什么不涨北控水务到底好不好"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="北控水务为什么不涨北控水务到底好不好" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1392701.html"> <b>北控水务为什么不涨北控水务到底好不好 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3386932.html" title="牵组词语汉字牵组词语"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="牵组词语汉字牵组词语" src="http://img.readke.com/231108/1031322353-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3386932.html"> <b>牵组词语汉字牵组词语 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1586661.html" title="月季花扦插的最佳时间月季花扦插的最佳时间现在可以插吗?"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="月季花扦插的最佳时间月季花扦插的最佳时间现在可以插吗?" src="http://img.readke.com/230416/01421Q157-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1586661.html"> <b>月季花扦插的最佳时间月季花扦插的最佳时间现在可以插吗? </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1035883.html" title="2023重庆医科大学研究生成绩复查申请时间+方式"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="2023重庆医科大学研究生成绩复查申请时间+方式" src="http://img.readke.com/230218/125542L42-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1035883.html"> <b>2023重庆医科大学研究生成绩复查申请时间+方式 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3089257.html" title="n95口罩能防尘吗 n95口罩可以用几次"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="n95口罩能防尘吗 n95口罩可以用几次" src="http://img.readke.com/230830/1043106337-0-lp.png"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3089257.html"> <b>n95口罩能防尘吗 n95口罩可以用几次 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2856390.html" title="摩托罗拉里程碑2刷机"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="摩托罗拉里程碑2刷机" src="http://img.readke.com/230727/0624346150-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2856390.html"> <b>摩托罗拉里程碑2刷机 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3015877.html" title="如果你爱的人总是以怨报德,你会怎么样？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="如果你爱的人总是以怨报德,你会怎么样？" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3015877.html"> <b>如果你爱的人总是以怨报德,你会怎么样？ </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/01264295R2022.html" title="宝马525多少钱落地宝马525价格多少钱"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="宝马525多少钱落地宝马525价格多少钱" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/01264295R2022.html"> <b>宝马525多少钱落地宝马525价格多少钱 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/540738.html" title="电商铺货是什么意思电商货架什么意思，货架市场"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="电商铺货是什么意思电商货架什么意思，货架市场" src="http://img.readke.com/220418/060ITU6-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/540738.html"> <b>电商铺货是什么意思电商货架什么意思，货架市场 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3038037.html" title="胡萝卜怎样吃最有营养啊视频胡萝卜怎样吃最有营养啊"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="胡萝卜怎样吃最有营养啊视频胡萝卜怎样吃最有营养啊" src="http://img.readke.com/230820/0421002531-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3038037.html"> <b>胡萝卜怎样吃最有营养啊视频胡萝卜怎样吃最有营养啊 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1714478.html" title="巴戟天药材多少钱一斤，巴戟天药店多少钱一斤"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="巴戟天药材多少钱一斤，巴戟天药店多少钱一斤" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1714478.html"> <b>巴戟天药材多少钱一斤，巴戟天药店多少钱一斤 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1616202.html" title="吕锅上的污渍怎么去除啊"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="吕锅上的污渍怎么去除啊" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1616202.html"> <b>吕锅上的污渍怎么去除啊 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1456743.html" title="非主流图片唯美霸气非主流相框素材"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="非主流图片唯美霸气非主流相框素材" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1456743.html"> <b>非主流图片唯美霸气非主流相框素材 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3161832.html" title="白金膏的功效与作用皮白金膏的功效与作用?"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="白金膏的功效与作用皮白金膏的功效与作用?" src="http://img.readke.com/230916/102KQ554-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3161832.html"> <b>白金膏的功效与作用皮白金膏的功效与作用? </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3606533.html" title="虚拟机怎么开网页游戏模式，虚拟机怎样打开网页"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="虚拟机怎么开网页游戏模式，虚拟机怎样打开网页" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3606533.html"> <b>虚拟机怎么开网页游戏模式，虚拟机怎样打开网页 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2419587.html" title="闻鸡起舞的主人公是谁囊萤映雪的主人公是谁"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="闻鸡起舞的主人公是谁囊萤映雪的主人公是谁" src="http://img.readke.com/230604/0644104237-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2419587.html"> <b>闻鸡起舞的主人公是谁囊萤映雪的主人公是谁 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2346883.html" title="口红吃饭的时候怎么办"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="口红吃饭的时候怎么办" src="http://img.readke.com/230531/04534J5D-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2346883.html"> <b>口红吃饭的时候怎么办 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2749458.html" title="宝宝长期咳嗽易得肺炎"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="宝宝长期咳嗽易得肺炎" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2749458.html"> <b>宝宝长期咳嗽易得肺炎 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1529160.html" title="包贝尔大婚柳岩遭闹伴娘柳岩伴娘事件是什么?"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="包贝尔大婚柳岩遭闹伴娘柳岩伴娘事件是什么?" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1529160.html"> <b>包贝尔大婚柳岩遭闹伴娘柳岩伴娘事件是什么? </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3697688.html" title="未婚生子罚款多少2022年未婚生子罚款多少2022？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="未婚生子罚款多少2022年未婚生子罚款多少2022？" src="http://img.readke.com/231214/013K53A5-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3697688.html"> <b>未婚生子罚款多少2022年未婚生子罚款多少2022？ </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> </ul> <p><br /><ul class="post-loop post-loop-list cols-4"><li><a href="/c/03224JU22022.html" title="Html|html+css漂亮登录页面" target="_blank">Html|html+css漂亮登录页面 </a></li> <li><a href="/c/03214J63H022.html" title="JavaScript|打了BOM，来了DOM（）" target="_blank">JavaScript|打了BOM，来了DOM（） </a></li> <li><a href="/c/03214J6362022.html" title="JavaScript|什么，BOM指的是物料清单（）" target="_blank">JavaScript|什么，BOM指的是物料清单（） </a></li> <li><a href="/c/03214J5T2022.html" title="css浮动和定位" target="_blank">css浮动和定位 </a></li> <li><a href="/c/03204J0L2022.html" title="一些零碎代码|分享一个会遮掩的吊炸天登录页面" target="_blank">一些零碎代码|分享一个会遮掩的吊炸天登录页面 </a></li> <li><a href="/c/03204IQ52022.html" title="html|Html+Css+js实现春节倒计时效果" target="_blank">html|Html+Css+js实现春节倒计时效果 </a></li> <li><a href="/c/03194IPH022.html" title="html|Html+Css+js实现春节倒计时效果（移动端和PC端）" target="_blank">html|Html+Css+js实现春节倒计时效果（移动端和PC端） </a></li> <li><a href="/c/03194IP62022.html" title="开源说|除夕用不同的语言编写绚丽的烟花" target="_blank">开源说|除夕用不同的语言编写绚丽的烟花 </a></li> <li><a href="/c/03194IK22022.html" title="工具及脚本|青龙面板2.9，以及wskey自动转换ck配置" target="_blank">工具及脚本|青龙面板2.9，以及wskey自动转换ck配置 </a></li> </ul></p> <div class=entry-copyright> <p></p> </div> </div> <div class="entry-footer"> <div class="prev-next sb br mb clearfix"> <p class="post-prev fl ellipsis">上一篇：<a href='/c/03234K5a2022.html'>算法|leetcode378. 有序矩阵中第 K 小的元素</a> </p> <p class="post-next fr ellipsis">下一篇：<a href='/c/03234K5c2022.html'>菜鸟刷题|蓝桥杯每日一题——最大字段和问题（动态规划）</a> </p> </div> </div> </div> </article> </main> <aside class="sidebar"> <div class="widget widget_post_thumb"> <h3 class="widget-title"><span>更多...</span></h3> <ul> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/03234K5c2022.html" title="菜鸟刷题|蓝桥杯每日一题——最大字段和问题（动态规划）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="菜鸟刷题|蓝桥杯每日一题——最大字段和问题（动态规划）" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/03234K5c2022.html" title="菜鸟刷题|蓝桥杯每日一题——最大字段和问题（动态规划）">菜鸟刷题|蓝桥杯每日一题——最大字段和问题（动态规划）</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/03234K5b2022.html" title="css|css 底部划线_一个非常实用的CSS小技巧，帮你应对各种场景"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="css|css 底部划线_一个非常实用的CSS小技巧，帮你应对各种场景" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/03234K5b2022.html" title="css|css 底部划线_一个非常实用的CSS小技巧，帮你应对各种场景">css|css 底部划线_一个非常实用的CSS小技巧，帮你应对各种场景</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/03234K5a2022.html" title="算法|leetcode378. 有序矩阵中第 K 小的元素"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="算法|leetcode378. 有序矩阵中第 K 小的元素" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/03234K5a2022.html" title="算法|leetcode378. 有序矩阵中第 K 小的元素">算法|leetcode378. 有序矩阵中第 K 小的元素</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/03234K5962022.html" title="算法|104 二叉树的最大深度（Java）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="算法|104 二叉树的最大深度（Java）" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/03234K5962022.html" title="算法|104 二叉树的最大深度（Java）">算法|104 二叉树的最大深度（Java）</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/03234K5952022.html" title="开发|leetcode112 路径总和"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="开发|leetcode112 路径总和" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/03234K5952022.html" title="开发|leetcode112 路径总和">开发|leetcode112 路径总和</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/03234K5942022.html" title="C语言必学的数据结构|还在抱怨数据结构难? 一文带你搞懂如何AC算法题(2022版)"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="C语言必学的数据结构|还在抱怨数据结构难? 一文带你搞懂如何AC算法题(2022版)" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/03234K5942022.html" title="C语言必学的数据结构|还在抱怨数据结构难? 一文带你搞懂如何AC算法题(2022版)">C语言必学的数据结构|还在抱怨数据结构难? 一文带你搞懂如何AC算法题(2022版)</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/03234K5932022.html" title="数据结构|模拟栈的实现（JAVA）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="数据结构|模拟栈的实现（JAVA）" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/03234K5932022.html" title="数据结构|模拟栈的实现（JAVA）">数据结构|模拟栈的实现（JAVA）</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/03234K5922022.html" title="c++|《每日一题》面试题 02.07. 链表相交"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="c++|《每日一题》面试题 02.07. 链表相交" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/03234K5922022.html" title="c++|《每日一题》面试题 02.07. 链表相交">c++|《每日一题》面试题 02.07. 链表相交</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/03234K5912022.html" title="解决Ubuntu虚拟机占用空间与实际空间不符问题"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="解决Ubuntu虚拟机占用空间与实际空间不符问题" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/03234K5912022.html" title="解决Ubuntu虚拟机占用空间与实际空间不符问题">解决Ubuntu虚拟机占用空间与实际空间不符问题</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/03234K5X2022.html" title="Android|薪资倒挂（行业内卷？2022年最新Android学习路线整理分享，带你干倒世界卷王）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="Android|薪资倒挂（行业内卷？2022年最新Android学习路线整理分享，带你干倒世界卷王）" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/03234K5X2022.html" title="Android|薪资倒挂（行业内卷？2022年最新Android学习路线整理分享，带你干倒世界卷王）">Android|薪资倒挂（行业内卷？2022年最新Android学习路线整理分享，带你干倒世界卷王）</a></p> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-logo"> </div> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"> <li class="menu-item menu-item-706"><a href="/baike/">生活百科</a></li> <li class="menu-item menu-item-706"><a href="/it/">it技术</a></li> </ul> <div class="copyright"> <p>Copyright © 2017-2022 锐客网 <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备11041112号-41</a> </p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> </div> </div> </div> </div> </footer> <div class="action action-style-0 action-color-0 action-pos-1" style="bottom:15%;"> <div class="action-item gotop j-top"> <i class="web-icon wi action-item-icon"><svg aria-hidden="true"> <use xlink:href="#wi-arrow-up-2"></use> </svg></i></div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?79e4e485d34c6fc717489eaa10b314e3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <script>var _web_js={};</script> <script src="/skin/js/index.js"></script> </body> </html>