闲人王昱珩

CSS进阶（11）—— overflow属性详解，利用CSS实现锚点定位

本章延续上一章BFC的内容深入探索BFC的最佳结界——overflow在其本职工作上的表现。

1.overflow的裁剪界线——border-box

overflow属性用于指定块容器元素的内容溢出时的表现方式——滚动，裁剪，自适应。“BFC的最佳结界”只是其衍生出来的特性，“裁剪”才是其本职工作。在使用overflow做裁剪工作的时候需要注意裁剪的边界时border box的内边缘，来看下面的例子。

裁切部分的留白似乎不是很符合我们的预期，如果想要实现元素裁切同时四周留白的话，可以利用透明边框，此时padding属性时无能为力的！

2.overflow与滚动条

HTML中有两个标签是默认可以产生滚动条的，一个是跟元素，还有一个是文本标签，只有这两个标签的默认overflow是auto属性，其他都是visible。</p> <p> 关于浏览器的滚动条，有以下两个结论：</p> <p> （1）在PC端，无论什么浏览器，默认滚动条均来自<html>，而不是<body>，这点可以由浏览器下body的默认margin不为零，但当内容高度超过100%的时候，滚动条离浏览器不会有间隙（body的默认margin）可以得出结论。上述结论只针对PC端有效！</p> <p> （2）在PC端，滚动条出现就一定会占用容器的可用宽度/高度，也就是你本来布局非常准确的200像素宽度，在加入右侧滚动条后，可能会导致子元素的像素计算出现偏差，由于父容器的右侧挤入了一个不速之客——滚动条。因此在考虑PC端带滚动条布局的时候，可以减少子元素的实际可用宽度，通常情况下，浏览器滚动条所占的宽度是17px（并不是绝对的），因此可以考虑子元素在右侧留白>17px。注意本条定律也仅针对PC端有效，由于移动端的屏幕分辨率本来就低，因此滚动条一般以悬浮的方式出现，并不会占用实际宽度。</p> <p> （3）既然滚动条在CSS布局中有如此重要的地位，因此其样式也是可以自定义的，在chrome浏览器中的属性如下：</p> <p> 整体部分，::-webkit-scrollbar;</p> <p> 两端按钮，::-webkit-scrollbar-button;</p> <p> 外层轨道，::-webkit-scrollbar-track;</p> <p> 内层轨道，::-webkit-scrollbar-track-piece;</p> <p> 滚动滑块，::-webkit-scrollbar-thumb;</p> <p> 边角部分，::-webkit-scrollbar-corner;</p> <p> overflow除了和滚动条是PY关系，还有一些衍生属性也要依赖overflow，如单行文字超出部分省略号显示，就需要用到overflow:hidden的声明。代码如下</p> <pre class="has"><code class="language-html"><style> .overText{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } </style></code></pre> <h3>3.overflow与锚点定位</h3> <p> 什么是锚点定位？通俗点的解释就是让页面定位到某个位置的点。在高度较高的页面中，通常我们会通过侧边导航栏定位到文章的某一段内容中去，如bilibili的侧边导航栏即可实现这个功能。要实现锚点定位，很多人都知道可以通过Js通过调整scrollTop实现，但新手很少会知道CSS本身就已经提供了这个功能（包括我）。这跟网上教程中很少涉及"CSS锚点定位"功能实现有关，通常情况下，我们看到的都是"JS锚点定位"功能的讲解。</p> <p> 闲话不多扯，下面来看看如何用CSS实现锚点定位。CSS规定触发锚点定位行为发生的条件有两种：</p> <p> （1）URL地址中的锚链与锚点元素对应并有交互行为</p> <p> （2）可focus的锚点元素处于focus状态</p> <p> URL的触发条件比较容易，最常用的a标签即可帮助我们实现锚点定位功能。如下代码</p> <pre class="has"><code class="language-html"><a href="#1">我要定位到和1绑定的元素</a> <div id="1">我是要被定位的元素</div></code></pre> <p> 此时我们点击a标签，便会触发URL的哈希值改变，然后页面会根据实际情况让id为1的div元素定位在浏览器窗体的上边缘（如果需要的话，div元素本身就在页面的第一行就没必要定位了）</p> <p> 可focus的锚点元素处于focus状态不是本章要讨论的重点，这里只举一个简单的链子，在PC端，我们使用Tab键可以快速定位可focus的元素，如果下一个focus元素位于屏幕外，那么浏览器就会自动重新定位，将这个屏幕外的元素定位到屏幕之中。</p> <p> 虽然两者都是锚点定位，但是这两种方式的表现行为还是有差异的，"URL锚点定位"实让元素定位在浏览器窗体的上边缘，而"focus锚点定位"是让元素在浏览器窗体范围显示即可，不一定是在上边缘（这个你自己一试便知，如CSDN的编辑器就有许多focus元素，把滚动条拖到最上方，按下Tab键就可以看到效果了~）</p> <p> 锚点定位行为发生的本质是通过改变容器滚动高度/宽度来实现的，除了<html>，<span style="color:#f33b45;">锚点定位功能还可以在任何overflow不为visible的元素中实现</span>，这句话中可以拆分成两个条件。</p> <p> 条件（1）：锚点定位行为可以在任何元素中发生，不只是html，还可以是普通的div元素</p> <p> 条件（2）：<span style="color:#f33b45;">只要是overflow不为visible的元素都可以锚点定位，<strong>包括overflow:hidden！</strong></span></p> <p> 第二个条件说明，锚点定位功能和有没有滚动条时也能实现，后面我们会借助这个条件用CSS实现一个选项卡功能。干巴巴的说了许多，还没确认过功能，下面我们就来简单验证一下CSS自带的锚点定位功能。</p> <pre class="has"><code class="language-html">  <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#5">5</a> <a href="#6">6</a> <a href="#7">7</a> <a href="#8">8</a> <a href="#9">9</a> <a href="#10">10</a> <a href="#">回到顶部</a> <div style="overflow:auto;height: 300px; width: 300px;"> <div id="1" class="li">1</div> <div id="2" class="li">2</div> <div id="3" class="li">3</div> <div id="4" class="li">4</div> <div id="5" class="li">5</div> <div id="6" class="li">6</div> <div id="7" class="li">7</div> <div id="8" class="li">8</div> <div id="9" class="li">9</div> <div id="10" class="li">10</div> </div> <style type="text/css"> .li{ width: 200px; height: 200px; margin-bottom: 20px; background: yellow; display: inline-block; } </style></code></pre> <p><a href="http://img.e-com-net.com/image/info8/0f8921d69de042f097009e8f5735698d.jpg" target="_blank"><img alt="CSS进阶（11）—— overflow属性详解，利用CSS实现锚点定位_第2张图片" class="has" height="407" src="http://img.e-com-net.com/image/info8/0f8921d69de042f097009e8f5735698d.jpg" width="650" style="border:1px solid black;"></a></p> <p> 上面的例子证明了锚点定位也可以发生在普通元素中，同时我们还需要知道一个概念，就是锚点定位是可以同时发生在嵌套元素中的，且发生的顺序是“由内而外的”，如普通元素和窗体可以同时滚动的时候，就会由内而外触发所有可以滚动的窗体的锚点定位功能。</p> <p> 上面只是锚点定位功能的简单测试，同时他也符合“锚点定位功能是滚动条的表现形式”的正常预期。然而本小节的核心内容是：overflow:hidden的元素也是可以实现锚点定位的，当元素声明了overflow后，里面内容高度溢出的时候，<span style="color:#f33b45;">滚动永远存在，滚动条可有可无</span><span>，下面我们就将上面例子中的overflow:auto改为overflow:hidden，看看是否符合这个理论。</span></p> <p><a href="http://img.e-com-net.com/image/info8/f61ed729fa91460e93c6de098fea2972.jpg" target="_blank"><img alt="CSS进阶（11）—— overflow属性详解，利用CSS实现锚点定位_第3张图片" class="has" height="406" src="http://img.e-com-net.com/image/info8/f61ed729fa91460e93c6de098fea2972.jpg" width="650" style="border:1px solid black;"></a></p> <p><span> 结果跟理论相同，overflow:hidden的元素也可以实现锚点定位功能。</span></p> <h3><span>4.利用CSS实现选项卡效果</span></h3> <p> 理论需要被用在实践中才能发挥他的作用，下面我们就用overflow:hidden的锚点定位功能实现一个CSS选项卡效果。</p> <pre class="has"><code class="language-html"> <div class="box"> <div class="list" id="one">1</div> <div class="list" id="two">2</div> <div class="list" id="three">3</div> <div class="list" id="four">4</div> </div> <div class="link"> <a class="click" href="#one">1</a> <a class="click" href="#two">2</a> <a class="click" href="#three">3</a> <a class="click" href="#four">4</a> </div> <style type="text/css"> .box { width: 20em; height: 10em; border: 1px solid #ddd; overflow: hidden; } .list { line-height: 10em; background: #ddd; text-align: center; } </style></code></pre> <p><a href="http://img.e-com-net.com/image/info8/76131797d30b4f15a19351bec6c46ada.jpg" target="_blank"><img alt="CSS进阶（11）—— overflow属性详解，利用CSS实现锚点定位_第4张图片" class="has" height="308" src="http://img.e-com-net.com/image/info8/76131797d30b4f15a19351bec6c46ada.jpg" width="650" style="border:1px solid black;"></a></p> <p> 当然这个方法也有其缺点，就是需要固定高度，当然这只是一个小缺点，他还有个更麻烦的地方就是，锚点功能“由内而外”的特性会使其触发窗体外的重定位，也就是说如果页面也是可以滚动，那么点击选项卡后页面会发生跳动，这种体验显然是“bug”级别的存在，因此这里只是介绍这种方法，在实际场景中，我更推荐使用第二种方法去实现CSS锚点定位功能。</p> <p> 还记得刚才提到的focus元素也可以触发锚点定位的功能嘛？而且focus的特性就是只要元素在浏览器内，就不会触发浏览器窗口的重新定位，这个属性用在选项卡这儿，简直是太棒了。那么如何触发元素的focus呢？原生的标签也可以触发这个属性，就是已经快被我们遗忘的label标签可以完美触发input的focus，知道了这些理论后我们就可以实现一个完美的CSS选项卡功能了。</p> <pre class="has"><code class="language-html"> <div class="box"> <div class="list"><input id="one">1</div> <div class="list"><input id="two">2</div> <div class="list"><input id="three">3</div> <div class="list"><input id="four">4</div> </div> <div class="link"> <label class="click" for="one">1</label> <label class="click" for="two">2</label> <label class="click" for="three">3</label> <label class="click" for="four">4</label> </div> <style type="text/css"> .box { width: 20em; height: 10em; border: 1px solid #ddd; overflow: hidden; } .list { height: 100%; background: #ddd; text-align: center; position: relative; } .list > input { position: absolute; top:0; height: 100%; width: 1px; border:0; padding: 0; margin: 0; clip: rect(0 0 0 0); } </style></code></pre> <p> </p> <p> overflow的讲解到此就结束了，下一章我们继续来探讨CSS世界的流破坏与流保护，之前讲了float，下一章float的好PY position：absolute相关的内容，感兴趣的关注一下吧~ </p> <p> </p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1295365158658449408"></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">  <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>  <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>  <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世界,我的CSS世界)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1883253394064338944.htm" title="数据结构与算法之美：单链表" target="_blank">数据结构与算法之美：单链表</a> <span class="text-muted"><但凡.</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95%E4%B9%8B%E7%BE%8E/1.htm">数据结构与算法之美</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>Hello大家好！很高兴我们又见面啦！给生活添点passion，开始今天的编程之路！我的博客：data=x;returnNode;}其中，x是我们想存入的数据，在初始化节点的时候我们给定节点存储的数据。2.2节点的打印现在假设我们存入了几个节点的数据，我们想要打印一下：voidSListPrint(SListNode*plist){SListNode*pcur=plist;while(pcur-></div> </li> <li><a href="/article/1883248854220992512.htm" title="理解inode" target="_blank">理解inode</a> <span class="text-muted">zhanshenyn</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/table/1.htm">table</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/file/1.htm">file</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8/1.htm">存储</a><a class="tag" taget="_blank" href="/search/user/1.htm">user</a> <div>inode是一个重要概念，是理解Unix/Linux文件系统和硬盘储存的基础。我觉得，理解inode，不仅有助于提高系统操作水平，还有助于体会Unix设计哲学，即如何把底层的复杂性抽象成一个简单概念，从而大大简化用户接口。下面就是我的inode学习笔记，尽量保持简单。===================================理解inode作者：阮一峰一、inode是什么？理解inode</div> </li> <li><a href="/article/1883245192832675840.htm" title="【NTN 卫星通信】关于卫星通信的一次访谈" target="_blank">【NTN 卫星通信】关于卫星通信的一次访谈</a> <span class="text-muted">一只好奇的猫2</span> <a class="tag" taget="_blank" href="/search/NTN%E5%8D%AB%E6%98%9F%E9%80%9A%E4%BF%A1/1.htm">NTN卫星通信</a><a class="tag" taget="_blank" href="/search/%E5%8D%AB%E6%98%9F%E9%80%9A%E4%BF%A1/1.htm">卫星通信</a><a class="tag" taget="_blank" href="/search/NTN/1.htm">NTN</a><a class="tag" taget="_blank" href="/search/starlink/1.htm">starlink</a><a class="tag" taget="_blank" href="/search/%E6%B3%A2%E6%9D%9F/1.htm">波束</a><a class="tag" taget="_blank" href="/search/%E8%A6%86%E7%9B%96/1.htm">覆盖</a> <div>1概述通过CSDN的途径，有个咨询公司找到我，说是有投资公司看到我的博客，希望做一次访谈，我回答了10个问题，现在发到博客上；很多观点都是自己根据经验拍的，并没有严格的计算，有兴趣的看看就好，有些问题还挺有趣的。2访谈问题以及回复1、对于一个信号发生设备，如通信基站，其理论最大信道容量（网速,bit/s）和其通信频率（Hz）、功率（W）的数学关系是什么，能否用公式表示。答复：这个问题可以直接由</div> </li> <li><a href="/article/1883241655935496192.htm" title="什么是华强北-ChatGPT4o作答" target="_blank">什么是华强北-ChatGPT4o作答</a> <span class="text-muted">部分分式</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>华强北是中国深圳市的一个著名电子市场，位于福田区。它被誉为全球最大的电子产品交易市场之一，吸引了来自世界各地的商人、消费者和技术爱好者。华强北以其丰富的电子元器件、电子产品以及配件而闻名，是全球电子产业链的重要组成部分。华强北的历史背景华强北的发展历史可以追溯到上世纪80年代，随着深圳成为改革开放的前沿城市，电子产业迅速崛起。最初，华强北只是一个传统的小市场，出售一些基础的电子元件和零配件。然而，</div> </li> <li><a href="/article/1883233587684241408.htm" title="深入浅出 Python 函数：编写、使用与高级特性详解" target="_blank">深入浅出 Python 函数：编写、使用与高级特性详解</a> <span class="text-muted">田猿笔记</span> <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><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a> <div>引言在Python编程的世界中，函数堪称构建复杂逻辑和模块化程序的基础砖石。它能够帮助程序员组织代码、避免重复，并通过封装逻辑提高代码的可读性和可维护性。本文旨在全方位解析Python函数的核心概念，包括基础定义、文档化、默认参数、可选参数、解包参数、关键字仅参数、注解、可调用性检查、函数名称获取、匿名函数（lambda表达式）、生成器以及装饰器等多种实用特性。一、函数基础与文档化defexamp</div> </li> <li><a href="/article/1883223240499851264.htm" title="ollama部署及实践记录,虚拟环境，pycharm等" target="_blank">ollama部署及实践记录,虚拟环境，pycharm等</a> <span class="text-muted">PyAIGCMaster</span> <a class="tag" taget="_blank" href="/search/%E6%88%91%E4%B9%B0%E4%BA%86%E4%B8%AA%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">我买了个服务器</a><a class="tag" taget="_blank" href="/search/pycharm/1.htm">pycharm</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>我的环境：ubutu24.050.相关命令kt@kt4028:~/myproject/ollama-linux$ollama--helpLargelanguagemodelrunnerUsage:ollama[flags]ollama[command]AvailableCommands:serveStartollamacreateCreateamodelfromaModelfileshowShow</div> </li> <li><a href="/article/1883217441463529472.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/%E8%BD%AF%E4%BB%B6%E6%9E%84%E5%BB%BA/1.htm">软件构建</a> <div>前端构建工具是开发现代Web应用时不可或缺的工具，用于优化代码、提升开发效率、以及实现高效的构建和部署。以下是常见的前端构建工具及其作用：1.模块打包工具Webpack特点：功能强大，插件与配置灵活。作用：将模块（JS、CSS、图片等）打包成浏览器可运行的文件。适用场景：中大型项目，需高度自定义。Vite特点：轻量、快速构建，基于ESModules。作用：适合现代框架如Vue、React，热更新速</div> </li> <li><a href="/article/1883216935240396800.htm" title="JVM、JRE 和 JDK：深入解析" target="_blank">JVM、JRE 和 JDK：深入解析</a> <span class="text-muted">ㅇㅁㅇ</span> <a class="tag" taget="_blank" href="/search/java%E5%9F%BA%E7%A1%80/1.htm">java基础</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在Java编程的世界中，JVM、JRE和JDK是三个关键的组成部分，每个部分在Java的开发和运行中都扮演着重要角色。理解这三者的关系不仅对开发者有帮助，也有助于解决编程过程中遇到的各种问题。下面我们将更详细地探讨它们的具体功能和相互关系。JVM（JavaVirtualMachine）JVM，即Java虚拟机，是Java平台的核心组成部分。其主要功能包括：字节码执行：JVM的主要任务是执行Java</div> </li> <li><a href="/article/1883203442533527552.htm" title="RV1126+FFMPEG推流项目源码" target="_blank">RV1126+FFMPEG推流项目源码</a> <span class="text-muted">学习嵌入式的小羊~</span> <a class="tag" taget="_blank" href="/search/ffmpeg/1.htm">ffmpeg</a> <div>源码在我的gitee上面，感兴趣的可以自行了解nullhttps://gitee.com/x-lan/rv126-ffmpeg-streaming-projecthttps://gitee.com/x-lan/rv126-ffmpeg-streaming-project</div> </li> <li><a href="/article/1883189187318968320.htm" title="题海拾贝：力扣 138.随机链表的复制" target="_blank">题海拾贝：力扣 138.随机链表的复制</a> <span class="text-muted"><但凡.</span> <a class="tag" taget="_blank" href="/search/%E9%A2%98%E6%B5%B7%E6%8B%BE%E8%B4%9D/1.htm">题海拾贝</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>Hello大家好！很高兴我们又见面啦！给生活添点passion，开始今天的编程之路！我的博客：val=x;newnode->next=NULL;newnode->random=NULL;returnnewnode;}voidtest(structNode*head){structNode*cur=head;while(cur){structNode*newnode=buynode(cur->val</div> </li> <li><a href="/article/1883189188317212672.htm" title="题海拾贝：力扣 225.用队列实现栈" target="_blank">题海拾贝：力扣 225.用队列实现栈</a> <span class="text-muted"><但凡.</span> <a class="tag" taget="_blank" href="/search/%E9%A2%98%E6%B5%B7%E6%8B%BE%E8%B4%9D/1.htm">题海拾贝</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>Hello大家好！很高兴我们又见面啦！给生活添点passion，开始今天的编程之路！我的博客：phead=ph->ptail=NULL;ph->size=0;}voidQueueDestory(Q*ph){assert(ph);QN*cur=ph->phead;while(cur){QN*next=cur->next;free(cur);cur=next;}//队头队尾置空，否则队头队尾是野指针。</div> </li> <li><a href="/article/1883176318925860864.htm" title="如何优化Python开发：PIP和Anaconda的作用及国内源设置指南" target="_blank">如何优化Python开发：PIP和Anaconda的作用及国内源设置指南</a> <span class="text-muted">Chaiio Dain</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pip/1.htm">pip</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/conda/1.htm">conda</a> <div>前言在现代数据科学和软件开发的世界中，Python已经成为了最受欢迎的编程语言之一。其强大的生态系统和丰富的第三方库使得开发者可以快速构建各种应用程序和解决方案。然而，随着项目规模的扩大和复杂性的增加，管理Python包和依赖项变得尤为重要。PIP（Python包管理工具）和Anaconda（一个开源的Python发行版）就是在这种背景下应运而生的重要工具。PIP和Anaconda不仅简化了包的安</div> </li> <li><a href="/article/1883168000383709184.htm" title="[C++技能提升]类注册" target="_blank">[C++技能提升]类注册</a> <span class="text-muted">Hunter_pcx</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E7%A8%8B%E6%8A%80%E8%83%BD/1.htm">工程技能</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/c%2B%2B/1.htm">c++</a> <div>最近在做AI信息在各个平台流转的框架设计，想要设计一种可以灵活扩展、不改变原有代码的框架，了解到了类注册。具体需求是这样的：AI算法在客户本地电脑和云端都有部署，原先AI在这两个平台下的输出格式并不统一，且每个AI功能都有自己的输出格式，导致两个平台下的AI信息无法共享，带来了计算资源的浪费，管理起来也比较混乱，因此需要一种模式将所有AI输出规范起来。我的解决思路大概就是将所有AI信息都规范输出到</div> </li> <li><a href="/article/1883158292507717632.htm" title="优雅驾驭 TryParse：技巧与实战全攻略" target="_blank">优雅驾驭 TryParse：技巧与实战全攻略</a> <span class="text-muted">东百牧码人</span> <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>一、引言在编程的世界里，数据类型的转换是我们经常会遇到的操作。而TryParse方法作为一种安全、高效的类型转换方式，在许多编程语言中都有着广泛的应用，比如C#、Java等。它能够帮助我们在将字符串转换为其他数据类型时，避免因格式不正确而引发的异常，使我们的程序更加健壮和稳定。今天，咱们就来聊聊如何优雅地使用TryParse，让你的代码既简洁又高效，展现出编程的艺术之美。二、TryParse基础解</div> </li> <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/1883148710184022016.htm" title="基于ROS的相机和激光雷达离线自动标定" target="_blank">基于ROS的相机和激光雷达离线自动标定</a> <span class="text-muted">AUBarryRobot</span> <a class="tag" taget="_blank" href="/search/%E4%BC%A0%E6%84%9F%E5%99%A8%E6%A0%87%E5%AE%9A/1.htm">传感器标定</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%A0%81%E7%9B%B8%E6%9C%BA/1.htm">数码相机</a> <div>目录前言理论背景相机和激光雷达标定原理实现思路Reference前言因为本人实际工作中在做视觉和雷达的相关融合工作，所以相机和雷达的传感器之间的位姿RT矩阵则是要首先进行解决的。标定对大部分人来说都很头疼，抵触，在网上进行调研也没有什么太好的方法，或者别人分享的项目和自己的相差很大，根本不适用或者不好复现。而且可能全程比较繁琐，需要手动进行各种操作，运行一大堆程序。我的联合标定程序，只需要采集对应</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/1883107987422244864.htm" title="ORA-12541:TNS:无监听程序(Linux/Centos系统)" target="_blank">ORA-12541:TNS:无监听程序(Linux/Centos系统)</a> <span class="text-muted">立志成为架构师</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>没有启动远程服务器的ORACLE监听程序。#切换成oralce用户su-oracle#启动监听lsnrctlstart如果出现ORA-12514错误，请查看我的另外一篇博客。</div> </li> <li><a href="/article/1883097264918949888.htm" title="摄影三要素" target="_blank">摄影三要素</a> <span class="text-muted">长安er</span> <a class="tag" taget="_blank" href="/search/%E5%85%89%E7%94%B5/1.htm">光电</a><a class="tag" taget="_blank" href="/search/%E6%91%84%E5%BD%B1/1.htm">摄影</a><a class="tag" taget="_blank" href="/search/%E6%91%84%E5%BD%B1/1.htm">摄影</a><a class="tag" taget="_blank" href="/search/%E6%91%84%E5%BD%B1%E4%B8%89%E8%A6%81%E7%B4%A0/1.htm">摄影三要素</a><a class="tag" taget="_blank" href="/search/%E5%85%89%E5%9C%88/1.htm">光圈</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E9%97%A8/1.htm">快门</a><a class="tag" taget="_blank" href="/search/ISO/1.htm">ISO</a> <div>在摄影的奇妙世界里，有三个关键要素掌控着每一张照片的最终效果，它们就是光圈、快门速度和感光度，被统称为摄影三要素。一、光圈：光线的闸门（一）光圈的定义与原理光圈就像是相机镜头中的一扇可调节大小的窗户，它控制着进入相机的光线量。光圈值通常用f数来表示，比如f/1.4、f/2.8、f/5.6等。这里的数字越小，光圈孔径越大，允许进入相机的光线就越多；反之，数字越大，光圈孔径越小，进入的光线也就越少。（</div> </li> <li><a href="/article/1883092727638323200.htm" title="数据库基础知识：理论、E-R图、事务、原则" target="_blank">数据库基础知识：理论、E-R图、事务、原则</a> <span class="text-muted">地信小学生</span> <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/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/postgresql/1.htm">postgresql</a> <div>（5）数据库理论与E-R图数据库理论（DatabaseTheory）是在创建数据库的过程涉及创建现实世界的抽象模型；将现实世界的概念作为实体表示在数据库中。E-R图（EntityRelationshipDiagramming）用于表示数据模型的图形工具/关系的抽象，主要用于数据库设计阶段，通过实体（Entity）、属性（Attribute）和关系（Relationship）来描述数据之间的结构和联</div> </li> <li><a href="/article/1883086796871495680.htm" title="【Nginx系列】Nginx配置超时时间" target="_blank">【Nginx系列】Nginx配置超时时间</a> <span class="text-muted">m0_74824552</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>???欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan的首页,持续学习,不断总结,共同进步,活到老学到老导航檀越剑指大厂系列:全面总结java核心技术,jvm,并发编程redis,kafka,Spring,微服务等常用开发工具系列:常用的开发工具,IDEA,Mac,Alfred,G</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/1883077725091065856.htm" title="doss攻击为什么是无解的？" target="_blank">doss攻击为什么是无解的？</a> <span class="text-muted">网络安全教程库</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</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/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.htm">计算机网络</a><a class="tag" taget="_blank" href="/search/ddos/1.htm">ddos</a><a class="tag" taget="_blank" href="/search/wireshark/1.htm">wireshark</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E6%94%BB%E5%87%BB%E6%A8%A1%E5%9E%8B/1.htm">网络攻击模型</a> <div>这个让Google、亚马逊等实力巨头公司也无法避免的攻击。可以这么说，是目前最强大、最难防御的攻击之一，属于世界级难题，并且没有解决办法。Doss攻击的原理不复杂，就是利用大量肉鸡仿照真实用户行为，使目标服务器资源消耗殆尽，最终无法为用户提供服务。就好像一家火锅店来了一群流氓，光占座不叫餐，导致正常顾客没座位点不了餐，火锅店无法正常开店。相信大家都经历过，双11做活动时，访问量激增，导致页面打开速</div> </li> <li><a href="/article/1883069026507223040.htm" title="C/C++教程第十四章 —— MFC控件详解" target="_blank">C/C++教程第十四章 —— MFC控件详解</a> <span class="text-muted">余识-</span> <a class="tag" taget="_blank" href="/search/C%2FC%2B%2B/1.htm">C/C++</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%88%98%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/1.htm">实战入门到精通</a><a class="tag" taget="_blank" href="/search/mfc/1.htm">mfc</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>注意本系列文章已升级、转移至我的自建站点中，本章原文为：MFC控件详解目录注意一、前言二、项目建立三、Comboxbox四、ListBox五、GroupBox六、Picturecontrol七、ScrollBar八、SpinControl九、ProgressControl十、hotkey十一、ListControl十二、TreeControl十三、TabControl一、前言通过前面两章的学习，现</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/1883064230853275648.htm" title="读论文 Situated Instruction Following" target="_blank">读论文 Situated Instruction Following</a> <span class="text-muted">MhZhou0412</span> <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><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>研究背景：在传统的指令跟随范式中，代理独自在一个空房子里行动，导致语言使用既简单又人为“完整”。与此相反，我们提出了情境指令跟随（SIF），该方法拥抱真实世界通信中固有的不完全和模糊性，具有人的物理存在。情境指令的意义通过人类的过去行动和预期未来行为自然展开。在我们的设置中，指令具有以下特征：(1)模糊不清，(2)具有时间演变的意图，(3)可以通过代理的动态行动更精确地解释。SIF中的任务包括两个</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/1883044558208561152.htm" title="数据库基础：从概念到 MySQL 实战" target="_blank">数据库基础：从概念到 MySQL 实战</a> <span class="text-muted">东锋1.3</span> <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/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>数据库基础：从概念到MySQL实战在当今数字化时代，数据的重要性不言而喻，而数据库作为数据管理的核心工具，发挥着关键作用。对于技术爱好者和开发者来说，深入了解数据库知识是必不可少的。今天，就让我们一起走进数据库的世界，从基础概念到MySQL数据库的实战应用，进行一次全面的探索。一、数据库的基本概念1.数据库发展历程数据库的发展是随着数据处理量的不断增加而逐步演进的，主要经历了四个阶段：人工管理阶段</div> </li> <li><a href="/article/1883044431980982272.htm" title="计算机网络中常用的端口号以及对应的应用程序" target="_blank">计算机网络中常用的端口号以及对应的应用程序</a> <span class="text-muted">东锋1.3</span> <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C%E4%B8%8E%E9%80%9A%E4%BF%A1/1.htm">计算机网络与通信</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>计算机网络中常用端口号及其应用程序详解在计算机网络的世界里，端口号扮演着至关重要的角色，它是标识网络应用程序的一种方式，使得不同的应用程序能够在同一台计算机上同时运行，并通过各自不同的端口与网络进行通信。在网络通信过程中，每个数据包都包含源端口号和目标端口号，以此来确保数据包能准确无误地传输到目标应用程序。接下来，让我们详细了解一些网络中常用的端口号及其对应的应用程序。1.端口号：80应用程序：H</div> </li> <li><a href="/article/12.htm" title="eclipse maven" target="_blank">eclipse maven</a> <span class="text-muted">IXHONG</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>eclipse中使用maven插件的时候，运行run as maven build的时候报错 -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable and mvn script match. 可以设一个环境变量M2_HOME指</div> </li> <li><a href="/article/139.htm" title="timer cancel方法的一个小实例" target="_blank">timer cancel方法的一个小实例</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a> <div>package com.lj.timer; import java.util.Date; import java.util.Timer; import java.util.TimerTask; public class MyTimer extends TimerTask { private int a; private Timer timer; pub</div> </li> <li><a href="/article/266.htm" title="MySQL数据库在Linux下的安装" target="_blank">MySQL数据库在Linux下的安装</a> <span class="text-muted">ducklsl</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>1.建好一个专门放置MySQL的目录 /mysql/db数据库目录 /mysql/data数据库数据文件目录 2.配置用户，添加专门的MySQL管理用户 >groupadd mysql ----添加用户组 >useradd -g mysql mysql ----在mysql用户组中添加一个mysql用户 3.配置，生成并安装MySQL >cmake -D</div> </li> <li><a href="/article/393.htm" title="spring------>>cvc-elt.1: Cannot find the declaration of element" target="_blank">spring------>>cvc-elt.1: Cannot find the declaration of element</a> <span class="text-muted">Array_06</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a> <div>将-------- <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3</div> </li> <li><a href="/article/520.htm" title="maven发布第三方jar的一些问题" target="_blank">maven发布第三方jar的一些问题</a> <span class="text-muted">cugfy</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>maven中发布第三方jar到nexus仓库使用的是 deploy:deploy-file命令有许多参数，具体可查看 http://maven.apache.org/plugins/maven-deploy-plugin/deploy-file-mojo.html 以下是一个例子： mvn deploy:deploy-file -DgroupId=xpp3 </div> </li> <li><a href="/article/647.htm" title="MYSQL下载及安装" target="_blank">MYSQL下载及安装</a> <span class="text-muted">357029540</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 好久没有去安装过MYSQL，今天自己在安装完MYSQL过后用navicat for mysql去厕测试链接的时候出现了10061的问题，因为的的MYSQL是最新版本为5.6.24，所以下载的文件夹里没有my.ini文件，所以在网上找了很多方法还是没有找到怎么解决问题，最后看到了一篇百度经验里有这个的介绍，按照其步骤也完成了安装，在这里给大家分享下这个链接的地址</div> </li> <li><a href="/article/774.htm" title="ios TableView cell的布局" target="_blank">ios TableView cell的布局</a> <span class="text-muted">张亚雄</span> <a class="tag" taget="_blank" href="/search/tableview/1.htm">tableview</a> <div> cell.imageView.image = [UIImage imageNamed:[imageArray objectAtIndex:[indexPath row]]]; CGSize itemSize = CGSizeMake(60, 50); &nbs</div> </li> <li><a href="/article/901.htm" title="Java编码转义" target="_blank">Java编码转义</a> <span class="text-muted">adminjun</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81%E8%BD%AC%E4%B9%89/1.htm">编码转义</a> <div> import java.io.UnsupportedEncodingException; /** * 转换字符串的编码 */ public class ChangeCharset { /** 7位ASCII字符，也叫作ISO646-US、Unicode字符集的基本拉丁块 */ public static final Strin</div> </li> <li><a href="/article/1028.htm" title="Tomcat 配置和spring" target="_blank">Tomcat 配置和spring</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>简介 Tomcat启动时，先找系统变量CATALINA_BASE，如果没有，则找CATALINA_HOME。然后找这个变量所指的目录下的conf文件夹，从中读取配置文件。最重要的配置文件：server.xml 。要配置tomcat，基本上了解server.xml，context.xml和web.xml。 Server.xml -- tomcat主</div> </li> <li><a href="/article/1155.htm" title="Java打印当前目录下的所有子目录和文件" target="_blank">Java打印当前目录下的所有子目录和文件</a> <span class="text-muted">ayaoxinchao</span> <a class="tag" taget="_blank" href="/search/%E9%80%92%E5%BD%92/1.htm">递归</a><a class="tag" taget="_blank" href="/search/File/1.htm">File</a> <div>其实这个没啥技术含量，大湿们不要操笑哦，只是做一个简单的记录，简单用了一下递归算法。 import java.io.File; /** * @author Perlin * @date 2014-6-30 */ public class PrintDirectory { public static void printDirectory(File f</div> </li> <li><a href="/article/1282.htm" title="linux安装mysql出现libs报冲突解决" target="_blank">linux安装mysql出现libs报冲突解决</a> <span class="text-muted">BigBird2012</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>linux安装mysql出现libs报冲突解决安装mysql出现 file /usr/share/mysql/ukrainian/errmsg.sys from install of MySQL-server-5.5.33-1.linux2.6.i386 conflicts with file from package mysql-libs-5.1.61-4.el6.i686 </div> </li> <li><a href="/article/1409.htm" title="jedis连接池使用实例" target="_blank">jedis连接池使用实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/jedis%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">jedis连接池</a><a class="tag" taget="_blank" href="/search/jedis/1.htm">jedis</a> <div>实例代码： package com.bijian.study; import java.util.ArrayList; import java.util.List; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis.clients.jedis.JedisPoo</div> </li> <li><a href="/article/1536.htm" title="关于朋友" target="_blank">关于朋友</a> <span class="text-muted">bingyingao</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8B%E5%8F%8B/1.htm">朋友</a><a class="tag" taget="_blank" href="/search/%E5%85%B4%E8%B6%A3%E7%88%B1%E5%A5%BD/1.htm">兴趣爱好</a><a class="tag" taget="_blank" href="/search/%E7%BB%B4%E6%8C%81/1.htm">维持</a> <div> 成为朋友的必要条件：志相同，道不合，可以成为朋友。譬如马云、周星驰一个是商人，一个是影星，可谓道不同，但都很有梦想，都要在各自领域里做到最好，当他们遇到一起，互相欣赏，可以畅谈两个小时。志不同，道相合，也可以成为朋友。譬如有时候看到两个一个成绩很好每次考试争做第一，一个成绩很差的同学是好朋友。他们志向不相同，但他</div> </li> <li><a href="/article/1663.htm" title="【Spark七十九】Spark RDD API一" target="_blank">【Spark七十九】Spark RDD API一</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>aggregate package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} //测试RDD的aggregate方法 object AggregateTest { def main(args: Array[String]) { val conf = new Spar</div> </li> <li><a href="/article/1790.htm" title="ktap 0.1 released" target="_blank">ktap 0.1 released</a> <span class="text-muted">bookjovi</span> <a class="tag" taget="_blank" href="/search/kernel/1.htm">kernel</a><a class="tag" taget="_blank" href="/search/tracing/1.htm">tracing</a> <div>Dear, I'm pleased to announce that ktap release v0.1, this is the first official release of ktap project, it is expected that this release is not fully functional or very stable and we welcome bu</div> </li> <li><a href="/article/1917.htm" title="能保存Properties文件注释的Properties工具类" target="_blank">能保存Properties文件注释的Properties工具类</a> <span class="text-muted">BrokenDreams</span> <a class="tag" taget="_blank" href="/search/properties/1.htm">properties</a> <div> 今天遇到一个小需求：由于java.util.Properties读取属性文件时会忽略注释，当写回去的时候，注释都没了。恰好一个项目中的配置文件会在部署后被某个Java程序修改一下，但修改了之后注释全没了，可能会给以后的参数调整带来困难。所以要解决这个问题。 &nb</div> </li> <li><a href="/article/2044.htm" title="读《研磨设计模式》-代码笔记-外观模式-Facade" target="_blank">读《研磨设计模式》-代码笔记-外观模式-Facade</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /* * 百度百科的定义： * Facade（外观）模式为子系统中的各类（或结构与方法）提供一个简明一致的界面， * 隐藏子系统的复杂性，使子系统更加容易使用。他是为子系统中的一组接口所提供的一个一致的界面 * * 可简单地</div> </li> <li><a href="/article/2171.htm" title="After Effects教程收集" target="_blank">After Effects教程收集</a> <span class="text-muted">cherishLC</span> <a class="tag" taget="_blank" href="/search/After+Effects/1.htm">After Effects</a> <div>1、中文入门 http://study.163.com/course/courseMain.htm?courseId=730009 2、videocopilot英文入门教程（中文字幕） http://www.youku.com/playlist_show/id_17893193.html 英文原址： http://www.videocopilot.net/basic/ 素</div> </li> <li><a href="/article/2298.htm" title="Linux Apache 安装过程" target="_blank">Linux Apache 安装过程</a> <span class="text-muted">crabdave</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>Linux Apache 安装过程下载新版本： apr-1.4.2.tar.gz（下载网站：http://apr.apache.org/download.cgi） apr-util-1.3.9.tar.gz（下载网站：http://apr.apache.org/download.cgi） httpd-2.2.15.tar.gz（下载网站：http://httpd.apac</div> </li> <li><a href="/article/2425.htm" title="Shell学习之变量赋值和引用" target="_blank">Shell学习之变量赋值和引用</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E5%8F%98%E9%87%8F%E5%BC%95%E7%94%A8/1.htm">变量引用</a><a class="tag" taget="_blank" href="/search/%E8%B5%8B%E5%80%BC/1.htm">赋值</a> <div>本文转自：http://www.cnblogs.com/papam/articles/1548679.html Shell编程中，使用变量无需事先声明，同时变量名的命名须遵循如下规则：首个字符必须为字母（a-z，A-Z）中间不能有空格，可以使用下划线（_）不能使用标点符号不能使用bash里的关键字（可用help命令查看保留关键字）需要给变量赋值时，可以这么写： </div> </li> <li><a href="/article/2552.htm" title="Java SE 第一讲（Java SE入门、JDK的下载与安装、第一个Java程序、Java程序的编译与执行）" target="_blank">Java SE 第一讲（Java SE入门、JDK的下载与安装、第一个Java程序、Java程序的编译与执行）</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>Java SE 第一讲： Java SE：Java Standard Edition Java ME: Java Mobile Edition Java EE：Java Enterprise Edition Java是由Sun公司推出的（今年初被Oracle公司收购）。收购价格：74亿美金 J2SE、J2ME、J2EE JDK：Java Development </div> </li> <li><a href="/article/2679.htm" title="YII给用户登录加上验证码" target="_blank">YII给用户登录加上验证码</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>1、在SiteController中添加如下代码： /** * Declares class-based actions. */ public function actions() { return array( // captcha action renders the CAPTCHA image displ</div> </li> <li><a href="/article/2806.htm" title="Lucene使用说明" target="_blank">Lucene使用说明</a> <span class="text-muted">dyy_gusi</span> <a class="tag" taget="_blank" href="/search/Lucene/1.htm">Lucene</a><a class="tag" taget="_blank" href="/search/search/1.htm">search</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">分词器</a> <div>Lucene使用说明 1、lucene简介 1.1、什么是lucene Lucene是一个全文搜索框架，而不是应用产品。因此它并不像baidu或者googleDesktop那种拿来就能用，它只是提供了一种工具让你能实现这些产品和功能。 1.2、lucene能做什么要回答这个问题，先要了解lucene的本质。实际</div> </li> <li><a href="/article/2933.htm" title="学习编程并不难,做到以下几点即可!" target="_blank">学习编程并不难,做到以下几点即可!</a> <span class="text-muted">gcq511120594</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发各种神奇的软件啦。 1、确定目标学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到</div> </li> <li><a href="/article/3060.htm" title="Java面试十问之三：Java与C++内存回收机制的差别" target="_blank">Java面试十问之三：Java与C++内存回收机制的差别</a> <span class="text-muted">HNUlanwei</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/finalize%28%29/1.htm">finalize()</a><a class="tag" taget="_blank" href="/search/%E5%A0%86%E6%A0%88/1.htm">堆栈</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/1.htm">内存回收</a> <div>大家知道， Java 除了那 8 种基本类型以外，其他都是对象类型（又称为引用类型）的数据。 JVM 会把程序创建的对象存放在堆空间中，那什么又是堆空间呢？其实，堆（ Heap）是一个运行时的数据存储区，从它可以分配大小各异的空间。一般，运行时的数据存储区有堆（ Heap）和堆栈（ Stack），所以要先看它们里面可以分配哪些类型的对象实体，然后才知道如何均衡使用这两种存储区。一般来说，栈中存放的</div> </li> <li><a href="/article/3187.htm" title="第二章 Nginx+Lua开发入门" target="_blank">第二章 Nginx+Lua开发入门</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a> <div>Nginx入门本文目的是学习Nginx+Lua开发，对于Nginx基本知识可以参考如下文章： nginx启动、关闭、重启 http://www.cnblogs.com/derekchen/archive/2011/02/17/1957209.html agentzh 的 Nginx 教程 http://openresty.org/download/agentzh-nginx-tutor</div> </li> <li><a href="/article/3314.htm" title="MongoDB windows安装基本命令" target="_blank">MongoDB windows安装基本命令</a> <span class="text-muted">liyonghui160com</span> <div> windows安装安装目录： D:\MongoDB\ 新建目录 D:\MongoDB\data\db 4.启动进城： cd D:\MongoDB\bin mongod -dbpath D:\MongoDB\data\db &n</div> </li> <li><a href="/article/3441.htm" title="Linux下通过源码编译安装程序" target="_blank">Linux下通过源码编译安装程序</a> <span class="text-muted">pda158</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>一、程序的组成部分　　Linux下程序大都是由以下几部分组成：　　二进制文件：也就是可以运行的程序文件　　库文件：就是通常我们见到的lib目录下的文件　　配置文件：这个不必多说，都知道　　帮助文档：通常是我们在linux下用man命令查看的命令的文档　　二、linux下程序的存放目录　　linux程序的存放目录大致有三个地方：　　/etc, /b</div> </li> <li><a href="/article/3568.htm" title="WEB开发编程的职业生涯４个阶段" target="_blank">WEB开发编程的职业生涯４个阶段</a> <span class="text-muted">shw3588</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a> <div>觉得自己什么都会 2007年从学校毕业，凭借自己原创的ASP毕业设计，以为自己很厉害似的，信心满满去东莞找工作，找面试成功率确实很高，只是工资不高，但依旧无法磨灭那过分的自信，那时候什么考勤系统、什么OA系统、什么ERP，什么都觉得有信心，这样的生涯大概持续了约一年。根本不是自己想的那样 2008年开始接触很多工作相关的东西，发现太多东西自己根本不会，都需要去学，不管是asp还是js，</div> </li> <li><a href="/article/3695.htm" title="遭遇jsonp同域下变作post请求的坑" target="_blank">遭遇jsonp同域下变作post请求的坑</a> <span class="text-muted">vb2005xu</span> <a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/%E5%90%8C%E5%9F%9Fpost/1.htm">同域post</a> <div>今天迁移一个站点时遇到一个坑爹问题,同一个jsonp接口在跨域时都能调用成功,但是在同域下调用虽然成功,但是数据却有问题. 此处贴出我的后端代码片段 $mi_id = htmlspecialchars(trim($_GET['mi_id '])); $mi_cv = htmlspecialchars(trim($_GET['mi_cv '])); 贴出我前端代码片段: $.aj</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.  </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>