Blueprint CSS Framework 指南
[url]http://www.cnblogs.com/fdszlzl/archive/2009/06/10/1500341.html[/url]
[url]http://www.cnblogs.com/fdszlzl/archive/2009/06/10/1500361.html[/url]
Blueprint CSS Framework 指南
CSS 框架二月二十一日升级到 0.7.1 版本了。经过这么长时间的这几次版本升级，终于把按功能不同 CSS 规则在不同的 CSS 文件中的模式改为单一文件的模式了，所以感觉 Blueprint CSS 框架现在是一个可以用到实际项目中的 CSS 框架了。
这个 CSS 框架将 html 标签设定为如下情况：
统一重置了 43 个 html 标签（html 4.0 标签一共 91 个）的属性，（html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td）。
重置 html 标签的默认样式为：内外填充边框都为零，字体粗细、字体科族和字体样式继承，字体大小百分之百（在中文情况下使用这个还是改固定象素的好），高度以基线对齐；
设定 body 内的行高为 1.5 倍；字体大小百分之七十五（在中文情况下使用这个还是改固定象素的好）；字体颜色为 #222222 （接近于黑色）
设定 table 的边界间距为有间距、间距为零。（用有间距而间距为零的方式，估计只有这样才能将表格的边界间距设的看不到）；下外填充 1.4em ，宽度 100%；
设定 caption, th, td 内的元素居左，字体粗细为普通；caption 的背景色为 #EEEEEE （特浅的灰），th 背景为 #C3D9FF （浅蓝色）内的字体为粗体，th, td 的内填充为 上4px 右10px 下4px 左5px；
设定 table, td, th 内的元素高度居中；
设表格如果需要隔行换色的效果或者某行需要不一样的颜色，那么已经给定了 tr.even td 类，背景颜色为 #E5ECF9 （浅浅的蓝）
设定 tfood 为斜体字
设定 blockquote, q 元素之前和之后的填充内容为空，引用符号也为空；blockquote 的外填充为 1.5em 字体颜色 #666666 （深灰色），斜体字（中文斜体表现并不好，这个改了斜体不要而用背景色或者字体小一号来表示应该会好点）
设定链接下的图片的 border 为零；
设定 h1 至 h6 不同的字体大小粗细外填充，颜色为 #111111 （更接近于黑）
设定 h1 至 h6 下的图片的外填充为零
设定行内图片元素默认左漂浮，同时给出了一个 p img.right 的类，以备你需要图片右漂浮的时候来用（不过很多时候我们需要的是图片不漂浮，这个需要改或者单独建立一个类了）；
设定链接的颜色为 #000099 （深蓝色）带下划线，鼠标滑过和焦点状态颜色为黑色；
设定 abbr 和 acronym 下边缘为一象素点线的边框；
设定 del 删除字的颜色为 #666666 （中等灰度的灰）；
设定 pre 和 code 内地文字显示为 white-space:pre （就是不换行啦，现在都不建议用了）；
<br>定义了 ul 和 ol 列表前的标识为实心小圆点和阿拉伯数字。
<br>还有一些各个标签的上右下左的填充、行高、字号大小的设定不细说了。
<br>单独给定了几个可以根据实际需要单独调用的类：
<br>
<br>.small 小号字；
<br>.large 大号字；
<br>.hide 不显示；
<br>.quiet 字色为 #666666 （深灰色）；
<br>.loud 字色为 #000000 （黑色）；
<br>.highlight 背景色为 #FFFF00 （黄色）；
<br>.added 背景色为 #006600 （绿色）字色为 #FFFFFF （白色）；
<br>.removed 背景色为 #990000 （红色）字色为 #FFFFFF （白色）；
<br>.first 左边的内外填充都为零；
<br>.last 右边的内外填充都为零；
<br>.top 上面的内外填充都为零；
<br>.bottom 下面的内外填充都为零。
<br>布局部分 CSS 说明：
<br>
<br>.container 宽度 950 象素，整体居中模式。这个类应该是主要用于页面 body 元素内的整体页面控制的，好像也没其他用了；
<br>.showgrid 无用的类，这个是用来演示这个框架的一个辅助，可以将这个类删除；
<br>body 元素设定为上下外填充 1.5em，左右外填充为零。
<br>布局的列宽给出了 24 个不同宽度设定的数值：
<br>
<br>div.span-1 至 div.span-24 全部设定为左漂浮，右外填充 10 象素；
<br>div.last 设定右外填充为零象素；
<br>.span-1 至 .span-24 从宽度 30 象素开始，每 40 象素为一单元增加；
<br>.span-24 和 div.span-24 右外填充覆盖上面的设置，设置为零。
<br>
<br>以上四项综合理解可以理解为：
<br>
<br>.span-1 至 .span-23 如果用于 div 元素，那么这个 div 具有的属性是左漂浮，右外填充 10 象素，宽度各自；
<br>.span-1 至 .span-23 如果如果用于其他元素，那么就只具有宽度属性而不具有漂浮属性也没有右外填充；
<br>.span-24 是个特殊一点的样式，如果用于 div 元素，那么宽度为 950 象素，左漂浮，右外填充为零；
<br>.span-24 是个特殊一点的样式，如果用于其他元素，那么宽度为 950 象素，无漂浮，右外填充为零；
<br>div.last 这个类在 CSS 文件中的位置在 div.span-1 至 div.span-24 的后面，所以如果 .last 类应用于 div 元素，那么这个 div 元素的右外填充将覆盖成为零。
<br>内填充数值：
<br>
<br>.append-1 至 .append-23 设置内右填充，从 40 像素开始，每 40 像素为一单元增加，.append-23 内右填充数值为 920 像素；
<br>.prepend-1 至 .prepend-23 设置内左填充，从 40 像素开始，每 40 像素为一单元增加，.prepend-23 内左填充数值为 920 像素。
<br> 给定两个右边线样式：
<br>
<br>div.border 设定右内填充 4px ，右外填充 5px ，右边线 1px 灰色（#EEEEEE）实线；
<br>div.colborder设定右内填充 24px ，右外填充 25px ，右边线 1px 灰色（#EEEEEE）实线。
<br> 外填充样式：
<br>
<br>.pull-1 至 .pull-24 设定左外填充，从负 40 象素开始到负 960 象素，每 40 象素为一个单元数值变化，同时具有左漂浮和相对定位属性；
<br>.push-1 至 .push-24 设定上填充为零，下填充为 1.5 em ；左外填充，从 40 象素开始到 960 象素，每 40 象素为一个单元数值变化，右外填充，从负 40 象素开始到负 960 象素，每 40 象素为一个单元数值变化，同时具有右漂浮和相对定位属性。
<br>
<br>以上两项应该是这个 CSS 框架中最难理解的部分了，在这里不详细说明了，等到写实际应用的时候弄个列子一说就明白作用了；
<br>
<br>给定一些其他样式：
<br>
<br>.box 顾名思义就是一个盒子了，哈，设定内填充 1.5em ，外下填充 1.5em ，背景颜色 #E5ECF9 (浅浅的蓝)
<br>hr 设定 html 的 <hr /> 横线样式为：背景色 #DDDDDD (灰色)，字色 #DDDDDD (灰色)，两侧不允许有漂浮元素，无漂浮，宽度百分之百，高度 0.1em ，外填充上左右为零，下外填充为 1.5em ，没有边框。具体表现出来基本就是一根横的一象素灰色线了；
<br>
<br>hr.space 这个样式是用在 <hr /> 标签内的，设定了背景色和字色都为白色。因为是用在 <hr /> 标签内，所以它同时具有 <hr /> 的设定样式，只是将背景色和字色从灰色覆盖为白色，所以表现起来其实就是一根横的一象素白色线。
<br>给定清除浮动样式：
<br>.clearfix:after 和 .container:after 设定 .clearfix 和 .container 之后的表现为：内容是“.”(一个小点)，显示为块元素，高度为零，两侧不允许有漂浮元素，可见度属性(visibility)为隐藏 (注：可见度 visibility 隐藏属性和 display 隐藏属性有占位区别，visibility 隐藏属性占据空间位置而 display 隐藏属性不占据空间位置)；
<br>.clearfix 和 .container 设定显示样式为行内块(IE 不完全支持此属性，目前只是用这个来让 IE 获得 hasLayout )；
<br>* html .clearfix 和 * html .container 设定在“通配符下的 html 下的.clearfix 和 .container 两个样式”属性高度为 1% (高度为 1% 作用和 zoom:1 的作用是一样的，IE 在 inline-block 加上 1% 或 zoom:1 获得类似 table-cell 的属性，只 IE6 以下识别)；
<br>.clearfix 和 .container 设定显示样式为块模式(覆盖前面指定的行内块模式为块模式，但 IE 不会让 hasLayout 消失，目的由此达到)；
<br>.clear 设定为两侧不允许有漂浮元素。
<br>清除浮动的这三个类中的前两个比较复杂，除了清除浮动外还有一些其他的能力，基本上这几个样式的内容和先后顺序和代码层级设定完后就能在所有的浏览器下清除浮动了(如果某个浏览器不支持的话，那么估计也很难支持这个框架中的大部分 CSS 属性，那么这个框架对这个浏览器来说也没太大的意义了)，具体研究起来就太深了，我是搞不定，不过对我们用的人来说，只要知道你需要清除浮动的时候就用这两个类就可以了。顾名思义，.clearfix 类一般用在你不介意多加一个或者某些情况下你只能多加一个 div 或其他的 html 标签元素而本身内部不包含内容的元素身上来清除浮动，.container 类用在你的一个本身内部包含内容的元素身上来清除浮动。.clear 这个类嘛，没啥可说的了，就是不允许两侧有浮动元素。
<br>表单元素部分：
<br>
<br>这部分其实没有太多需要仔细研究的，大部分指定的是表单元素的一些字体、字号、字色和元素的边框、边距、宽、高等。这些就不详说了，说说可以稍微需要知道一下的。
<br>
<br>给定了元素的获得焦点的样式(一象浅黑边)，可惜 IE 不支持，所以这个作用不是那么大，毕竟 IE 现在还是占据市场份额的巨头；
<br>给定了三个类，可以用来标识有特殊意义的块区：.error, .notice, .success ，都具有不同的背景色和边框色；
<br>
<br> .error 顾名思义标识“错误”
<br> .notice 顾名思义标识“提示”
<br>.success 顾名思义标识“成功”
<br>
<br> blueprint可视化工具 - boks 下载
<br>
<br> blueprint css frameworks下载
<br>
<br>
<br>Blueprint CSS Framework 进阶
<br> css的框架设计能帮我们快速有效的建立高质量的页面，也有助于代码的规范性，当然每一个框架都是建立在无数前人努力的基础上的，下面就推荐一个css框架——the Blueprint CSS Framework
<br>CSS Frameworks + CSS Reset: Design From Scratch
<br>
<br>http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch
<br>
<br>介绍
<br>
<br>blueprint是一个所谓的css framework，相比较而言blueprint 代码中的注释还是比较详细的。
<br>
<br>按照Jeff Croft的Frameworks for Designers(或中文版本 理解Web框架，和如何构建一个CSS框架)描述的如何构建一个css framework的方法：
<br>
<br>blueprint的构建方式也与此类似：
<br>
<br>分而治之：
<br>
<br>buleprint在功能组织上，将诸如布局(layout)、排版(typography)、组件（widget）、重置（reset）、打印 (print)等功能分散到不同的css文件中。这样方便使用者只需要导入自己所要使用的功能，不用导入全部文件，提高页面装载性能。目前在组件部分只提 供了对button的处理，尚未做到麦肯锡的MECE（"相互独立，完全穷尽"）的道。
<br>
<br>统一接口：
<br>
<br>尽管功能分散到多个css文件，但是导入时候，仍然只需要包含同样的文件screen.css文件，具体的导入细节在screen.css中再处理，统一了对外接口。
<br>
<br><link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />
<br>
<br>blueprint 所包含的css文件说明：
<br>
<br>screen.css
<br>
<br>This is the main file of the framework. It imports other CSS files from the "lib" directory, and should be included on every page.
<br>
<br>类似于Jeff Croft的base.css功能，只需要包含此文件，就可以导入
<br>
<br>print.css
<br>
<br>This file sets some default print rules, so that printed versions included on every page.
<br>
<br>用于处理打印，可以归类为widget。
<br>
<br>lib/grid.css
<br>
<br>This file sets up the grid (it's true). It has a lot of classes you apply to divs to set up any sort of column-based grid.
<br>
<br>用于处理页面的布局（栏目）
<br>
<br>lib/typography.css
<br>This file sets some default typography. It also has a few methods for some really fancy stuff to do with your text.
<br>
<br>用于处理页面元素的排版。
<br>
<br>lib/reset.css
<br>
<br>This file resets CSS values that browsers tend to set for you.
<br>
<br>用于重置页面，对没有指定css属性的页面元素指定缺省值。
<br>
<br>lib/buttons.css
<br>Provides some great CSS-only buttons.
<br>
<br>用于处理按钮,可以归类为widget
<br>
<br>lib/compressed.css
<br>
<br>A compressed version of the core files. Use this on every live site.
<br>
<br>See screen.css for instructions
<br>
<br>提供压缩过的（包含grid.css,tyopgraphy.css,reset.css,buttons.css）的css文件。
<br>
<br>2、各模块用法研究
<br>
<br>2.1、grid.css研究
<br>
<br>对跨浏览器居中处理的兼容性处理
<br>
<br>一般而言，要处理firefox、ie在处理居中时候的不同，采用如下方式：
<br>
<br>body{text-align: center;}div#container{margin-left: auto;margin-right: auto;width: 50em;text-align: left;}
<br>
<br>摘自：http://www.maxdesign.com.au/presentation/center/
<br>
<br>blueprint的处理方式：
<br>
<br>body { text-align: center; /* IE6 Fix */ margin:36px 0;}
<br>
<br>/* A container should group all your columns. */
<br>
<br>.container { text-align: left; position: relative; padding: 0; margin: 0 auto; /* Centers layout */ width: 1150px; /* Total width */ }
<br>
<br>分栏（Columns）的实现
<br>
<br>blueprint的处理方式：
<br>
<br>blueprint定义了.column , .span-x ,.last ，两者结合来实现分栏功能。
<br>
<br>其中：.column定义栏目的float属性；.span-x定义栏目宽度；.last将margin-right置为0px,
<br>
<br>.column { float : left; margin-right: 10px; padding: 0;}
<br>
<br>/* Use these classes to set how wide a column should be. */
<br>
<br>.span-1 { width: 30px; }
<br>
<br>.span-2 { width: 70px; }
<br>
<br>.span-3 { width: 110px; }
<br>
<br>.span-4 { width: 150px; }
<br>
<br>....span-8 { width: 310px; }
<br>
<br>.span-9 { width: 350px; }
<br>
<br>.span-10 { width: 390px; }
<br>
<br>....span-23 { width: 910px; }
<br>
<br>.span-24 { width: 950px; margin: 0; }
<br>
<br>.span-25 { width: 200px; }
<br>
<br>.span-26 { width: 1150px; margin: 0; }
<br>
<br>/* The last element in a multi-column block needs this class. */
<br>
<br> .last { margin-right: 0; }
<br>
<br>三栏的实现：
<br>
<br><div class ="container" >
<br>
<br><div class ="column span-24" > Header </div>
<br>
<br><div class ="column span-4" > Left sidebar </div>
<br>
<br><div class ="column span-16" > Main content </div>
<br>
<br><div class ="column span-4 last" > Right sidebar </div>
<br>
<br></div>
<br>
<br>四栏的实现：
<br>
<br><div class ="container" >
<br>
<br><div class ="column span-26" > Header </div>
<br>
<br><div class ="column span-4" > Left sidebar </div>
<br>
<br><div class ="column span-3 " > Main content 0 </div>
<br>
<br><div class ="column span-25" > Main content 1 </div>
<br>
<br><div class ="column span-4 last" > Right sidebar </div>
<br>
<br></div>
<br>
<br>注意把.container中的width(定义了整个页面的width)修改为1150px
<br>
<br>空白栏目的实现：对于多栏目（例如5栏目），其中有空白栏目（例如左右两栏目为空白），可以使用.append-x和.prepend-x来填充。
<br>
<br>其中.append-x在栏目后（padding-right）添加空白栏目，.prepend-x在栏目前（padding-left）添加空白栏目。
<br>
<br>通用的容器定义
<br>
<br>/* A container should group all your columns. */
<br>
<br> .container { text-align: left; position: relative; padding: 0; margin: 0 auto; /* Centers layout */ width: 1150px; /* Total width */ }
<br>
<br>
<br>
<br>2.2、reset.css研究
<br>
<br>reset.css的最初代码应该来自于Eric Meyer,Eric Meyer有两篇关于reset的日志，用于处理跨浏览器缺省值不同的问题。Eric Meyer的文档写得很精彩：
<br>
<br>Reset Reasoning：http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
<br>
<br>Reset Reloaded：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
<br>
<br>为何要reset
<br>The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults. (Okay, no two browser families—most Gecko-based browsers do have the same defaults.)
<br>For example, some browsers indent unordered and ordered lists with left margins, whereas others use left padding. In past years, we tackled these inconsistencies on a case-by-case basis;
<br>
<br>为何使用reset style，而不是universal selector
<br>
<br>所谓universal selector 就是使用* 来代表document所有的元素，例如
<br>
<br>* { margin: 0;} 关于reset style话题的一些资源：
<br>
<br>YUI的reset库：http://developer.yahoo.com/yui/reset/
<br>
<br>http://leftjustified.net/journal/2004/10/19/global-ws-reset/
<br>
<br>以下几篇实际上是讨论css framework或tips的文章，只不过都提到了reset话题。
<br>
<br>http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
<br>
<br>http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/
<br>
<br>http://businesslogs.com/design_and_usability/my_5_css_tips.php
<br>
<br>http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/
<br>
<br>2.3、typography.css研究
<br>
<br>typography.css用于确定页面元素缺省的排版格式（baseline）：
<br>
<br>Setting Type on the Web to a Baseline Grid：
<br>
<br>http://alistapart.com/articles/settingtypeontheweb
<br>
<br>2.4、buttons.css研究
<br>
<br>Rediscovering the Button Element 讨论了用button元素来替代input元素的种种好处，button元素是提供了较为丰富的功能。
<br>
<br>http://particletree.com/features/rediscovering-the-button-element
<br>
<br>2.4、print.css研究
<br>
<br>Eric Meyer有一篇关于css实现print功能的文章，可以作为理解print.css的参考。
<br>
<br>CSS Design: Going to Print
<br>
<br>Print Different
<br>
<br>2.5、compressed.css
<br>
<br>compressed.css是对blueprint几个文件压缩合成包，同时也对css文件进行了压缩，去除了无用的空格、换行、注释等文本。
<br>
<br>此种方式用于在上生产系统部署时候使用，避免在页面导入多个css文件，同时也有利于提高页面性能。
<br>
<br>按照lib/screen.css中的说明，应该使用了teenage提供的css压缩服务：
<br>
<br>http://teenage.cz/acidofil/tools/cssformat.php
<br>
<br>另外类似的提供对css、javascrīpt进行优化、压缩的服务还有：
<br>
<br>http://csstidy.sourceforge.net/ （开源）
<br>
<br>http://www.cssdrive.com/index.php/main/csscompressor/
<br>
<br>http://www.cleancss.com/ （基于csstidy）
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1292598126321934336"></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">你可能感兴趣的:(Blueprint CSS Framework 指南)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1892514111388971008.htm"
title="淘宝/天猫店铺订单数据导出、销售报表设计与数据分析指南" target="_blank">淘宝/天猫店铺订单数据导出、销售报表设计与数据分析指南</a>
<span class="text-muted">不会玩技术的技术girl</span>
<a class="tag" taget="_blank" href="/search/API/1.htm">API</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/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/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
<div>在电商运营中，订单数据是店铺运营的核心资产之一。通过对订单数据的导出、整理和分析，商家可以更好地了解销售情况、优化运营策略、提升客户满意度，并制定科学的业务决策。本文将详细介绍淘宝/天猫店铺订单数据的导出方法、销售报表的设计思路以及数据分析的实用技巧，帮助电商从业者高效管理店铺数据。一、订单数据导出（一）手动导出订单数据淘宝和天猫平台提供了手动导出订单的功能，适用于数据量较小或临时性需求的场景。商</div>
</li>
<li><a href="/article/1892509962526060544.htm"
title="2025基金公司私有化部署趋势分析：技术自主权的崛起" target="_blank">2025基金公司私有化部署趋势分析：技术自主权的崛起</a>
<span class="text-muted"></span>
<div>标题：基金公司私有化部署：数据主权时代的战略选择与实战指南副标题：从DeepSeek到板栗看板，解密金融巨头如何用私有化部署重塑竞争力【热点引入：一场无声的金融科技革命】2025年2月，、十余家公募基金密集宣布完成DeepSeek大模型的私有化部署，这一现象登上财经热搜榜首。据不完全统计，超60%的头部基金公司已启动私有化部署计划，涉及投研、风控、客户服务等核心场景。这场革命背后的驱动力，正是金融</div>
</li>
<li><a href="/article/1892509328053694464.htm"
title="如何选择最佳国外邮箱？注册、登录与购买指南" target="_blank">如何选择最佳国外邮箱？注册、登录与购买指南</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>在如今的数字化时代，邮箱已经成为我们日常生活和工作中不可或缺的工具。无论是个人通信、商务往来，还是注册各种在线服务，一个功能强大、稳定可靠的邮箱都是必不可少的。而在众多国外邮箱服务中，如何选择最适合自己的邮箱？本文将以Zoho邮箱为例，为您详细讲解如何选择、注册、登录以及购买国外邮箱服务。一、为什么选择国外邮箱？在选择邮箱服务时，很多人会考虑国外邮箱。以下是国外邮箱的几大优势：隐私保护更强国外邮箱</div>
</li>
<li><a href="/article/1892508570369454080.htm"
title="cocos creator从零开发简单框架(12)-代码生成单色Sprite" target="_blank">cocos creator从零开发简单框架(12)-代码生成单色Sprite</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/cocos/1.htm">cocos</a>
<div>在写Panel前，先写个方法生成单色Sprite，这样当碰到需要单色Sprite的时候不需要在编辑器拖拽和代码动态加载资源。编辑framework/scripts/AppUtil.ts，添加newSpriteNode方法。//生成默认白色100x100大小Sprite(单色)节点publicstaticnewSpriteNode(name:string='newSpriteNode'):cc.No</div>
</li>
<li><a href="/article/1892508571845849088.htm"
title="cocos creator从零开发简单框架(14)-Panel遮罩" target="_blank">cocos creator从零开发简单框架(14)-Panel遮罩</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/cocos/1.htm">cocos</a>
<div>遮罩相关属性编辑framework/scripts/view/PanelMgr.ts，增加遮罩相关成员变量及初始化方法。//所有面板privatestatic_panels:Map=newMap()privatestatic_maskName='_mask'privatestatic_maskPrefab:cc.Nodepublicstaticinit(){this._panels.clear()</div>
</li>
<li><a href="/article/1892507056150212608.htm"
title="管理升级的关键：2024年6大国内项目管理平台实测与选择指南（禅道、钉钉、云效、简道云、Tapd、Teambition）" target="_blank">管理升级的关键：2024年6大国内项目管理平台实测与选择指南（禅道、钉钉、云效、简道云、Tapd、Teambition）</a>
<span class="text-muted"></span>
<div>以下是一篇满足您要求的博客稿件：引言在当今快节奏的商业环境中，项目管理的重要性不言而喻。一款优秀的项目管理工具能够助力团队提高效率、优化流程，从而实现项目的成功交付。2024年，国内有众多项目管理平台可供选择，本文将对禅道、TAPD、云效、简道云、钉钉、Teambition这6大国内项目管理平台进行实测与分析，为您提供选择指南，帮助您找到最适合团队的项目管理工具。项目管理工具介绍禅道：开源且专业，</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/1892487238852341760.htm"
title="如何快速定位并解决 Linux 系统性能瓶颈：终极全攻略" target="_blank">如何快速定位并解决 Linux 系统性能瓶颈：终极全攻略</a>
<span class="text-muted">BitTalk</span>
<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/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>在现代IT环境中，Linux系统被广泛应用于服务器、嵌入式设备和超级计算机等各类场景。随着系统负载的增加，性能瓶颈不可避免地会影响系统的可靠性和效率。因此，了解如何有效地诊断和解决Linux系统中的性能问题至关重要。本篇博客将深入探讨Linux性能瓶颈的可能来源，介绍各种性能评估方法和概念，并最终提供使用Linux命令查找性能瓶颈的实用指南。性能瓶颈的可能来源在Linux系统中，性能瓶颈可能出现在</div>
</li>
<li><a href="/article/1892486356869902336.htm"
title="在瑞芯微RK3588平台上使用RKNN部署YOLOv8Pose模型的C++实战指南" target="_blank">在瑞芯微RK3588平台上使用RKNN部署YOLOv8Pose模型的C++实战指南</a>
<span class="text-muted">机 ＿ 长</span>
<a class="tag" taget="_blank" href="/search/YOLO%E7%B3%BB%E5%88%97%E6%A8%A1%E5%9E%8B%E6%9C%89%E6%95%88%E6%B6%A8%E7%82%B9%E6%94%B9%E8%BF%9B/1.htm">YOLO系列模型有效涨点改进</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0%E8%90%BD%E5%9C%B0%E5%AE%9E%E6%88%98/1.htm">深度学习落地实战</a><a class="tag" taget="_blank" href="/search/YOLO/1.htm">YOLO</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>在人工智能和计算机视觉领域，人体姿态估计是一项极具挑战性的任务，它对于理解人类行为、增强人机交互等方面具有重要意义。YOLOv8Pose作为YOLO系列中的新成员，以其高效和准确性在人体姿态估计任务中脱颖而出。本文将详细介绍如何在瑞芯微RK3588平台上，使用RKNN（RockchipNeuralNetworkToolkit）框架部署YOLOv8Pose模型，并进行C++代码的编译和运行。注本文全</div>
</li>
<li><a href="/article/1892474879861649408.htm"
title="探索 TypeScript Redux：构建大规模JavaScript应用的终极指南" target="_blank">探索 TypeScript Redux：构建大规模JavaScript应用的终极指南</a>
<span class="text-muted">柳旖岭</span>
<div>探索TypeScriptRedux：构建大规模JavaScript应用的终极指南去发现同类优质开源项目:https://gitcode.com/在当今快速发展的前端开发领域中，组合正确工具集来应对复杂性和扩展性挑战至关重要。今天，我们将深入了解一个令人兴奋的开源项目——TypeScriptRedux，它结合了TypeScript、JSPM、typings、React和Redux的强大功能，为开发者</div>
</li>
<li><a href="/article/1892471850370396160.htm"
title="HarmonyOS全栈开发指南：从入门到精通，构建万物智联的未来生态（一）" target="_blank">HarmonyOS全栈开发指南：从入门到精通，构建万物智联的未来生态（一）</a>
<span class="text-muted">林钟雪</span>
<a class="tag" taget="_blank" href="/search/Harmonyos/1.htm">Harmonyos</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a>
<div>一、HarmonyOS基础认知篇1.HarmonyOS发展历程与核心使命内容摘要：HarmonyOS，由华为公司于2019年首次公开发布，标志着华为在操作系统领域的深度布局。从最初的智能物联网设备操作系统定位，到如今面向万物智联时代的分布式全场景操作系统，HarmonyOS经历了多次迭代与升级。发展历程：初期探索：2019年，华为正式推出HarmonyOS，旨在打造一个适用于智能物联网设备的操作系</div>
</li>
<li><a href="/article/1892470086778810368.htm"
title="Transformer 模型架构" target="_blank">Transformer 模型架构</a>
<span class="text-muted">2401_89793006</span>
<a class="tag" taget="_blank" href="/search/%E7%83%AD%E9%97%A8%E8%AF%9D%E9%A2%98/1.htm">热门话题</a><a class="tag" taget="_blank" href="/search/transformer/1.htm">transformer</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/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
<div>Transformer是一种模型架构（ModelArchitecture），而不是一个软件框架（Framework）。它的定位更接近于一种设计蓝图，类似于建筑中的结构设计方案。以下是详细解释：1.架构vs框架的区别概念定义示例模型架构定义神经网络的结构设计Transformer、CNN、RNN开发框架提供实现模型的工具和库PyTorch、TensorFlow2.Transformer作为架构的核心</div>
</li>
<li><a href="/article/1892468952072777728.htm"
title="Vue.js 基础与实战指南：从入门到跑路" target="_blank">Vue.js 基础与实战指南：从入门到跑路</a>
<span class="text-muted">王嘉俊705</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/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/code/1.htm">code</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><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>一、Vue的两种使用方式扩展核心包开发直接通过引入Vue.js，适用于简单页面或局部功能增强。优点：轻量，无需构建工具。缺点：难以管理复杂项目，缺少工程化支持。工程化开发使用VueCLI、Vite等工具创建项目，结合Webpack/Vite构建。支持单文件组件（.vue文件），结构清晰（`,,）。插件生态丰富（如VueRouter、Vuex、Pinia）。二、Vue实例的深入理解核心配置项 new</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/1892461251104141312.htm"
title="Playwright 入门介绍和使用指南" target="_blank">Playwright 入门介绍和使用指南</a>
<span class="text-muted">IT鱼多多</span>
<a class="tag" taget="_blank" href="/search/Python%E5%9F%BA%E7%A1%80/1.htm">Python基础</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python%E6%8E%A5%E5%8F%A3%E6%B5%8B%E8%AF%95%E6%A1%86%E6%9E%B6/1.htm">Python接口测试框架</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><a class="tag" taget="_blank" href="/search/Playwright/1.htm">Playwright</a>
<div>Playwright入门介绍,Playwright使用指南请参考另一篇博客此博客为Playwright官网：译文希望让读者可以快速了解Playwriht可以用来做什么，怎么用。有些专业名词可能翻译不准确哈文章目录1.入门1.1Installation安装1.1.1AddExampleTest添加示例测试1.1.2RunningtheExampleTest运行示例测试1.2WritingTests编</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/1892440716534149120.htm"
title="大模型（含deepseek r1）本地部署利器ollama的API操作指南" target="_blank">大模型（含deepseek r1）本地部署利器ollama的API操作指南</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BDllm/1.htm">人工智能llm</a>
<div>ollama介绍：Ollama是一个开源的大型语言模型（LLM）平台，旨在让用户能够轻松地在本地运行、管理和与大型语言模型进行交互。它支持多种预训练的大型语言模型（如LLaMA2、Mistral、Gemma、DeepSeek等），并提供了一个简单高效的方式来加载和使用这些模型。出现Error:somethingwentwrong,pleaseseetheollamaserverlogsfordet</div>
</li>
<li><a href="/article/1892440428083474432.htm"
title="吐血整理Java集合框架，免费送" target="_blank">吐血整理Java集合框架，免费送</a>
<span class="text-muted">聪明马的博客</span>
<a class="tag" taget="_blank" href="/search/Java/1.htm">Java</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%E7%BB%93%E6%9E%84/1.htm">数据结构</a>
<div>Java集合框架（JavaCollectionsFramework）是Java标准库中的一个重要部分。它为Java开发人员提供了一组常用的数据结构，如列表、集合、映射等，使其更容易地处理数据。在这篇博客中，我将详细介绍Java集合框架，包括它的主要特点、常用的集合类型以及如何使用它们来解决实际问题。一、Java集合框架的主要特点Java集合框架的主要特点是：统一的接口。Java集合框架提供了一组统</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/1892436168910368768.htm"
title="chatgpt4.0账号购买指南：畅享体验更加丝滑的GPT 4.0/4o" target="_blank">chatgpt4.0账号购买指南：畅享体验更加丝滑的GPT 4.0/4o</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</a>
<div>解锁4.0的宇宙，开启无限可能！快来体验4.0的超能力，感受未来科技的魅力！✨以下是五大理由，让你立刻爱上它：1️⃣语言理解力MAX！ChatGPT4.0不仅仅是升级，更是进化！相比之前的版本，它拥有更强大的语言理解和生成能力，能够像一位真正的专家一样理解你的复杂问题，并提供更相关、更深入、更令人信服的答案。告别答非所问的尴尬，迎接精准高效的沟通！2️⃣多模态支持，玩转图文交互！️ChatGPT4</div>
</li>
<li><a href="/article/1892433236244623360.htm"
title="全面解析 Enterprise Architect（EA）活动图的工具集：从元素到关系的详尽指南" target="_blank">全面解析 Enterprise Architect（EA）活动图的工具集：从元素到关系的详尽指南</a>
<span class="text-muted">泡沫o0</span>
<a class="tag" taget="_blank" href="/search/C%2FC%2B%2B/1.htm">C/C++</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B8%96%E7%95%8C%3A/1.htm">编程世界:</a><a class="tag" taget="_blank" href="/search/%E6%8E%A2%E7%B4%A2C%2FC%2B%2B%E7%9A%84%E5%A5%A5%E5%A6%99/1.htm">探索C/C++的奥妙</a><a class="tag" taget="_blank" href="/search/c%2B%2B20/1.htm">c++20</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/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/uml/1.htm">uml</a><a class="tag" taget="_blank" href="/search/arm/1.htm">arm</a>
<div>目录标题第一章:引言——理解活动图的重要性1.1什么是活动图？1.1.1活动图的组成元素1.1.2活动图的应用场景1.2为什么选择EA作为建模工具？1.2.1EA的强大功能1.2.2EA与其他建模工具的对比第二章:活动图中的核心元素2.1活动类元素2.1.1Activity（活动）示例：2.1.2Action（动作）示例：2.1.3Partition（泳道）示例：2.1.4Send（发送）与Rec</div>
</li>
<li><a href="/article/1892430369425256448.htm"
title="国内如何使用Claude 3.5/4.0？只有这3种方法！最后一种适合新手！" target="_blank">国内如何使用Claude 3.5/4.0？只有这3种方法！最后一种适合新手！</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/claude/1.htm">claude</a>
<div>绕过限制，畅享Claude3.5/4.0：国内用户使用指南最近，很多小伙伴都想体验Claude的魅力，感受AI的强大。然而，由于Anthropic对Claude，特别是Claude3.5/4.0的访问限制，以及对新用户注册的严格把控️，国内用户想要顺畅使用真的不容易啊！别担心！本文将化身你的锦囊妙计，详细介绍几种在国内使用Claude3.5/4.0的策略，并提供全面的操作指南和注意事项，让你轻松玩</div>
</li>
<li><a href="/article/1892427427007754240.htm"
title="PSINS工具箱函数介绍——ggnss（ggpsvars+gbdvars+gglovars）" target="_blank">PSINS工具箱函数介绍——ggnss（ggpsvars+gbdvars+gglovars）</a>
<span class="text-muted">MATLAB卡尔曼</span>
<a class="tag" taget="_blank" href="/search/PSINS%E5%87%BD%E6%95%B0/1.htm">PSINS函数</a><a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a><a class="tag" taget="_blank" href="/search/PSINS/1.htm">PSINS</a>
<div>文章目录关于工具箱工具箱概述学习路径指南GNSS参数初始化函数`ggnss`函数功能参数体系结构典型应用场景系统参数初始化操作指南执行流程运行结果解析函数源码深度解析代码架构扩展开发建议关于工具箱kfinit是kf的参数初始化函数，用于初始化滤波参数本文所述的代码需要基于PSINS工具箱，工具箱的讲解：PSINS初学指导：https://blog.csdn.net/callmeup/article</div>
</li>
<li><a href="/article/1892424024693207040.htm"
title="【k8s应用管理】kubernetes HPA+rancher" target="_blank">【k8s应用管理】kubernetes HPA+rancher</a>
<span class="text-muted">Karoku066</span>
<a class="tag" taget="_blank" href="/search/kubernetes/1.htm">kubernetes</a><a class="tag" taget="_blank" href="/search/rancher/1.htm">rancher</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a>
<div>文章目录KubernetesHPA部署指南概述部署metrics-server部署HPARancher管理Kubernetes集群指南实验环境安装及配置RancherKubernetesHPA部署指南概述KubernetesHPA（HorizontalPodAutoscaling）可以根据Pod的CPU利用率自动调整Deployment、ReplicationController或ReplicaS</div>
</li>
<li><a href="/article/1892421754261925888.htm"
title="2025年三个月自学手册 网络安全（黑客技术）" target="_blank">2025年三个月自学手册 网络安全（黑客技术）</a>
<span class="text-muted">网安kk</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%AE%89%E5%85%A8/1.htm">安全</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/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
<div>基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。如何成为一名黑客很多朋友在学习安全方面都会半路转行，因为不知如何去学，在这里，我将这个整份答案分为黑客（网络安全）入门必备、黑客（网络安全）职业指南、黑客（网络安全）学习导航</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/1892417211553869824.htm"
title="flutter pigeon gomobile 插件中使用go工具类" target="_blank">flutter pigeon gomobile 插件中使用go工具类</a>
<span class="text-muted">yujunlong3919</span>
<a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/swift/1.htm">swift</a><a class="tag" taget="_blank" href="/search/kotlin/1.htm">kotlin</a>
<div>文章目录为什么flutter要用go写工具类1.下载pigeon插件模版2.编写go代码3.生成greeting.aar，Greeting.xcframework4.ios5.android6.dart中使用为什么flutter要用go写工具类在Flutter应用中，有些场景涉及到大量的计算，比如复杂的加密算法、数据压缩/解压缩或者图形处理中的数学计算等1.下载pigeon插件模版base_plu</div>
</li>
<li><a href="/article/1892414564633473024.htm"
title="深入理解Spring Boot中的事件驱动架构" target="_blank">深入理解Spring Boot中的事件驱动架构</a>
<span class="text-muted">省赚客APP开发者@聚娃科技</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>深入理解SpringBoot中的事件驱动架构大家好，我是微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！1.引言事件驱动架构在现代软件开发中越来越受欢迎，它能够提高系统的松耦合性和可扩展性。SpringBoot作为一个流行的Java框架，提供了强大的事件驱动支持。本文将深入探讨SpringBoot中事件驱动架构的实现原理和最佳实践。2.SpringFramework中的事件模型在</div>
</li>
<li><a href="/article/4.htm"
title="java的(PO,VO,TO,BO,DAO,POJO)" target="_blank">java的(PO,VO,TO,BO,DAO,POJO)</a>
<span class="text-muted">Cb123456</span>
<a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/TO/1.htm">TO</a><a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a>
<div>转:
http://www.cnblogs.com/yxnchinahlj/archive/2012/02/24/2366110.html
-------------------------------------------------------------------
O/R Mapping 是 Object Relational Mapping（对象关系映</div>
</li>
<li><a href="/article/131.htm"
title="spring ioc原理（看完后大家可以自己写一个spring）" target="_blank">spring ioc原理（看完后大家可以自己写一个spring）</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
<div> 最近，买了本Spring入门书：spring In Action 。大致浏览了下感觉还不错。就是入门了点。Manning的书还是不错的，我虽然不像哪些只看Manning书的人那样专注于Manning,但怀着崇敬 的心情和激情通览了一遍。又一次接受了IOC 、DI、AOP等Spring核心概念。 先就IOC和DI谈一点我的看法。IO</div>
</li>
<li><a href="/article/258.htm"
title="MyEclipse 2014中Customize Persperctive设置无效的解决方法" target="_blank">MyEclipse 2014中Customize Persperctive设置无效的解决方法</a>
<span class="text-muted">Kai_Ge</span>
<a class="tag" taget="_blank" href="/search/MyEclipse2014/1.htm">MyEclipse2014</a>
<div>高高兴兴下载个MyEclipse2014，发现工具条上多了个手机开发的按钮，心生不爽就想弄掉他！
结果发现Customize Persperctive失效！！
有说更新下就好了，可是国内Myeclipse访问不了，何谈更新...
so~这里提供了更新后的一下jar包，给大家使用！
1、将9个jar复制到myeclipse安装目录\plugins中
2、删除和这9个jar同包名但是版本号较</div>
</li>
<li><a href="/article/385.htm"
title="SpringMvc上传" target="_blank">SpringMvc上传</a>
<span class="text-muted">120153216</span>
<a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a>
<div>
@RequestMapping(value = WebUrlConstant.UPLOADFILE)
@ResponseBody
public Map<String, Object> uploadFile(HttpServletRequest request,HttpServletResponse httpresponse) {
try {
// </div>
</li>
<li><a href="/article/512.htm"
title="Javascript----HTML DOM 事件" target="_blank">Javascript----HTML DOM 事件</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a>
<div>HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。
事件通常与函数结合使用，函数不会在事件发生前被执行！
注：DOM： 指明使用的 DOM 属性级别。
1.鼠标事件
属性  </div>
</li>
<li><a href="/article/639.htm"
title="动态绑定和删除onclick事件" target="_blank">动态绑定和删除onclick事件</a>
<span class="text-muted">357029540</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
<div>因为对JQUERY和JS的动态绑定事件的不熟悉，今天花了好久的时间才把动态绑定和删除onclick事件搞定!现在分享下我的过程。
在我的查询页面，我将我的onclick事件绑定到了tr标签上同时传入当前行(this值)参数，这样可以在点击行上的任意地方时可以选中checkbox，但是在我的某一列上也有一个onclick事件是用于下载附件的，当</div>
</li>
<li><a href="/article/766.htm"
title="HttpClient|HttpClient请求详解" target="_blank">HttpClient|HttpClient请求详解</a>
<span class="text-muted">7454103</span>
<a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</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%E5%BA%94%E7%94%A8/1.htm">网络应用</a><a class="tag" taget="_blank" href="/search/Security/1.htm">Security</a>
<div>HttpClient 是 Apache Jakarta Common 下的子项目，可以用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包，并且它支持 HTTP 协议最新的版本和建议。本文首先介绍 HTTPClient，然后根据作者实际工作经验给出了一些常见问题的解决方法。HTTP 协议可能是现在 Internet 上使用得最多、最重要的协议了，越来越多的 Java 应用程序需</div>
</li>
<li><a href="/article/893.htm"
title="递归 逐层统计树形结构数据" target="_blank">递归 逐层统计树形结构数据</a>
<span class="text-muted">darkranger</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a>
<div>将集合递归获取树形结构:
/**
*
* 递归获取数据
* @param alist:所有分类
* @param subjname:对应统计的项目名称
* @param pk:对应项目主键
* @param reportList: 最后统计的结果集
* @param count:项目级别
*/
public void getReportVO(Arr</div>
</li>
<li><a href="/article/1020.htm"
title="访问WEB-INF下使用frameset标签页面出错的原因" target="_blank">访问WEB-INF下使用frameset标签页面出错的原因</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a>
<div><frameset rows="61,*,24" cols="*" framespacing="0" frameborder="no" border="0"> </div>
</li>
<li><a href="/article/1147.htm"
title="MAVEN常用命令" target="_blank">MAVEN常用命令</a>
<span class="text-muted">avords</span>
<div>Maven库：
http://repo2.maven.org/maven2/
Maven依赖查询：
http://mvnrepository.com/
Maven常用命令： 1. 创建Maven的普通java项目： mvn archetype:create -DgroupId=packageName </div>
</li>
<li><a href="/article/1274.htm"
title="PHP如果自带一个小型的web服务器就好了" target="_blank">PHP如果自带一个小型的web服务器就好了</a>
<span class="text-muted">houxinyou</span>
<a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a>
<div>最近单位用PHP做网站，感觉PHP挺好的，不过有一些地方不太习惯，比如，环境搭建。PHP本身就是一个网站后台脚本，但用PHP做程序时还要下载apache，配置起来也不太很方便，虽然有好多配置好的apache+php+mysq的环境，但用起来总是心里不太舒服，因为我要的只是一个开发环境，如果是真实的运行环境，下个apahe也无所谓，但只是一个开发环境，总有一种杀鸡用牛刀的感觉。如果php自己的程序中</div>
</li>
<li><a href="/article/1401.htm"
title="NoSQL数据库之Redis数据库管理(list类型)" target="_blank">NoSQL数据库之Redis数据库管理(list类型)</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/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a>
<div>3.list类型及操作
List是一个链表结构，主要功能是push、pop、获取一个范围的所有值等等，操作key理解为链表的名字。Redis的list类型其实就是一个每个子元素都是string类型的双向链表。我们可以通过push、pop操作从链表的头部或者尾部添加删除元素，这样list既可以作为栈，又可以作为队列。
&nbs</div>
</li>
<li><a href="/article/1528.htm"
title="谁在用Hadoop？" target="_blank">谁在用Hadoop？</a>
<span class="text-muted">bingyingao</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a><a class="tag" taget="_blank" href="/search/%E5%85%AC%E5%8F%B8/1.htm">公司</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF/1.htm">应用场景</a>
<div>Hadoop技术的应用已经十分广泛了，而我是最近才开始对它有所了解，它在大数据领域的出色表现也让我产生了兴趣。浏览了他的官网，其中有一个页面专门介绍目前世界上有哪些公司在用Hadoop，这些公司涵盖各行各业，不乏一些大公司如alibaba,ebay,amazon,google,facebook,adobe等，主要用于日志分析、数据挖掘、机器学习、构建索引、业务报表等场景,这更加激发了学习它的热情。</div>
</li>
<li><a href="/article/1655.htm"
title="【Spark七十六】Spark计算结果存到MySQL" target="_blank">【Spark七十六】Spark计算结果存到MySQL</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>package spark.examples.db
import java.sql.{PreparedStatement, Connection, DriverManager}
import com.mysql.jdbc.Driver
import org.apache.spark.{SparkContext, SparkConf}
object SparkMySQLInteg</div>
</li>
<li><a href="/article/1782.htm"
title="Scala: JVM上的函数编程" target="_blank">Scala: JVM上的函数编程</a>
<span class="text-muted">bookjovi</span>
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a><a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a><a class="tag" taget="_blank" href="/search/haskell/1.htm">haskell</a>
<div> 说Scala是JVM上的函数编程一点也不为过，Scala把面向对象和函数型编程这两种主流编程范式结合了起来，对于熟悉各种编程范式的人而言Scala并没有带来太多革新的编程思想，scala主要的有点在于Java庞大的package优势，这样也就弥补了JVM平台上函数型编程的缺失，MS家.net上已经有了F#，JVM怎么能不跟上呢？
对本人而言</div>
</li>
<li><a href="/article/1909.htm"
title="jar打成exe" target="_blank">jar打成exe</a>
<span class="text-muted">bro_feng</span>
<a class="tag" taget="_blank" href="/search/java+jar+exe/1.htm">java jar exe</a>
<div>今天要把jar包打成exe，jsmooth和exe4j都用了。
遇见几个问题。记录一下。
两个软件都很好使，网上都有图片教程，都挺不错。
首先肯定是要用自己的jre的，不然不能通用，其次别忘了把需要的lib放到classPath中。
困扰我很久的一个问题是，我自己打包成功后，在一个同事的没有装jdk的电脑上运行，就是不行，报错jvm.dll为无效的windows映像，如截图
最后发现</div>
</li>
<li><a href="/article/2036.htm"
title="读《研磨设计模式》-代码笔记-策略模式-Strategy" target="_blank">读《研磨设计模式》-代码笔记-策略模式-Strategy</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/
/*
策略模式定义了一系列的算法，并将每一个算法封装起来，而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化
简单理解：
1、将不同的策略提炼出一个共同接口。这是容易的，因为不同的策略，只是算法不同，需要传递的参数</div>
</li>
<li><a href="/article/2163.htm"
title="cmd命令值cvfM命令" target="_blank">cmd命令值cvfM命令</a>
<span class="text-muted">chenyu19891124</span>
<a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a>
<div> cmd命令还真是强大啊。今天发现jar -cvfM aa.rar @aaalist 就这行命令可以根据aaalist取出相应的文件
例如：
在d：\workspace\prpall\test.java 有这样一个文件，现在想要将这个文件打成一个包。运行如下命令即可比如在d：\wor</div>
</li>
<li><a href="/article/2290.htm"
title="OpenJWeb(1.8) Java Web应用快速开发平台" target="_blank">OpenJWeb(1.8) Java Web应用快速开发平台</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</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/%E4%BC%81%E4%B8%9A%E5%BA%94%E7%94%A8/1.htm">企业应用</a>
<div>
OpenJWeb(1.8) Java Web应用快速开发平台的作者是我们技术联盟的成员，他最近推出了新版本的快速应用开发平台 OpenJWeb(1.8)，我帮他做做宣传
OpenJWeb快速开发平台以快速开发为核心，整合先进的java 开源框架，本着自主开发+应用集成相结合的原则，旨在为政府、企事业单位、软件公司等平台用户提供一个架构透</div>
</li>
<li><a href="/article/2417.htm"
title="Python 报错：IndentationError: unexpected indent" target="_blank">Python 报错：IndentationError: unexpected indent</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/tab/1.htm">tab</a><a class="tag" taget="_blank" href="/search/%E7%A9%BA%E6%A0%BC/1.htm">空格</a><a class="tag" taget="_blank" href="/search/%E7%BC%A9%E8%BF%9B/1.htm">缩进</a>
<div> IndentationError: unexpected indent 是缩进的问题，也有可能是tab和空格混用啦
Python开发者有意让违反了缩进规则的程序不能通过编译，以此来强制程序员养成良好的编程习惯。并且在Python语言里，缩进而非花括号或者某种关键字，被用于表示语句块的开始和退出。增加缩进表示语句块的开</div>
</li>
<li><a href="/article/2544.htm"
title="HttpClient 超时设置" target="_blank">HttpClient 超时设置</a>
<span class="text-muted">dongwei_6688</span>
<a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a>
<div>HttpClient中的超时设置包含两个部分：
1. 建立连接超时，是指在httpclient客户端和服务器端建立连接过程中允许的最大等待时间
2. 读取数据超时，是指在建立连接后，等待读取服务器端的响应数据时允许的最大等待时间
在HttpClient 4.x中如下设置：
HttpClient httpclient = new DefaultHttpC</div>
</li>
<li><a href="/article/2671.htm"
title="小鱼与波浪" target="_blank">小鱼与波浪</a>
<span class="text-muted">dcj3sjt126com</span>
<div>一条小鱼游出水面看蓝天，偶然间遇到了波浪。 小鱼便与波浪在海面上游戏，随着波浪上下起伏、汹涌前进。 小鱼在波浪里兴奋得大叫：“你每天都过着这么刺激的生活吗？简直太棒了。” 波浪说：“岂只每天过这样的生活，几乎每一刻都这么刺激！还有更刺激的，要有潮汐变化，或者狂风暴雨，那才是兴奋得心脏都会跳出来。” 小鱼说：“真希望我也能变成一个波浪，每天随着风雨、潮汐流动，不知道有多么好！” 很快，小鱼</div>
</li>
<li><a href="/article/2798.htm"
title="Error Code: 1175 You are using safe update mode and you tried to update a table" target="_blank">Error Code: 1175 You are using safe update mode and you tried to update a table</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>
快速高效用：SET SQL_SAFE_UPDATES = 0；下面的就不要看了！
今日用MySQL Workbench进行数据库的管理更新时，执行一个更新的语句碰到以下错误提示：
Error Code: 1175
You are using safe update mode and you tried to update a table without a WHERE that </div>
</li>
<li><a href="/article/2925.htm"
title="枚举类型详细介绍及方法定义" target="_blank">枚举类型详细介绍及方法定义</a>
<span class="text-muted">gaomysion</span>
<a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/javaee/1.htm">javaee</a>
<div>转发
http://developer.51cto.com/art/201107/275031.htm
枚举其实就是一种类型，跟int, char 这种差不多，就是定义变量时限制输入的，你只能够赋enum里面规定的值。建议大家可以看看，这两篇文章，《java枚举类型入门》和《C++的中的结构体和枚举》，供大家参考。
枚举类型是JDK5.0的新特征。Sun引进了一个全新的关键字enum</div>
</li>
<li><a href="/article/3052.htm"
title="Merge Sorted Array" target="_blank">Merge Sorted Array</a>
<span class="text-muted">hcx2013</span>
<a class="tag" taget="_blank" href="/search/array/1.htm">array</a>
<div>Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array.
Note:You may assume that nums1 has enough space (size that is</div>
</li>
<li><a href="/article/3179.htm"
title="Expression Language 3.0新特性" target="_blank">Expression Language 3.0新特性</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/el+3.0/1.htm">el 3.0</a>
<div>Expression Language 3.0表达式语言规范最终版从2013-4-29发布到现在已经非常久的时间了；目前如Tomcat 8、Jetty 9、GlasshFish 4已经支持EL 3.0。新特性包括：如字符串拼接操作符、赋值、分号操作符、对象方法调用、Lambda表达式、静态字段/方法调用、构造器调用、Java8集合操作。目前Glassfish 4/Jetty实现最好，对大多数新特性</div>
</li>
<li><a href="/article/3306.htm"
title="超越算法来看待个性化推荐" target="_blank">超越算法来看待个性化推荐</a>
<span class="text-muted">liyonghui160com</span>
<a class="tag" taget="_blank" href="/search/%E8%B6%85%E8%B6%8A%E7%AE%97%E6%B3%95%E6%9D%A5%E7%9C%8B%E5%BE%85%E4%B8%AA%E6%80%A7%E5%8C%96%E6%8E%A8%E8%8D%90/1.htm">超越算法来看待个性化推荐</a>
<div>
一提到个性化推荐，大家一般会想到协同过滤、文本相似等推荐算法，或是更高阶的模型推荐算法，百度的张栋说过，推荐40%取决于UI、30%取决于数据、20%取决于背景知识，虽然本人不是很认同这种比例，但推荐系统中，推荐算法起的作用起的作用是非常有限的。
就像任何</div>
</li>
<li><a href="/article/3433.htm"
title="写给Javascript初学者的小小建议" target="_blank">写给Javascript初学者的小小建议</a>
<span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div> 一般初学JavaScript的时候最头痛的就是浏览器兼容问题。在Firefox下面好好的代码放到IE就不能显示了，又或者是在IE能正常显示的代码在firefox又报错了。 如果你正初学JavaScript并有着一样的处境的话建议你：初学JavaScript的时候无视DOM和BOM的兼容性，将更多的时间花在 了解语言本身（ECMAScript）。只在特定浏览器编写代码（Chrome/Fi</div>
</li>
<li><a href="/article/3560.htm"
title="Java 枚举" target="_blank">Java 枚举</a>
<span class="text-muted">ShihLei</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a>
<div>注：文章内容大量借鉴使用网上的资料，可惜没有记录参考地址，只能再传对作者说声抱歉并表示感谢！
一 基础 1）语法
枚举类型只能有私有构造器（这样做可以保证客户代码没有办法新建一个enum的实例）
枚举实例必须最先定义
2）特性
&nb</div>
</li>
<li><a href="/article/3687.htm"
title="Java SE 6 HotSpot虚拟机的垃圾回收机制" target="_blank">Java SE 6 HotSpot虚拟机的垃圾回收机制</a>
<span class="text-muted">uuhorse</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a><a class="tag" taget="_blank" href="/search/GC/1.htm">GC</a><a class="tag" taget="_blank" href="/search/%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6/1.htm">垃圾回收</a><a class="tag" taget="_blank" href="/search/VM/1.htm">VM</a>
<div>官方资料，关于Java SE 6 HotSpot虚拟机的garbage Collection，非常全，英文。
http://www.oracle.com/technetwork/java/javase/gc-tuning-6-140523.html
Java SE 6 HotSpot[tm] Virtual Machine Garbage Collection Tuning
&</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>
[url]http://www.cnblogs.com/fdszlzl/archive/2009/06/10/1500361.html[/url]
Blueprint CSS Framework 指南
CSS 框架二月二十一日升级到 0.7.1 版本了。经过这么长时间的这几次版本升级，终于把按功能不同 CSS 规则在不同的 CSS 文件中的模式改为单一文件的模式了，所以感觉 Blueprint CSS 框架现在是一个可以用到实际项目中的 CSS 框架了。
这个 CSS 框架将 html 标签设定为如下情况：
统一重置了 43 个 html 标签（html 4.0 标签一共 91 个）的属性，（html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td）。
重置 html 标签的默认样式为：内外填充边框都为零，字体粗细、字体科族和字体样式继承，字体大小百分之百（在中文情况下使用这个还是改固定象素的好），高度以基线对齐；
设定 body 内的行高为 1.5 倍；字体大小百分之七十五（在中文情况下使用这个还是改固定象素的好）；字体颜色为 #222222 （接近于黑色）
设定 table 的边界间距为有间距、间距为零。（用有间距而间距为零的方式，估计只有这样才能将表格的边界间距设的看不到）；下外填充 1.4em ，宽度 100%；
设定 caption, th, td 内的元素居左，字体粗细为普通；caption 的背景色为 #EEEEEE （特浅的灰），th 背景为 #C3D9FF （浅蓝色）内的字体为粗体，th, td 的内填充为 上4px 右10px 下4px 左5px；
设定 table, td, th 内的元素高度居中；
设表格如果需要隔行换色的效果或者某行需要不一样的颜色，那么已经给定了 tr.even td 类，背景颜色为 #E5ECF9 （浅浅的蓝）
设定 tfood 为斜体字
设定 blockquote, q 元素之前和之后的填充内容为空，引用符号也为空；blockquote 的外填充为 1.5em 字体颜色 #666666 （深灰色），斜体字（中文斜体表现并不好，这个改了斜体不要而用背景色或者字体小一号来表示应该会好点）
设定链接下的图片的 border 为零；
设定 h1 至 h6 不同的字体大小粗细外填充，颜色为 #111111 （更接近于黑）
设定 h1 至 h6 下的图片的外填充为零
设定行内图片元素默认左漂浮，同时给出了一个 p img.right 的类，以备你需要图片右漂浮的时候来用（不过很多时候我们需要的是图片不漂浮，这个需要改或者单独建立一个类了）；
设定链接的颜色为 #000099 （深蓝色）带下划线，鼠标滑过和焦点状态颜色为黑色；
设定 abbr 和 acronym 下边缘为一象素点线的边框；
设定 del 删除字的颜色为 #666666 （中等灰度的灰）；
设定 pre 和 code 内地文字显示为 white-space:pre （就是不换行啦，现在