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/2658202.html" title="古代辽国和金国是现在的什么地方？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="古代辽国和金国是现在的什么地方？" src="http://img.readke.com/230708/11342350B-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2658202.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/2432865.html" title="2023莱芜莲花山景区5月4日闭园通知莱芜莲花山风景区开放了吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="2023莱芜莲花山景区5月4日闭园通知莱芜莲花山风景区开放了吗" src="http://img.readke.com/230605/0QQ44360-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2432865.html"> <b>2023莱芜莲花山景区5月4日闭园通知莱芜莲花山风景区开放了吗 </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/1489227.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/1489227.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/1513783.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/1513783.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/2783891.html" title="德芙黑巧克力的作用和功效黑巧克力的作用"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="德芙黑巧克力的作用和功效黑巧克力的作用" src="http://img.readke.com/230720/203553C45-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2783891.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/0H4F2R021.html" title="衰老|都是同龄人，为何我看着那么老？4种“加速器”，别再吃了"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="衰老|都是同龄人，为何我看着那么老？4种“加速器”，别再吃了" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/0H4F2R021.html"> <b>衰老|都是同龄人，为何我看着那么老？4种“加速器”，别再吃了 </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/2348203.html" title="刺客信条英灵殿怎么换性别"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="刺客信条英灵殿怎么换性别" src="http://img.readke.com/230531/061A41108-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2348203.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/1668399.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/1668399.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/09252435532021.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/09252435532021.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/1062264.html" title="手机上方hd怎么关闭手机上方显示hd如何关闭"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="手机上方hd怎么关闭手机上方显示hd如何关闭" src="http://img.readke.com/230220/013K9D47-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1062264.html"> <b>手机上方hd怎么关闭手机上方显示hd如何关闭 </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/3884545.html" title="开源项目nio模型分析"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="开源项目nio模型分析" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3884545.html"> <b>开源项目nio模型分析 </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/2020545.html" title="笔记本低压和标压区别"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="笔记本低压和标压区别" src="http://img.readke.com/230510/211401N37-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2020545.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/3259222.html" title="出现依玛锅炉显示02怎么办,故障原因说明与3种解决方法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="出现依玛锅炉显示02怎么办,故障原因说明与3种解决方法" src="http://img.readke.com/231024/001533L63-0-lp.png"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3259222.html"> <b>出现依玛锅炉显示02怎么办,故障原因说明与3种解决方法 </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/2519719.html" title="男人多晒太阳有啥好处男人多晒晒太阳让精子更健康"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="男人多晒太阳有啥好处男人多晒晒太阳让精子更健康" src="http://img.readke.com/230614/101251J09-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2519719.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/527898.html" title="合肥市蜀山区税务局地址合肥税务局在哪里，瑶海区税务局新地址"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="合肥市蜀山区税务局地址合肥税务局在哪里，瑶海区税务局新地址" src="http://img.readke.com/220416/094A1D50-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/527898.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/1853557.html" title="＂病假，年假，事假＂英文怎么说？请假单英文"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="＂病假，年假，事假＂英文怎么说？请假单英文" src="http://img.readke.com/230429/22491a602-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1853557.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/3725479.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/3725479.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/3930212.html" title="需求分析要哪些文档,软件需求分析文档范例doc"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="需求分析要哪些文档,软件需求分析文档范例doc" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3930212.html"> <b>需求分析要哪些文档,软件需求分析文档范例doc </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/1035788.html" title="做祛眼袋手术会伤害到眼睛吗？去眼袋安全吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="做祛眼袋手术会伤害到眼睛吗？去眼袋安全吗" src="http://img.readke.com/230218/124S3A40-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1035788.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/1296598.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/1296598.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>