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/1892579443919089664.htm"
title="python图形界面化编程GUI（二）常用的组件(Text、Radiobutton、Checkbutton、Canvas)和布局管理器(gird、pack、place)" target="_blank">python图形界面化编程GUI（二）常用的组件(Text、Radiobutton、Checkbutton、Canvas)和布局管理器(gird、pack、place)</a>
<span class="text-muted">hwwaizs</span>
<a class="tag" taget="_blank" href="/search/python-GUI%E5%9B%BE%E5%BD%A2%E5%8C%96%E7%BC%96%E7%A8%8B/1.htm">python-GUI图形化编程</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>Text文本框Text(多行文本框)的主要用于显示多行文本，还可以显示网页链接,图片,HTML页面,甚至CSS样式表，添加组件等。主要用来显示信息，也常被当做简单的文本处理器、⽂本编辑器或者网页浏览器来使用。IDLE就是Text组件构成的。insert插入的时候可以用INSERT代表当前光标的位置，END代表在结尾的位置，也可以用插入小数的形式，2.3代表第二行第三列后插入。fromtkinter</div>
</li>
<li><a href="/article/1892573413654982656.htm"
title="tailwindcss4.0 升级后的一个坑" target="_blank">tailwindcss4.0 升级后的一个坑</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/tailwindcss/1.htm">tailwindcss</a>
<div>tailwindcss4.0升级了，用了vite的方式，因为主UI框架用的antdv，结果出现了antdv组件自身的css比tailwindcss的优先级高的情况。发现tailwindcss的类都被layer了，而这个layer的特性就是比平常的css优先级要低，考虑到antdv还不能把自身css套上layer（antd好像可以），所以只能把tailwind的layer去掉了，也是为了一些老的ui</div>
</li>
<li><a href="/article/1892546785944072192.htm"
title="css主题色修改后会多出一个css吗？css怎么定义变量？" target="_blank">css主题色修改后会多出一个css吗？css怎么定义变量？</a>
<span class="text-muted">编程星空</span>
<a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
<div>在CSS中修改主题色时，通常不会直接生成一个新的CSS文件，而是通过CSS变量（CustomProperties）或预处理器变量（如Sass、Less）来动态修改样式。以下是详细说明：1.CSS变量（CustomProperties）CSS变量是现代CSS提供的一种功能，允许在样式表中定义可复用的值，并在需要时动态修改。定义CSS变量CSS变量以--开头，通常在:root伪类中定义全局变量。:ro</div>
</li>
<li><a href="/article/1892532653761032192.htm"
title="CSS flex布局 列表单个元素点击 本行下插入详情独占一行" target="_blank">CSS flex布局 列表单个元素点击 本行下插入详情独占一行</a>
<span class="text-muted">Cxiaomu</span>
<a class="tag" taget="_blank" href="/search/CSS3/1.htm">CSS3</a><a class="tag" taget="_blank" href="/search/UI%E8%AE%BE%E8%AE%A1/1.htm">UI设计</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>技术栈：Vue2+javaScript简介在实际开发过程中有遇到一个场景：一个list，每行个数固定，点击单个元素后，在当前行与下一行之间插入一行元素详情，便于更直观的查看到对应的数据详情。这种情形，在移动端比较常见，比如用户列表，点击单个列表展示详情，可以考虑flex布局+positionrelative定位。实现思路对于需求重点和实现拆解列表元素：for遍历每行固定（3）个元素：flex布局、</div>
</li>
<li><a href="/article/1892502492609048576.htm"
title="CSS中五种定位方式（position）对比分析" target="_blank">CSS中五种定位方式（position）对比分析</a>
<span class="text-muted">七公子77</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%89%8D%E7%AB%AF/1.htm">前端</a>
<div>在CSS中，定位方式（position）决定了元素如何相对于其参照物进行定位，同时影响文档流的布局。以下是五种定位方式的对比、参照物说明及代码示例：1.position:static（默认定位）参照物：无，元素位于默认文档流中。文档流：元素按照HTML顺序自然排列。特点：top、right、bottom、left和z-index属性无效。示例：Box1Box2.box{width:100px;he</div>
</li>
<li><a href="/article/1892501512748331008.htm"
title="文章发布第三篇" target="_blank">文章发布第三篇</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF%E5%89%8D%E7%AB%AF/1.htm">后端前端</a>
<div>标题粗体斜体中划线段落引用第一个第二个第一个第二个百度privateStringaa=column1column2column3content1content2content3</div>
</li>
<li><a href="/article/1892463401469276160.htm"
title="揭秘 CSS Houdini：用浏览器魔法解锁 CSS 的终极潜力" target="_blank">揭秘 CSS Houdini：用浏览器魔法解锁 CSS 的终极潜力</a>
<span class="text-muted">寒鸦xxx</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/houdini/1.htm">houdini</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、为什么我们需要CSSHoudini？1.1传统CSS的困境当我们试图用CSS实现一个波浪形边框时，通常会经历这样的挣扎：/*传统实现方案*/.wave-border{position:relative;overflow:hidden;}.wave-border::after{content:'';position:absolute;/*需要复杂计算和多个伪元素拼接*/}这种实现方式存在三个致命</div>
</li>
<li><a href="/article/1892449143461310464.htm"
title="Python+Playwright常用元素定位方法" target="_blank">Python+Playwright常用元素定位方法</a>
<span class="text-muted">HAMYHF</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%8A%9F%E8%83%BD%E6%B5%8B%E8%AF%95/1.htm">功能测试</a>
<div>CSSselector选择器在CSS中，定位元素主要通过选择器完成，以下是几种常见的CSS选择器定位方法：标签选择器(element):直接使用HTML元素名称来定位，例如p会选择所有段落元素。属性选择器(attribute):选择所有具有指定属性的元素，无论该属性的值是什么。例如，[title]会选择所有包含title属性的元素。选择具有指定属性，并且该属性值完全等于给定值的元素。例如，[typ</div>
</li>
<li><a href="/article/1892446115870076928.htm"
title="JavaScript网页设计案例：打造交互式个人简历网站" target="_blank">JavaScript网页设计案例：打造交互式个人简历网站</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/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><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>在当今数字化时代，个人简历不再局限于纸质文档，而是越来越多地以网页形式呈现。JavaScript作为一种强大的客户端脚本语言，为网页设计提供了无限可能，使得网页不仅仅是静态的信息展示，而是具有丰富交互性的平台。本文将通过一个案例，展示如何使用HTML、CSS和JavaScript来设计一个交互式的个人简历网站。1.项目概述本案例的目标是创建一个个人简历网站，它不仅展示个人信息、工作经历、教育背景和</div>
</li>
<li><a href="/article/1892439419542106112.htm"
title="CSS 滚动条样式修改（详细）" target="_blank">CSS 滚动条样式修改（详细）</a>
<span class="text-muted">mr_cmx</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>1、滚动条整体部分使用::-webkit-scrollbar示例：.container::-webkit-scrollbar{width:20px;//修改滚动条宽度}2、滚动条中的滑块使用::-webkit-scrollbar-thumb示例：.container::-webkit-scrollbar-thumb{border-radius:8px;box-shadow:inset005pxrg</div>
</li>
<li><a href="/article/1892421248793767936.htm"
title="2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a>
<span class="text-muted">白帽安全-黑客4148</span>
<a class="tag" taget="_blank" href="/search/%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/%E7%BD%91%E7%BB%9C/1.htm">网络</a><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/CTF/1.htm">CTF</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天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.</div>
</li>
<li><a href="/article/1892421249762652160.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>
<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天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.</div>
</li>
<li><a href="/article/1892413304811352064.htm"
title="dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)" target="_blank">dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)</a>
<span class="text-muted">weixin_39979245</span>
<a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/html%E8%AF%AD%E8%A8%80/1.htm">html语言</a>
<div>Dreamweaver网页设计与制作(HTML+CSS+JavaScript)编辑锁定讨论上传视频本词条缺少信息栏，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！《Dreamweaver网页设计与制作(HTML+CSS+JavaScript)》是2014年清华大学出版社出版的图书。Dreamweaver网页设计与制作(HTML+CSS+JavaScript)图书详细信息编辑ISBN：978</div>
</li>
<li><a href="/article/1892412800781840384.htm"
title="html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作" target="_blank">html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作</a>
<span class="text-muted">律保阁-Michael</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/5%E4%B8%ADcss%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">5中css的含义</a>
<div>HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书，作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48</div>
</li>
<li><a href="/article/1892412295414345728.htm"
title="html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准" target="_blank">html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准</a>
<span class="text-muted">vvv666s</span>
<div>②学会运用HTML语言中的标记设置颜色、文本格式和列表；熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符、链接颜色的设置方法；③掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法；④熟练掌握表格的使用方法，学会利用表格设布局网页；掌握框架制作网页的方法，会使用框架设计网页；掌握制作表单的方法，会利用表单建立交互式页面；⑤掌握JavaScript语言的语法；⑥掌握在HTML语言代码中嵌入</div>
</li>
<li><a href="/article/1892407882675187712.htm"
title="前端性能优化——如何提高页面加载速度？" target="_blank">前端性能优化——如何提高页面加载速度？</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/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>1.将样式表放在头部首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的</div>
</li>
<li><a href="/article/1892407376435277824.htm"
title="前端开发入门指南：HTML、CSS和JavaScript基础知识" target="_blank">前端开发入门指南：HTML、CSS和JavaScript基础知识</a>
<span class="text-muted">方向感超强的</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与</div>
</li>
<li><a href="/article/1892403467411058688.htm"
title="网页中加载 SVG 的七大方式" target="_blank">网页中加载 SVG 的七大方式</a>
<span class="text-muted">前端熊猫</span>
<a class="tag" taget="_blank" href="/search/Svg/1.htm">Svg</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/svg/1.htm">svg</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
<div>一、直接使用标签加载外部SVG文件优点：简单易用：与加载其他图片格式（如PNG、JPEG）相同。浏览器支持良好：现代浏览器普遍支持。可缓存：SVG文件可以被浏览器缓存，减少重复请求。缺点：无法直接操作SVG内部元素：如果需要对SVG内部的元素进行交互或样式修改，这种方法不适用。适用场景：静态图像展示：仅需要展示SVG图像，不需要与之交互。二、将SVG作为CSS背景图片.icon{width:100</div>
</li>
<li><a href="/article/1892401826364452864.htm"
title="jQuery UI CSS 框架 API" target="_blank">jQuery UI CSS 框架 API</a>
<span class="text-muted">lly202406</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>jQueryUICSS框架API概述jQueryUI是一个基于jQuery的用户界面和交互库，它提供了一套丰富的交互组件和视觉效果，旨在帮助开发者快速构建具有吸引力和互动性的网页应用。jQueryUICSS框架API是jQueryUI的一部分，它允许开发者通过简单的CSS类来控制UI组件的样式和外观。本文将详细介绍jQueryUICSS框架API的使用方法、常用类和功能，帮助开发者更好地利用这一工</div>
</li>
<li><a href="/article/1892398803407925248.htm"
title="部署前端项目2" target="_blank">部署前端项目2</a>
<span class="text-muted">augenstern416</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V</div>
</li>
<li><a href="/article/1892398676270182400.htm"
title="CSS属性" target="_blank">CSS属性</a>
<span class="text-muted">augenstern416</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%89%8D%E7%AB%AF/1.htm">前端</a>
<div>1.CSS定位方式initial：设置该属性为浏览器默认值inherit：规定应该从父元素继承position属性的值。static：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。relative：生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20”会向元素的LEFT位置添加20像素。absolute：生成绝对定位</div>
</li>
<li><a href="/article/1892395273758502912.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/CTF/1.htm">CTF</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%E5%A4%A7%E8%B5%9B/1.htm">网络安全大赛</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、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、S</div>
</li>
<li><a href="/article/1892390738520502272.htm"
title="前端基础入门：HTML、CSS 和 JavaScript" target="_blank">前端基础入门：HTML、CSS 和 JavaScript</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/%E5%89%8D%E7%AB%AF/1.htm">前端</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/js/1.htm">js</a>
<div>在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元</div>
</li>
<li><a href="/article/1892389477767245824.htm"
title="网页制作03-html,css,javascript初认识のhtml的图像设置" target="_blank">网页制作03-html,css,javascript初认识のhtml的图像设置</a>
<span class="text-muted">Ama_tor</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C%E4%B8%93%E6%A0%8F/1.htm">网页制作专栏</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>
<div>一、图像格式网页中图像的格式有三种，Gif，Jpeg，PngGif：Graphicinterchangeformat图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像；还可以制作动态图像Jpeg：Giantphotographicexpectgroup，它是一种图像压缩格式，可包含数百万种颜色，不支持</div>
</li>
<li><a href="/article/1892312438930468864.htm"
title="CSS 修改 SVG图标的颜色" target="_blank">CSS 修改 SVG图标的颜色</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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E6%A0%87%E9%A2%9C%E8%89%B2%E6%94%B9%E5%8F%98/1.htm">图标颜色改变</a>
<div>方法1、利用filter中的drop-shadow给icon加样式(利用原图标的阴影区域，同时将原图标移动超过之前父元素范围)filter:drop-shadow(red80px0);transform:translateX(-80px);给父元素加样式（父元素超范围隐藏，正好把原图标的隐藏掉，显示阴影区域）overflow:hidden;filter的drop-shadow标准用法drop-sh</div>
</li>
<li><a href="/article/1892310800052318208.htm"
title="i css svg,如何设置 CSS 背景图中的 SVG 的颜色" target="_blank">i css svg,如何设置 CSS 背景图中的 SVG 的颜色</a>
<span class="text-muted">魔法少女皮皮瞎</span>
<a class="tag" taget="_blank" href="/search/i/1.htm">i</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a>
<div>ColoringSVGsinCSSBackgroundImages如何设置CSS背景图中的SVG的颜色IloveusingSVGinCSSbackgroundimagesbutitsucksthatyoucan'talterthefillcoloreasilywithinyourCSS.Hereareafewwaysaroundthat.在CSS背景中我喜欢用SVG，但是，这会导致你无法用CSS很</div>
</li>
<li><a href="/article/1892308146966294528.htm"
title="css给网页添加 黑白滤镜" target="_blank">css给网页添加 黑白滤镜</a>
<span class="text-muted">nqxcwl</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E7%BB%99%E7%BD%91%E9%A1%B5%E6%B7%BB%E5%8A%A0%E9%BB%91%E7%99%BD%E6%BB%A4%E9%95%9C/1.htm">给网页添加黑白滤镜</a>
<div>/*给网页添加黑白滤镜*/html{/*兼容FF*/filter:url("data:image/svgxml;utf8,#grayscale");/*兼容IE内核*/filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*兼容其它，谷歌之类的*/-webkit-filter:grayscale(1);}</div>
</li>
<li><a href="/article/1892282403041374208.htm"
title="【layui】layui表格过滤" target="_blank">【layui】layui表格过滤</a>
<span class="text-muted">weixin_43250628</span>
<a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</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/1.htm">前端</a>
<div>1.除了引用必要的layui的js和css，还需引入tableFilter.js。2.然后就是代码展示部分；layui.config({base:'../../layui/plugins2/',//扩展路径version:'v1.0.0'}).extend({tableFilter:'tableFilter'//模块别名});functionsetGridData(data){layui.use(</div>
</li>
<li><a href="/article/1892267654920597504.htm"
title="Electron学习" target="_blank">Electron学习</a>
<span class="text-muted">星空0107</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>Electron的简介Electron基于chromium和Node.js，让我们可以使用Javascript,HTML,CSS构建跨平台的桌面应用程序，同时Electron兼容Mac,Window,和Linux,可以构建出三个平台的应用程序Electron的安装运行cmd,输入npminit，然后一直按enter换行即可输入cnpmielectron-S（如果电脑没有安装cnpm会报错，需要安装</div>
</li>
<li><a href="/article/1892267275638075392.htm"
title="electron学习笔记" target="_blank">electron学习笔记</a>
<span class="text-muted">weixin_46452138</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局，使用JavaScript来控制用户行为和业务逻辑，使用Node.js来通信、处理音频视频等，几乎所有的Web前端技术和框架（jQuery、Vue、React、Angular等）都可以应用到桌面GUI开发中。二、开发前基</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>