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/1403484.html" title="补水喷雾使用方法是怎样"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="补水喷雾使用方法是怎样" src="http://img.readke.com/230404/2033404237-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1403484.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/091621D052021.html" title="Android|Android 5.0+ 屏幕录制实现"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="Android|Android 5.0+ 屏幕录制实现" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/091621D052021.html"> <b>Android|Android 5.0+ 屏幕录制实现 </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/4096491.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/4096491.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/3909518.html" title="佳能700d拍电商产品佳能700d淘宝"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="佳能700d拍电商产品佳能700d淘宝" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3909518.html"> <b>佳能700d拍电商产品佳能700d淘宝 </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/3629966.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/3629966.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/1270091.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/1270091.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/3317102.html" title="打击报复证人行为涉嫌犯罪的一般会怎么样判罚"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="打击报复证人行为涉嫌犯罪的一般会怎么样判罚" src="http://img.readke.com/231030/1R9355N0-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3317102.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/3316474.html" title="2022年陕西养老金上调方案公布了吗？陕西养老金调整方案2022年最新消息参考2021"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="2022年陕西养老金上调方案公布了吗？陕西养老金调整方案2022年最新消息参考2021" src="http://img.readke.com/231030/1F0203928-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3316474.html"> <b>2022年陕西养老金上调方案公布了吗？陕西养老金调整方案2022年最新消息参考2021 </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/1133329.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/1133329.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/1302105.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/1302105.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/2578690.html" title="阳光房改造卧室方法是怎样的"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="阳光房改造卧室方法是怎样的" src="http://img.readke.com/230626/0441293V4-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2578690.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/2442595.html" title="刚出生的猫怎么人工喂养"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="刚出生的猫怎么人工喂养" src="http://img.readke.com/230606/041201M36-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2442595.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/1227368.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/1227368.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/4126080.html" title="redis支持10万并发 redis集群10万并发"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="redis支持10万并发 redis集群10万并发" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/4126080.html"> <b>redis支持10万并发 redis集群10万并发 </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/2284820.html" title="耳罩的平均隔声值在多少分贝"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="耳罩的平均隔声值在多少分贝" src="http://img.readke.com/230527/2312494448-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2284820.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/2816300.html" title="空调内机噪音大嗡嗡响怎么回事空调内机运行外机不转怎么回事"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="空调内机噪音大嗡嗡响怎么回事空调内机运行外机不转怎么回事" src="http://img.readke.com/230723/1U1201024-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2816300.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/3390601.html" title="惠普笔记本型号大全介绍惠普Elitebook G4评测体验"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="惠普笔记本型号大全介绍惠普Elitebook G4评测体验" src="http://img.readke.com/231108/23512322R-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3390601.html"> <b>惠普笔记本型号大全介绍惠普Elitebook G4评测体验 </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/2791442.html" title="红楼梦林黛玉与北静王林黛玉与北静王小说"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="红楼梦林黛玉与北静王林黛玉与北静王小说" src="http://img.readke.com/230721/145U54D7-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2791442.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/1029508.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/1029508.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/092R54a52021.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/092R54a52021.html"> <b>中国华西村姑娘时代服饰写意 </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>