css 底部划线_一个非常实用的CSS小技巧，帮你应对各种场景
问题背景
在设计页面时，我们经常会遇到类似这样的页面布局：
图中一个容器内有多个内容块，每块都有一个底部的下划线，但是一般为了美观，最后一个内容块儿的下划线是要去掉的
接下来我们看看通常情况下，是如何处理这种样式的：
html>
Documenttitle><br> <style>/* 此处为基本的展示样式，可以忽略不看 */.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 class="container">div><br><br> <script>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></pre>
<p>上述代码中，假设我们不知道一共要往容器中添加多少个子元素，所以只能每次添加时都判断一下是否为最后一个，若是的话，就添加一个 <code>last</code> 类名用于清除 <code>border-bottom</code></p>
<p>这样的确完成可以解决问题，但却存在一个<strong>「缺陷」</strong>，那就是如果在添加完这些内容以后，又动态地要往这个容器内追加更多的内容时，上一次的最后一个内容块儿底部是没有下划线的，因为它被添加了一个 <code>last</code> 类名，此时就类似于<strong>「下拉加载更多」</strong>这样一个场景，我们来非常简单地模拟一下：</p>
<pre><code><code>html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Documenttitle><br> <style>/* 此处为基本的展示样式，可以忽略不看 */.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 class="container">div><br><br> <script>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></pre>
<p>我们来看看容器向下滚动后会出现什么情况：</p> <a href="http://img.e-com-net.com/image/info8/dcc6300c6f444da7b63a4f0b3e6bdfd8.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/dcc6300c6f444da7b63a4f0b3e6bdfd8.gif" alt="css 底部划线_一个非常实用的CSS小技巧，帮你应对各种场景_第2张图片" width="756" height="768" style="border:1px solid black;"></a>
<p>在上述动图中可以很清晰地看到，每次加载的一段内容后，上一段内容的最后一个内容块儿底部是没有下划线的，这就非常得不友好了</p>
<p>接下来就来介绍一个css小技巧来解决上述问题的尴尬</p>
<h1><span style="font-weight:bold;"></span><span style="font-weight:bold;">解决方案</span></h1>
<p>这里可以用到css的<strong>「兄弟选择器」</strong>，即 <code>element1 + element2</code>，其表示的是选择 <code>element1</code> 之后的处于同一层级的所有 <code>element2</code></p>
<p>我们来看一下具体的代码实现：</p>
<pre><code><code>html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Documenttitle><br> <style>/* 此处为基本的展示样式，可以忽略不看 */.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 class="container">div><br><br> <script>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></pre>
<p>上述代码中的 <code>.child + .child</code> 表示选择类名为 <code>child</code> 之后的所有同一层级的类名为 <code>child</code> 的元素，因此第一个类名为 <code>child</code> 的元素是无法被选择到的，因此为了达到效果，我们选择为选择到的每个元素设置 <code>border-top</code>，这样就达到了想要的效果，并且即使之后动态地添加了更多的元素，也不会有什么问题</p>
<p>效果验证：</p> <a href="http://img.e-com-net.com/image/info8/238437c04f0c426d91e75697e9f59f52.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/238437c04f0c426d91e75697e9f59f52.gif" alt="css 底部划线_一个非常实用的CSS小技巧，帮你应对各种场景_第3张图片" width="731" height="780" style="border:1px solid black;"></a>
<h1><span style="font-weight:bold;"></span><span style="font-weight:bold;">总结</span></h1>
<p>简单总结一下本文介绍的css小技巧有什么<strong>「优点」</strong>：</p>
<ol>
<li>使得项目代码更加简洁</li>
<li>不会像传统的处理方法那样有多余的类名</li>
<li>能适应动态改变的元素</li>
</ol>
<p>希望这个小技巧对你们有所帮助，如果还有别的更巧妙的方法，可以评论告诉我哈~</p>
<p><strong>「推荐阅读」</strong> ?</p>
<ul>
<li>多图生动详解浏览器与Node环境下的Event Loop</li>
<li>学习过CSS，那你知道BFC是什么吗？</li>
<li>快速使用Vue3最新的15个常用API</li>
<li>关于Vue3获取当前组件实例的 getCurrentInstance 方法的补充</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1506553361363697664"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>
<!-- 文章页-底部 动态广告位 -->
<div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
</div>
<div class="col-md-3">
<div class="row" id="ad">
<!-- 文章页-右侧1 动态广告位 -->
<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_1"> </div>
</div>
<!-- 文章页-右侧2 动态广告位 -->
<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_2"></div>
</div>
<!-- 文章页-右侧3 动态广告位 -->
<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(css,底部划线)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1883151609278558208.htm"
title="CSS学习笔记9——定位position" target="_blank">CSS学习笔记9——定位position</a>
<span class="text-muted">green_pine_</span>
<a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>CSS定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子定位组成定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式边偏移决定了该元素的最终位置定位模式通过position属性来设置值语义static静态定位relative相对定位absolute绝对定位fixed固定定位边偏移属性：top、bottom、left、right属性示例描述toptop:</div>
</li>
<li><a href="/article/1883122236152410112.htm"
title="2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽安全-黑客4148</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AF%86%E7%A0%81%E5%AD%A6/1.htm">密码学</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/ddos/1.htm">ddos</a>
<div>基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15</div>
</li>
<li><a href="/article/1883111896261914624.htm"
title="vue 拖动、缩放容器组件，支持移动端双指缩放和PC端鼠标滚轮缩放" target="_blank">vue 拖动、缩放容器组件，支持移动端双指缩放和PC端鼠标滚轮缩放</a>
<span class="text-muted">warmbook</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>原理本组件基于CSS的transform实现。移动端监听touch事件（单指移动，双指移动+缩放），PC端监听mouse事件（移动）和滚动事件wheel（缩放），更新transform的translateX/translateY/scale值，从而实现缩放、移动。由于transform不会产生重排，因此不节流也可以有很好的性能，用户体验就像德芙，纵享丝滑！鼠标事件比较好理解，记录鼠标按下时的坐标，</div>
</li>
<li><a href="/article/1883085285055590400.htm"
title="基于 Node.js 的天气查询系统实现(附源码）" target="_blank">基于 Node.js 的天气查询系统实现(附源码）</a>
<span class="text-muted">Kasper0121</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
<div>项目概述这是一个基于Node.js的全栈应用，前端使用原生JavaScript和CSS，后端使用Express框架，通过调用第三方天气API实现天气数据的获取和展示。主要功能默认显示多个主要城市的天气信息支持城市天气搜索响应式布局设计深色主题界面优雅的加载动画技术栈后端：Node.js+Express前端：HTML5+CSS3+JavaScriptHTTP客户端：AxiosAPI：天气API(v1</div>
</li>
<li><a href="/article/1883067508987064320.htm"
title="关于CSS中毛玻璃和滤镜使用总结" target="_blank">关于CSS中毛玻璃和滤镜使用总结</a>
<span class="text-muted">计算机软件程序设计</span>
<a class="tag" taget="_blank" href="/search/%E7%9F%A5%E8%AF%86%E7%A7%91%E6%99%AE/1.htm">知识科普</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>【1】毛玻璃毛玻璃效果（也称为磨砂玻璃效果）可以通过CSS的backdrop-filter属性来实现。这个属性允许你在背景上应用各种滤镜效果，从而创建出类似磨砂玻璃的效果。这种效果通常用于创建半透明背景下的模糊效果，使得背景图像或颜色变得柔和，同时保持前景内容的清晰可见。示例代码HTML结构CSS毛玻璃效果毛玻璃效果这是一个使用CSS创建的毛玻璃效果。CSS样式body,html{height:1</div>
</li>
<li><a href="/article/1883050103674040320.htm"
title="HTML&CSS ：如此优雅丝滑的导航栏，你不看看吗？" target="_blank">HTML&CSS ：如此优雅丝滑的导航栏，你不看看吗？</a>
<span class="text-muted">前端Hardy</span>
<a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>这段代码创建了一个动态的导航栏，通过CSS技术实现了按钮的激活和悬停效果，以及动态背景效果，为页面添加了视觉吸引力和用户交互体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你演示效果HTML&CSS公众号关注：前端Hardybody{margin:0;padding:0;background-color:#07</div>
</li>
<li><a href="/article/1883040116977496064.htm"
title="React Native 0.77 发布：更强的样式支持与性能优化" target="_blank">React Native 0.77 发布：更强的样式支持与性能优化</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a>
<div>CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读ReactNative0.77正式发布！此次版本带来了多项重要改进，包括样式功能的增强、Android平台的性能优化以及项目模板的升级。这一版本的核心目标是提升开发效率，同时确保在不同平台上的兼容性。接下来，我们来看看这次更新中的亮点内容。主要更新内容✨全新CSS特性支持：新增对display:contents、boxSizing、</div>
</li>
<li><a href="/article/1883039009773514752.htm"
title="参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽子凯哥</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/CTF%E5%A4%BA%E6%97%97%E8%B5%9B/1.htm">CTF夺旗赛</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a>
<div>基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15</div>
</li>
<li><a href="/article/1883039010843062272.htm"
title="参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽子凯哥</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/CTF%E5%A4%BA%E6%97%97%E8%B5%9B/1.htm">CTF夺旗赛</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a>
<div>基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15</div>
</li>
<li><a href="/article/1883031443190378496.htm"
title="vue项目运行报：SassError: expected selector..." target="_blank">vue项目运行报：SassError: expected selector...</a>
<span class="text-muted">落日弥漫的橘_</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>SassError:expectedselector错误通常由于Sass或SCSS文件中存在语法错误或选择器缺失，导致Sass编译器无法解析。Sass语法语法中误用深度选择器语法导致以上问题。/deep/和::v-deep都是用于Vue单文件组件（.vue文件）中的样式穿透选择器;/deep/在Sass中并不被支持，如果是在Vue单文件组件中，并且需要穿透样式，可以使用::v-deep代替/dee</div>
</li>
<li><a href="/article/1882952644629164032.htm"
title="uniapp uview 一键回到底部 组件" target="_blank">uniapp uview 一键回到底部 组件</a>
<span class="text-muted">顾鸟</span>
<a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
<div>一、封装组件底部exportdefault{name:"BackBottom",props:{bottom:{type:Number,default:100}},data(){return{pageHeight:0,scrollHeight:0,diffHeight:this.bottom+1,//初始值大于bottom，防止首次渲染不显示};},computed:{show(){returnth</div>
</li>
<li><a href="/article/1882948859404021760.htm"
title="YOLO 安装 并且命令行指定配置文件" target="_blank">YOLO 安装 并且命令行指定配置文件</a>
<span class="text-muted">ELI_He999</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/YOLO/1.htm">YOLO</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a>
<div>pipinstallultralyticssettings.yaml保存到当前目录，data参数yolo命令行指定配置文件{"settings_version":"0.0.6","datasets_dir":"xxxx\\datasets","weights_dir":"xxxx\\weights","runs_dir":"xxxx\\runs","uuid":"xxxx","sync":true</div>
</li>
<li><a href="/article/1882946210990452736.htm"
title="CSS 提示工具：优化网页设计，提升用户体验" target="_blank">CSS 提示工具：优化网页设计，提升用户体验</a>
<span class="text-muted">froginwe11</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>CSS提示工具：优化网页设计，提升用户体验在网页设计中，CSS（层叠样式表）扮演着至关重要的角色。它不仅能够赋予网页独特的视觉风格，还能够提升用户体验。为了帮助设计师和开发者更高效地使用CSS，各种提示工具应运而生。本文将为您详细介绍CSS提示工具的功能、特点以及如何选择合适的工具，以优化网页设计和提升用户体验。一、CSS提示工具概述CSS提示工具是一种辅助设计师和开发者编写和调试CSS的工具。这</div>
</li>
<li><a href="/article/1882928304432934912.htm"
title="基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署" target="_blank">基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署</a>
<span class="text-muted">小朱科技</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ</div>
</li>
<li><a href="/article/1882921874455851008.htm"
title="java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署" target="_blank">java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署</a>
<span class="text-muted">雪夜科技</span>
<a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
<div>java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Wi</div>
</li>
<li><a href="/article/1882910478645129216.htm"
title="vite webpack原理和区别" target="_blank">vite webpack原理和区别</a>
<span class="text-muted"></span>
<div>Vite和Webpack的工作原理有显著的不同，以下是对它们各自原理的简要说明：Vite原理原生ES模块：Vite利用浏览器对原生ES模块（ESM）的支持，实现按需加载和编译。开发服务器启动时，Vite只需解析入口文件，并将导入的模块路径记录下来。按需编译：当浏览器请求某个模块时，Vite会实时编译该模块及其依赖。使用esbuild或Vite自带的编译器快速处理JavaScript和CSS。热模块</div>
</li>
<li><a href="/article/1882836897324134400.htm"
title="web速览" target="_blank">web速览</a>
<span class="text-muted">qzhqbb</span>
<a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a>
<div>web速览1.前端开发概述：前端开发是构建网站用户界面的过程，主要关注网站的视觉效果和用户体验。又称为客户端技术栈：HTML（超文本标记语言）：用于创建网页的结构和内容。CSS（层叠样式表）：用于样式和布局设计，包括颜色、字体、边距等。JavaScript：用于实现网页的交互性和动态效果。前端框架：React：一个用于构建用户界面的JavaScript库，采用组件化设计。Vue.js：一个渐进式的</div>
</li>
<li><a href="/article/1882834122422939648.htm"
title="HTML基本结构" target="_blank">HTML基本结构</a>
<span class="text-muted">千鸟影沫</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、网页三大组成部分结构：html，是超文本标记语言——用来搭建网页的结构样式：css——网页的样式行为：js，是一种语言，称为脚本语言——交互行为用户对网页的操作数据交互二、HTML语法规范1、语法（英文状态下输入）html标签：是由尖括号包围的关键词，例如2、以元素样子对标签进行分类①双标签：如：开始标签，结束标签②单标签：比较少，如，，，等。3、标签关系①嵌套（包含关系）：类似于父子关系如：</div>
</li>
<li><a href="/article/1882829830894972928.htm"
title="探秘Xss：原理、类型与防范全解析" target="_blank">探秘Xss：原理、类型与防范全解析</a>
<span class="text-muted">咕德猫宁丶</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/xss/1.htm">xss</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>一、Xss究竟是什么？（一）Xss的定义简述Xss全称是跨站脚本攻击（CrossSiteScripting），为了不和层叠样式表（CascadingStyleSheets，CSS）的缩写混淆，故将其缩写为Xss。它是一种常见的网络安全漏洞，指的是攻击者利用网站对用户输入内容校验不严格等漏洞，将恶意脚本（通常是JavaScript，也可以是Java、VBScript、ActiveX、Flash等）注</div>
</li>
<li><a href="/article/1882777133370109952.htm"
title="用Python写前端" target="_blank">用Python写前端</a>
<span class="text-muted">eternity_ld</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>分享一个让开发交互式Webapp超级简单的工具。不会HTML，CSS，JAVASCRIPT也没事。交互式Webapp非常实用，比如说做一个问卷调查页面、一个投票系统、一个信息收集表单，上传文件等等，因为网页是可视化的，因此还可以作为一个没有服务端的图片界面应用程序而使用。如果你有这样的开发需求，那用Python真的是太简单了。借助于PyWebIO（pipinstallpywebio），你可以分分钟</div>
</li>
<li><a href="/article/1882772468708470784.htm"
title="【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法" target="_blank">【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法</a>
<span class="text-muted">杰九</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a>
<div>【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法在进行前端开发之前，需要熟悉vue的一些基本用法，这里举例了一些常见的基本用法1.v-if,v-else,v-else-if用于条件渲染元素。当条件为真时，元素会被渲染；否则不会渲染。示例TypeATypeBNotA/B2.v-show也用于条件渲染，但它总是会渲染并保留，只是通过CSS的display属性控制可见性。示例显示/</div>
</li>
<li><a href="/article/1882718617796145152.htm"
title="（C++）P1216数字三角形（动态规划）⭐⭐⭐⭐" target="_blank">（C++）P1216数字三角形（动态规划）⭐⭐⭐⭐</a>
<span class="text-muted">*TQK*</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E7%BB%83%E4%B9%A0/1.htm">算法练习</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92/1.htm">动态规划</a>
<div>[USACO1.5][IOI1994]数字三角形NumberTriangles-洛谷题目描述观察下面的数字金字塔。写一个程序来查找从最高点到底部任意处结束的路径，使路径经过数字的和最大。每一步可以走到左下方的点也可以到达右下方的点。在上面的样例中，从7→3→8→7→5的路径产生了最大权值。输入格式第一个行一个正整数r,表示行的数目。后面每行为这个数字金字塔特定行包含的整数。输出格式单独的一行,包含</div>
</li>
<li><a href="/article/1882680780166066176.htm"
title="参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽子凯哥</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/CTF%E5%A4%BA%E6%97%97%E8%B5%9B/1.htm">CTF夺旗赛</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a>
<div>基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15</div>
</li>
<li><a href="/article/1882639181784608768.htm"
title="打造高效React应用：CSS方案深度解析" target="_blank">打造高效React应用：CSS方案深度解析</a>
<span class="text-muted"></span>
<div>大家好，我是长林啊！一个爱好JavaScript、Go、Rust的全栈开发者；致力于终生学习和技术分享。在React以其声明式编程范式和组件化架构，成为了构建用户界面的首选技术之一。然而，随着项目规模的扩大和设计需求的多样化，如何高效地管理CSS样式成为了每个React开发者都需要面对的挑战。本文将从一下三个方面进行介绍，探讨如何在React中应用和管理样式，包括内联样式、CSS类、CSSModu</div>
</li>
<li><a href="/article/1882624044600193024.htm"
title="Flutter：APP底部tabbar搭建" target="_blank">Flutter：APP底部tabbar搭建</a>
<span class="text-muted">sunly_</span>
<a class="tag" taget="_blank" href="/search/Flutter/1.htm">Flutter</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>main.dartimport'package:flutter/material.dart';import'package:weixin_demo/root_page.dart';voidmain(){runApp(constApp());}classAppextendsStatelessWidget{constApp({super.key});@overrideWidgetbuild(Build</div>
</li>
<li><a href="/article/1882617864658153472.htm"
title="如何使用媒体查询实现响应式网页设计？" target="_blank">如何使用媒体查询实现响应式网页设计？</a>
<span class="text-muted">破碎的天堂鸟</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%95%99%E7%A8%8B/1.htm">学习教程</a><a class="tag" taget="_blank" href="/search/%E5%AA%92%E4%BD%93/1.htm">媒体</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>使用媒体查询（MediaQueries）实现响应式网页设计是现代网页开发中的一项核心技术，它允许开发者根据设备的屏幕尺寸、分辨率、方向等特性动态调整网页布局和样式，从而提供更好的用户体验。以下是详细说明如何使用媒体查询实现响应式网页设计的方法：1.媒体查询的基本概念媒体查询是CSS3引入的一项功能，通过@media规则，开发者可以根据设备的特性（如宽度、高度、方向等）应用不同的样式规则。媒体查询可</div>
</li>
<li><a href="/article/1882617865429905408.htm"
title="如何通过减少HTTP请求来提升页面加载速度？" target="_blank">如何通过减少HTTP请求来提升页面加载速度？</a>
<span class="text-muted">破碎的天堂鸟</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%95%99%E7%A8%8B/1.htm">学习教程</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
<div>通过减少HTTP请求可以显著提升网页加载速度，这是因为HTTP请求的次数直接影响了页面加载时间。以下是一些具体的方法和策略：1.合并文件将多个CSS文件合并为一个CSS文件，将多个JavaScript文件合并为一个JavaScript文件。这可以减少浏览器发起的HTTP请求次数，从而加快页面加载速度。示例：将所有样式表和脚本文件打包成一个文件，以减少请求数量。2.使用CSSSprites（雪碧图）</div>
</li>
<li><a href="/article/1882616980394012672.htm"
title="【前端开发】前端开发深度解析：HTML、CSS、JavaScript与Vue.js" target="_blank">【前端开发】前端开发深度解析：HTML、CSS、JavaScript与Vue.js</a>
<span class="text-muted">RS迷途小书童</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8E%A2%E7%B4%A2%E4%B9%8B%E6%97%85/1.htm">前端开发探索之旅</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>一、HTML：构建网页的基石1.1简介HTML（HyperTextMarkupLanguage，超文本标记语言）是一种用于创建网页的标准标记语言。它使用各种标签（tags）来描述网页上的内容，包括文本、图像、链接、视频、音频等。HTML是网页开发的基础，与CSS（层叠样式表）和JavaScript等技术一起，共同构建出丰富多彩的网页世界。HTML文档由一系列的元素构成，每个元素都由开始标签、内容和</div>
</li>
<li><a href="/article/1882607395406934016.htm"
title="前端开发是随着互联网的发展而逐渐兴起的一种新的开发领域。它一直在不断地发展和演变，经历了许多重要的里程碑事件和技术革新，下面就来回顾一下前端开发的历程和发展趋势。" target="_blank">前端开发是随着互联网的发展而逐渐兴起的一种新的开发领域。它一直在不断地发展和演变，经历了许多重要的里程碑事件和技术革新，下面就来回顾一下前端开发的历程和发展趋势。</a>
<span class="text-muted">21级应用技术UI3班何珍锋</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>一、Web1.0时代1990年代末到2000年代初，Web1.0时代是Web发展的初期阶段，这个阶段的Web界面设计以简单的文本和图像为主，用户的互动性和用户体验都很低。在这个时代，浏览器的前端技术主要是基于HTML和CSS的，HTML指的是超文本标记语言，而CSS则指的是层叠样式表。由于这些技术的简单性，前端开发者往往需要手动编写HTML和CSS代码，并进行基本的样式设计。二、Web2.0时代随</div>
</li>
<li><a href="/article/1882595413127655424.htm"
title="swiper移入暂停_用Swiper插件实现无缝轮播的品牌展示，鼠标移动停止，鼠标移出无缝移动视觉效果..." target="_blank">swiper移入暂停_用Swiper插件实现无缝轮播的品牌展示，鼠标移动停止，鼠标移出无缝移动视觉效果...</a>
<span class="text-muted">weixin_39726971</span>
<a class="tag" taget="_blank" href="/search/swiper%E7%A7%BB%E5%85%A5%E6%9A%82%E5%81%9C/1.htm">swiper移入暂停</a>
<div>正常操作，正常分析，大家好，我是D1n910。文章关键词：技术前端JQuery入门滚动文章前言：公司要求做官网呀呀呀，其中有一部分设计是要求我们最亲爱的品牌商的LOGO能够在底部无缝轮播，鼠标移上去就停下来。效果如下：一、使用插件介绍1、使用的框架是JQuery，因为讲究快速、兼容、展示，所以没有用vue、react之类的看起来高大上的框架。2、使用的是优秀的轮播插件Swiper3.0版(实际上S</div>
</li>
<li><a href="/article/84.htm"
title="继之前的线程循环加到窗口中运行" target="_blank">继之前的线程循环加到窗口中运行</a>
<span class="text-muted">3213213333332132</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/JFrame/1.htm">JFrame</a><a class="tag" taget="_blank" href="/search/JPanel/1.htm">JPanel</a>
<div>之前写了有关java线程的循环执行和结束，因为想制作成exe文件，想把执行的效果加到窗口上，所以就结合了JFrame和JPanel写了这个程序，这里直接贴出代码，在窗口上运行的效果下面有附图。
package thread;
import java.awt.Graphics;
import java.text.SimpleDateFormat;
import java.util</div>
</li>
<li><a href="/article/211.htm"
title="linux 常用命令" target="_blank">linux 常用命令</a>
<span class="text-muted">BlueSkator</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E4%BB%A4/1.htm">命令</a>
<div>1.grep
相信这个命令可以说是大家最常用的命令之一了。尤其是查询生产环境的日志，这个命令绝对是必不可少的。
但之前总是习惯于使用 （grep -n 关键字 文件名 ）查出关键字以及该关键字所在的行数，然后再用 （sed -n '100,200p' 文件名），去查出该关键字之后的日志内容。
但其实还有更简便的办法，就是用（grep -B n、-A n、-C n 关键</div>
</li>
<li><a href="/article/338.htm"
title="php heredoc原文档和nowdoc语法" target="_blank">php heredoc原文档和nowdoc语法</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/heredoc/1.htm">heredoc</a><a class="tag" taget="_blank" href="/search/nowdoc/1.htm">nowdoc</a>
<div><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Current To-Do List</title>
</head>
<body>
<?</div>
</li>
<li><a href="/article/465.htm"
title="overflow的属性" target="_blank">overflow的属性</a>
<span class="text-muted">周华华</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml&q</div>
</li>
<li><a href="/article/592.htm"
title="《我所了解的Java》——总体目录" target="_blank">《我所了解的Java》——总体目录</a>
<span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div> 准备用一年左右时间写一个系列的文章《我所了解的Java》，目录及内容会不断完善及调整。
在编写相关内容时难免出现笔误、代码无法执行、名词理解错误等，请大家及时指出，我会第一时间更正。
&n</div>
</li>
<li><a href="/article/719.htm"
title="[简单]docx4j常用方法小结" target="_blank">[简单]docx4j常用方法小结</a>
<span class="text-muted">53873039oycg</span>
<a class="tag" taget="_blank" href="/search/docx/1.htm">docx</a>
<div> 本代码基于docx4j-3.2.0，在office word 2007上测试通过。代码如下:
import java.io.File;
import java.io.FileInputStream;
import ja</div>
</li>
<li><a href="/article/846.htm"
title="Spring配置学习" target="_blank">Spring配置学习</a>
<span class="text-muted">云端月影</span>
<a class="tag" taget="_blank" href="/search/spring%E9%85%8D%E7%BD%AE/1.htm">spring配置</a>
<div>
首先来看一个标准的Spring配置文件 applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi=&q</div>
</li>
<li><a href="/article/973.htm"
title="Java新手入门的30个基本概念三" target="_blank">Java新手入门的30个基本概念三</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B/1.htm">新手</a><a class="tag" taget="_blank" href="/search/java+%E5%85%A5%E9%97%A8/1.htm">java 入门</a>
<div>17.Java中的每一个类都是从Object类扩展而来的。 18.object类中的equal和toString方法。 equal用于测试一个对象是否同另一个对象相等。 toString返回一个代表该对象的字符串,几乎每一个类都会重载该方法,以便返回当前状态的正确表示.(toString 方法是一个很重要的方法) 19.通用编程:任何类类型的所有值都可以同object类性的变量来代替。 </div>
</li>
<li><a href="/article/1100.htm"
title="《2008 IBM Rational 软件开发高峰论坛会议》小记" target="_blank">《2008 IBM Rational 软件开发高峰论坛会议》小记</a>
<span class="text-muted">antonyup_2006</span>
<a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E6%95%8F%E6%8D%B7%E5%BC%80%E5%8F%91/1.htm">敏捷开发</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86/1.htm">项目管理</a><a class="tag" taget="_blank" href="/search/IBM/1.htm">IBM</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a>
<div>我一直想写些总结,用于交流和备忘,然都没提笔,今以一篇参加活动的感受小记开个头,呵呵!
其实参加《2008 IBM Rational 软件开发高峰论坛会议》是9月4号,那天刚好调休.但接着项目颇为忙,所以今天在中秋佳节的假期里整理了下.
参加这次活动是一个朋友给的一个邀请书,才知道有这样的一个活动,虽然现在项目暂时没用到IBM的解决方案,但觉的参与这样一个活动可以拓宽下视野和相关知识.</div>
</li>
<li><a href="/article/1227.htm"
title="PL/SQL的过程编程,异常,声明变量,PL/SQL块" target="_blank">PL/SQL的过程编程,异常,声明变量,PL/SQL块</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/PL%2FSQL%E7%9A%84%E8%BF%87%E7%A8%8B%E7%BC%96%E7%A8%8B/1.htm">PL/SQL的过程编程</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E5%B8%B8/1.htm">异常</a><a class="tag" taget="_blank" href="/search/PL%2FSQL%E5%9D%97/1.htm">PL/SQL块</a><a class="tag" taget="_blank" href="/search/%E5%A3%B0%E6%98%8E%E5%8F%98%E9%87%8F/1.htm">声明变量</a>
<div>PL/SQL;
过程;
符号;
变量;
PL/SQL块;
输出;
异常;
PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言PL/SQL 是对 SQL 的扩展,sql的执行时每次都要写操作</div>
</li>
<li><a href="/article/1354.htm"
title="Mockito(三)--完整功能介绍" target="_blank">Mockito(三)--完整功能介绍</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/1.htm">持续集成</a><a class="tag" taget="_blank" href="/search/mockito/1.htm">mockito</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a>
<div> mockito官网：http://code.google.com/p/mockito/，打开documentation可以看到官方最新的文档资料。
一.使用mockito验证行为
//首先要import Mockito
import static org.mockito.Mockito.*;
//mo</div>
</li>
<li><a href="/article/1481.htm"
title="精通Oracle10编程SQL(8)使用复合数据类型" target="_blank">精通Oracle10编程SQL(8)使用复合数据类型</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a>
<div>/*
*使用复合数据类型
*/
--PL/SQL记录
--定义PL/SQL记录
--自定义PL/SQL记录
DECLARE
TYPE emp_record_type IS RECORD(
name emp.ename%TYPE,
salary emp.sal%TYPE,
dno emp.deptno%TYPE
);
emp_</div>
</li>
<li><a href="/article/1608.htm"
title="【Linux常用命令一】grep命令" target="_blank">【Linux常用命令一】grep命令</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Linux%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/1.htm">Linux常用命令</a>
<div>grep命令格式
grep [option] pattern [file-list]
grep命令用于在指定的文件(一个或者多个,file-list)中查找包含模式串(pattern)的行,[option]用于控制grep命令的查找方式。
pattern可以是普通字符串，也可以是正则表达式，当查找的字符串包含正则表达式字符或者特</div>
</li>
<li><a href="/article/1735.htm"
title="mybatis3入门学习笔记" target="_blank">mybatis3入门学习笔记</a>
<span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a>
<div>MyBatis 的前身就是iBatis，是一个数据持久层(ORM)框架。 MyBatis 是支持普通 SQL 查询，存储过程和高级映射的优秀持久层框架。MyBatis对JDBC进行了一次很浅的封装。
以前也学过iBatis，因为MyBatis是iBatis的升级版本，最初以为改动应该不大，实际结果是MyBatis对配置文件进行了一些大的改动，使整个框架更加方便人性化。</div>
</li>
<li><a href="/article/1862.htm"
title="Linux 命令神器：lsof 入门" target="_blank">Linux 命令神器：lsof 入门</a>
<span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/lsof/1.htm">lsof</a>
<div>
lsof是系统管理/安全的尤伯工具。我大多数时候用它来从系统获得与网络连接相关的信息，但那只是这个强大而又鲜为人知的应用的第一步。将这个工具称之为lsof真实名副其实，因为它是指“列出打开文件（lists openfiles）”。而有一点要切记，在Unix中一切（包括网络套接口）都是文件。
有趣的是，lsof也是有着最多</div>
</li>
<li><a href="/article/1989.htm"
title="java实现两个大数相加，可能存在溢出。" target="_blank">java实现两个大数相加，可能存在溢出。</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java%E5%AE%9E%E7%8E%B0/1.htm">java实现</a>
<div>
import java.math.BigInteger;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class BigIntegerAddition {
/**
* 题目：java实现两个大数相加，可能存在溢出。
* 如123456789 + 987654321</div>
</li>
<li><a href="/article/2116.htm"
title="Kettle学习资料分享，附大神用Kettle的一套流程完成对整个数据库迁移方法" target="_blank">Kettle学习资料分享，附大神用Kettle的一套流程完成对整个数据库迁移方法</a>
<span class="text-muted">Kai_Ge</span>
<a class="tag" taget="_blank" href="/search/Kettle/1.htm">Kettle</a>
<div>Kettle学习资料分享
Kettle 3.2 使用说明书
目录
概述..........................................................................................................................................7
1.Kettle 资源库管</div>
</li>
<li><a href="/article/2243.htm"
title="[货币与金融]钢之炼金术士" target="_blank">[货币与金融]钢之炼金术士</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a>
<div>
自古以来,都有一些人在从事炼金术的工作.........但是很少有成功的
那么随着人类在理论物理和工程物理上面取得的一些突破性进展......
炼金术这个古老</div>
</li>
<li><a href="/article/2370.htm"
title="Toast原来也可以多样化" target="_blank">Toast原来也可以多样化</a>
<span class="text-muted">dai_lm</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/toast/1.htm">toast</a>
<div>Style 1： 默认
Toast def = Toast.makeText(this, "default", Toast.LENGTH_SHORT);
def.show();
Style 2： 顶部显示
Toast top = Toast.makeText(this, "top", Toast.LENGTH_SHORT);
t</div>
</li>
<li><a href="/article/2497.htm"
title="java数据计算的几种解决方法3" target="_blank">java数据计算的几种解决方法3</a>
<span class="text-muted">datamachine</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/r-langue/1.htm">r-langue</a><a class="tag" taget="_blank" href="/search/r/1.htm">r</a>
<div>4、iBatis
简单敏捷因此强大的数据计算层。和Hibernate不同，它鼓励写SQL，所以学习成本最低。同时它用最小的代价实现了计算脚本和JAVA代码的解耦，只用20%的代价就实现了hibernate 80%的功能,没实现的20%是计算脚本和数据库的解耦。
复杂计算环境是它的弱项，比如：分布式计算、复杂计算、非数据</div>
</li>
<li><a href="/article/2624.htm"
title="向网页中插入透明Flash的方法和技巧" target="_blank">向网页中插入透明Flash的方法和技巧</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Flash/1.htm">Flash</a>
<div>将
Flash 作品插入网页的时候，我们有时候会需要将它设为透明，有时候我们需要在Flash的背面插入一些漂亮的图片，搭配出漂亮的效果……下面我们介绍一些将Flash插入网页中的一些透明的设置技巧。
一、Swf透明、无坐标控制 首先教大家最简单的插入Flash的代码，透明，无坐标控制： 注意wmode="transparent"是控制Flash是否透明</div>
</li>
<li><a href="/article/2751.htm"
title="ios UICollectionView的使用" target="_blank">ios UICollectionView的使用</a>
<span class="text-muted">dcj3sjt126com</span>
<div>UICollectionView的使用有两种方法，一种是继承UICollectionViewController，这个Controller会自带一个UICollectionView；另外一种是作为一个视图放在普通的UIViewController里面。
个人更喜欢第二种。下面采用第二种方式简单介绍一下UICollectionView的使用。
1.UIViewController实现委托，代码如</div>
</li>
<li><a href="/article/2878.htm"
title="Eos平台java公共逻辑" target="_blank">Eos平台java公共逻辑</a>
<span class="text-muted">蕃薯耀</span>
<a class="tag" taget="_blank" href="/search/Eos%E5%B9%B3%E5%8F%B0java%E5%85%AC%E5%85%B1%E9%80%BB%E8%BE%91/1.htm">Eos平台java公共逻辑</a><a class="tag" taget="_blank" href="/search/Eos%E5%B9%B3%E5%8F%B0/1.htm">Eos平台</a><a class="tag" taget="_blank" href="/search/java%E5%85%AC%E5%85%B1%E9%80%BB%E8%BE%91/1.htm">java公共逻辑</a>
<div> Eos平台java公共逻辑
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年6月1日 17:20:4</div>
</li>
<li><a href="/article/3005.htm"
title="SpringMVC4零配置--Web上下文配置【MvcConfig】" target="_blank">SpringMVC4零配置--Web上下文配置【MvcConfig】</a>
<span class="text-muted">hanqunfeng</span>
<a class="tag" taget="_blank" href="/search/springmvc4/1.htm">springmvc4</a>
<div>与SpringSecurity的配置类似，spring同样为我们提供了一个实现类WebMvcConfigurationSupport和一个注解@EnableWebMvc以帮助我们减少bean的声明。
applicationContext-MvcConfig.xml
<!-- 启用注解，并定义组件查找规则 ，mvc层只负责扫描@Controller -->
<</div>
</li>
<li><a href="/article/3132.htm"
title="解决ie和其他浏览器poi下载excel文件名乱码" target="_blank">解决ie和其他浏览器poi下载excel文件名乱码</a>
<span class="text-muted">jackyrong</span>
<a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a>
<div> 使用poi,做传统的excel导出，然后想在浏览器中，让用户选择另存为，保存用户下载的xls文件，这个时候，可能的是在ie下出现乱码（ie,9,10,11),但在firefox,chrome下没乱码，
因此必须综合判断，编写一个工具类：
/**
*
* @Title: pro</div>
</li>
<li><a href="/article/3259.htm"
title="挥洒泪水的青春" target="_blank">挥洒泪水的青春</a>
<span class="text-muted">lampcy</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
<div>2015年2月28日，我辞职了，离开了相处一年的触控，转过身--挥洒掉泪水，毅然来到了兄弟连，背负着许多的不解、质疑——”你一个零基础、脑子又不聪明的人，还敢跨行业，选择Unity3D？“，”真是不自量力••••••“，”真是初生牛犊不怕虎•••••“，••••••我只是淡淡一笑，拎着行李----坐上了通向挥洒泪水的青春之地——兄弟连！
这就是我青春的分割线，不后悔，只会去用泪水浇灌——已经来到</div>
</li>
<li><a href="/article/3386.htm"
title="稳增长之中国股市两点意见-----严控做空，建立涨跌停版停牌重组机制" target="_blank">稳增长之中国股市两点意见-----严控做空，建立涨跌停版停牌重组机制</a>
<span class="text-muted">nannan408</span>
<div> 对于股市，我们国家的监管还是有点拼的，但始终拼不过飞流直下的恐慌，为什么呢？
笔者首先支持股市的监管。对于股市越管越荡的现象，笔者认为首先是做空力量超过了股市自身的升力，并且对于跌停停牌重组的快速反应还没建立好，上市公司对于股价下跌没有很好的利好支撑。
我们来看美国和香港是怎么应对股灾的。美国是靠禁止重要股票做空，在</div>
</li>
<li><a href="/article/3513.htm"
title="动态设置iframe高度(iframe高度自适应)" target="_blank">动态设置iframe高度(iframe高度自适应)</a>
<span class="text-muted">Rainbow702</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/iframe/1.htm">iframe</a><a class="tag" taget="_blank" href="/search/contentDocument/1.htm">contentDocument</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94/1.htm">高度自适应</a><a class="tag" taget="_blank" href="/search/%E5%B1%80%E9%83%A8%E5%88%B7%E6%96%B0/1.htm">局部刷新</a>
<div>如果需要对画面中的部分区域作局部刷新，大家可能都会想到使用ajax。
但有些情况下，须使用在页面中嵌入一个iframe来作局部刷新。
对于使用iframe的情况，发现有一个问题，就是iframe中的页面的高度可能会很高，但是外面页面并不会被iframe内部页面给撑开，如下面的结构：
<div id="content">
<div id=&quo</div>
</li>
<li><a href="/article/3640.htm"
title="用Rapael做图表" target="_blank">用Rapael做图表</a>
<span class="text-muted">tntxia</span>
<a class="tag" taget="_blank" href="/search/rap/1.htm">rap</a>
<div>function drawReport(paper,attr,data){
var width = attr.width;
var height = attr.height;
var max = 0;
&nbs</div>
</li>
<li><a href="/article/3767.htm"
title="HTML5 bootstrap2网页兼容（支持IE10以下）" target="_blank">HTML5 bootstrap2网页兼容（支持IE10以下）</a>
<span class="text-muted">xiaoluode</span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a>
<div><!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"></div>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="container">
<div class="indexes">
<strong>按字母分类：</strong>
<a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
</div>
</div>
</div>
<footer id="footer" class="mb30 mt30">
<div class="container">
<div class="footBglm">
<a target="_blank" href="/">首页</a> -
<a target="_blank" href="/custom/about.htm">关于我们</a> -
<a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
<a target="_blank" href="/sitemap.txt">Sitemap</a> -
<a target="_blank" href="/custom/delete.htm">侵权投诉</a>
</div>
<div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
</div>
</div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>
</body>
</html>