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/1950233072825856000.htm"
title="三菱PLC全套学习资料及应用手册" target="_blank">三菱PLC全套学习资料及应用手册</a>
<span class="text-muted">good2know</span>
<div>本文还有配套的精品资源，点击获取简介：三菱PLC作为工业自动化领域的核心设备，其系列产品的学习和应用需要全面深入的知识。本次资料包为学习者提供从基础到进阶的全方位学习资源，包括各种型号PLC的操作手册、编程指南、软件操作教程以及实际案例分析，旨在帮助用户系统掌握PLC的编程语言、指令系统及在各类工业应用中的实施。1.三菱PLC基础知识入门1.1PLC的基本概念可编程逻辑控制器（PLC）是工业自动化</div>
</li>
<li><a href="/article/1950232820773351424.htm"
title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a>
<span class="text-muted">good2know</span>
<div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div>
</li>
<li><a href="/article/1950228285266915328.htm"
title="Git 与 GitHub 的对比与使用指南" target="_blank">Git 与 GitHub 的对比与使用指南</a>
<span class="text-muted">一念&</span>
<a class="tag" taget="_blank" href="/search/%E5%85%B6%E5%AE%83/1.htm">其它</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a>
<div>Git与GitHub的对比与使用指南在软件开发中，Git和GitHub是两个密切相关但本质不同的工具。下面我将逐步解释它们的定义、区别、核心概念以及如何协同使用，确保内容真实可靠，基于广泛的技术实践。1.什么是Git？Git是一个分布式版本控制系统，由LinusTorvalds于2005年创建。它的核心功能是跟踪代码文件的变化，帮助开发者管理项目历史记录、协作和回滚错误。Git是开源的，可以在本地</div>
</li>
<li><a href="/article/1950226041851146240.htm"
title="《实际生活是我们的指南针》——教育中寻找曙光" target="_blank">《实际生活是我们的指南针》——教育中寻找曙光</a>
<span class="text-muted">托克托126何芳</span>
<div>陶行知先生的文章相对《致青年教师》比较难理解，但是他热爱学生,在书中处处能感受到。在《实际生活是我们的指南针》文中他说道:“我虽觉得我有好多地方可以帮助诸位,但指志针确是有些不敢当。我和诸位同是在乡村里摸路的人。我们的真正指南针只是实际生活。”这些话不仅使人感到他非常谦虛,既不夸大自己的作用也不轻视自己的作用。图片发自App我们的真正指南针只是实际生活。实际生活向我们供给无穷的问题,要求不断的解决</div>
</li>
<li><a href="/article/1950214964396486656.htm"
title="js操作样式" target="_blank">js操作样式</a>
<span class="text-muted">郝加升</span>
<div>DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge</div>
</li>
<li><a href="/article/1950207853105049600.htm"
title="【Coze搞钱实战】3. 避坑指南：对话流设计中的6个致命错误（真实案例）" target="_blank">【Coze搞钱实战】3. 避坑指南：对话流设计中的6个致命错误（真实案例）</a>
<span class="text-muted">AI_DL_CODE</span>
<a class="tag" taget="_blank" href="/search/Coze%E5%B9%B3%E5%8F%B0/1.htm">Coze平台</a><a class="tag" taget="_blank" href="/search/%E5%AF%B9%E8%AF%9D%E6%B5%81%E8%AE%BE%E8%AE%A1/1.htm">对话流设计</a><a class="tag" taget="_blank" href="/search/%E5%AE%A2%E6%9C%8DBot%E9%81%BF%E5%9D%91/1.htm">客服Bot避坑</a><a class="tag" taget="_blank" href="/search/%E7%94%A8%E6%88%B7%E6%B5%81%E5%A4%B1/1.htm">用户流失</a><a class="tag" taget="_blank" href="/search/%E5%B0%81%E5%8F%B7%E9%A3%8E%E9%99%A9/1.htm">封号风险</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%AE%A2%E6%9C%8D%E9%85%8D%E7%BD%AE/1.htm">智能客服配置</a><a class="tag" taget="_blank" href="/search/%E6%95%85%E9%9A%9C%E4%BF%AE%E5%A4%8D%E6%8C%87%E5%8D%97/1.htm">故障修复指南</a>
<div>摘要：对话流设计是智能客服Bot能否落地的核心环节，直接影响用户体验与业务安全。本文基于50+企业Bot部署故障分析，聚焦导致用户流失、投诉甚至封号的6大致命错误：无限循环追问、人工移交超时、敏感词过滤缺失、知识库冲突、未处理否定意图、跨平台适配失败。通过真实案例拆解每个错误的表现形式、技术根因及工业级解决方案，提供可直接复用的Coze配置代码、工作流模板和检测工具。文中包含对话流健康度检测工具使</div>
</li>
<li><a href="/article/1950202054219722752.htm"
title="Pandas：数据科学的超级瑞士军刀" target="_blank">Pandas：数据科学的超级瑞士军刀</a>
<span class="text-muted">科技林总</span>
<a class="tag" taget="_blank" href="/search/DeepSeek%E5%AD%A6AI/1.htm">DeepSeek学AI</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
<div>**——从零基础到高效分析的进化指南**###**一、Pandas诞生：数据革命的救世主****2010年前的数据分析噩梦**：```python#传统Python处理表格数据data=[]forrowincsv_file:ifrow[3]>100androw[2]=="China":data.append(float(row[5])#代码冗长易错！```**核心痛点**：-Excel处理百万行崩</div>
</li>
<li><a href="/article/1950201171369062400.htm"
title="Zread.AI：一键将GitHub项目转化为结构化中文手册的AI代码维基工具" target="_blank">Zread.AI：一键将GitHub项目转化为结构化中文手册的AI代码维基工具</a>
<span class="text-muted"></span>
<div>Zread.AI：一键将GitHub项目转化为结构化中文手册的AI代码维基工具文章来源：PoixeAI文章目录Zread.AI工具概述核心功能优势亮点典型应用场景上手指南注意事项官网地址Zread.AI由智谱Z.ai推出，是一款面向开发者的AI代码维基工具，可在几秒内把任何公开GitHub仓库转化为结构化中文手册，并通过独家Buzz面板聚合commits、issues与相关新闻，让项目脉搏一目了然</div>
</li>
<li><a href="/article/1950199910724857856.htm"
title="机器学习必备数学与编程指南：从入门到精通" target="_blank">机器学习必备数学与编程指南：从入门到精通</a>
<span class="text-muted">a小胡哦</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%9F%BA%E7%A1%80/1.htm">机器学习基础</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%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>一、机器学习核心数学基础1.线性代数（神经网络的基础）必须掌握：矩阵运算（乘法、转置、逆）向量空间与线性变换特征值分解与奇异值分解(SVD)为什么重要：神经网络本质就是矩阵运算学习技巧：用NumPy实际操作矩阵运算2.概率与统计（模型评估的关键）核心概念：条件概率与贝叶斯定理概率分布（正态、泊松、伯努利）假设检验与p值应用场景：朴素贝叶斯、A/B测试3.微积分（优化算法的基础）重点掌握：导数与偏导</div>
</li>
<li><a href="/article/1950199278483861504.htm"
title="Android 媒体播放开发完全指南" target="_blank">Android 媒体播放开发完全指南</a>
<span class="text-muted">安卓开发者</span>
<a class="tag" taget="_blank" href="/search/Android/1.htm">Android</a><a class="tag" taget="_blank" href="/search/Jetpack/1.htm">Jetpack</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%AA%92%E4%BD%93/1.htm">媒体</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>引言在当今移动应用生态中，媒体播放功能已成为许多应用的核心组成部分。无论是音乐流媒体应用、视频平台、播客客户端还是游戏应用，都需要强大的媒体播放能力。Android平台提供了丰富的API来支持各种媒体播放场景。本文将全面介绍Android媒体播放的开发技术，从基础到高级功能实现。一、Android媒体播放基础1.1支持的媒体格式Android原生支持多种媒体格式：音频：MP3、AAC、FLAC、W</div>
</li>
<li><a href="/article/1950194868303228928.htm"
title="免费编程课程大汇总：从入门到精通的一站式资源" target="_blank">免费编程课程大汇总：从入门到精通的一站式资源</a>
<span class="text-muted">大力出奇迹985</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/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a>
<div>在数字化时代，编程已成为一项至关重要的技能，无论是为了职业发展还是个人兴趣，学习编程都极具价值。本文精心汇总了丰富的免费编程课程资源，涵盖从基础入门到精通的各个阶段。通过全面介绍如Coursera、edX等在线学习平台，Codecademy、freeCodeCamp等交互式学习网站，以及B站、网易云课堂等视频课程平台的免费课程，为编程学习者提供了一站式的资源指南，帮助读者轻松开启编程学习之旅，逐步</div>
</li>
<li><a href="/article/1950194742100815872.htm"
title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a>
<span class="text-muted"></span>
<div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div>
</li>
<li><a href="/article/1950193605276659712.htm"
title="Flutter权限插件详解：permission_handler使用指南" target="_blank">Flutter权限插件详解：permission_handler使用指南</a>
<span class="text-muted">AI移动开发前沿</span>
<a class="tag" taget="_blank" href="/search/AI%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AE%9D%E5%85%B8/1.htm">AI移动端开发宝典</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>Flutter权限插件详解：permission_handler使用指南关键词：Flutter、权限插件、permission_handler、权限管理、移动开发摘要：本文围绕Flutter开发中常用的权限插件permission_handler展开详细介绍。首先阐述了在Flutter应用开发中处理权限的背景和重要性，接着深入解析permission_handler的核心概念、架构以及工作原理，通</div>
</li>
<li><a href="/article/1950191165710069760.htm"
title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a>
<span class="text-muted">浪子神剑</span>
<div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div>
</li>
<li><a href="/article/1950180118609588224.htm"
title="HikariCP调试日志深度解析：生产环境故障排查完全指南" target="_blank">HikariCP调试日志深度解析：生产环境故障排查完全指南</a>
<span class="text-muted"></span>
<div>HikariCP调试日志深度解析：生产环境故障排查完全指南更新时间：2025年7月4日|作者：资深架构师|适用版本：HikariCP5.x+|难度等级：中高级前言在生产环境中，数据库连接池往往是系统性能的关键瓶颈。HikariCP作为当前最流行的Java连接池，其调试日志包含了丰富的运行时信息，能够帮助我们快速定位和解决各种连接池相关问题。本文将深入解析HikariCP的日志体系，提供一套完整的故</div>
</li>
<li><a href="/article/1950178477592342528.htm"
title="前端数据库：IndexedDB从基础到高级使用指南" target="_blank">前端数据库：IndexedDB从基础到高级使用指南</a>
<span class="text-muted"></span>
<div>文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.</div>
</li>
<li><a href="/article/1950170156898512896.htm"
title="登录功能详解" target="_blank">登录功能详解</a>
<span class="text-muted">开往1982</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%99%BB%E5%BD%95/1.htm">登录</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a>
<div>本项目由maven项目改造springboot项目导入依赖org.springframework.bootspring-boot-starter-parent2.7.6org.springframework.bootspring-boot-starter-web2.7.6org.springframework.bootspring-boot-starter-test2.7.5org.springf</div>
</li>
<li><a href="/article/1950169525244719104.htm"
title="从零到一：基于差分隐私决策树的客户购买预测系统实战开发" target="_blank">从零到一：基于差分隐私决策树的客户购买预测系统实战开发</a>
<span class="text-muted">笙囧同学</span>
<a class="tag" taget="_blank" href="/search/%E5%86%B3%E7%AD%96%E6%A0%91/1.htm">决策树</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%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a>
<div>作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：3251736703@qq.com各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯文章导航快速导航前言-项目背景与价值项目概览-系统架构与功能技术深度解析-核心算法原理️系统实现详解-工程实践细节性能评估与分析-实验结果分析Web系统开发-前后端开发部署与运维-DevOps实践完整复现指南-手把手教程️实践案例与故障排除-问</div>
</li>
<li><a href="/article/1950169523193704448.htm"
title="Claude Code 超详细完整指南（2025最新版）" target="_blank">Claude Code 超详细完整指南（2025最新版）</a>
<span class="text-muted">笙囧同学</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>终端AI编程助手|高频使用点+生态工具+完整命令参考+最新MCP配置目录快速开始（5分钟上手）详细安装指南系统要求Windows安装（WSL方案）macOS安装Linux安装安装验证配置与认证首次认证环境变量配置代理配置⚡基础命令详解启动命令会话管理文件操作Think模式完全指南MCP服务器配置详解MCP基础概念添加MCP服务器10个必备MCP服务器MCP故障排除记忆系统详解高级使用技巧成本控制策</div>
</li>
<li><a href="/article/1950163724190937088.htm"
title="Spring Boot 2整合Druid的两种方式" target="_blank">Spring Boot 2整合Druid的两种方式</a>
<span class="text-muted">玩代码</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/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Druid/1.htm">Druid</a>
<div>一、自定义整合Druid（非Starter方式）适用于需要完全手动控制配置的场景添加依赖（pom.xml）com.alibabadruid1.2.8org.springframework.bootspring-boot-starter-jdbc创建配置类@ConfigurationpublicclassDruidConfig{@Bean@ConfigurationProperties(prefix</div>
</li>
<li><a href="/article/1950156037063503872.htm"
title="亚马逊广告进阶指南：广告转化的深层逻辑" target="_blank">亚马逊广告进阶指南：广告转化的深层逻辑</a>
<span class="text-muted">2501_92052613</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
<div>”为什么广告点击量很高但转化率始终上不去？“”如何在不增加预算的情况下降低ACOS？“”自动广告和手动广告到底哪种更适合新品？“”明明出价很高为什么广告排名还是上不去？“”广告数据每天波动很大，怎样才能科学分析？“这些问题看似独立，实则都指向一个核心——亚马逊广告的转化逻辑。作为从业多年的广告优化师，我想通过这篇文章，带大家深层次揭秘亚马逊广告的转化机制，并分享我们团队是如何通过科学方法实现ACO</div>
</li>
<li><a href="/article/1950149434314649600.htm"
title="每天的读书任务" target="_blank">每天的读书任务</a>
<span class="text-muted">梓说心情</span>
<div>2017年完成的2件大事，5月和11月分别完成了心理咨询师3级和2级的考试，并顺利过关拿到了证书，初步完成了一个梦想，也是有证书的人了。辛楠在学校里今天下午没课，去图书馆看书了，虽然是一些类似于读者、生活指南的杂志，相比以前也是一种进步。今天的人格心理学读书任务完成了。图片发自App</div>
</li>
<li><a href="/article/1950149229095743488.htm"
title="推客小程序系统开发全解析：从概念到落地的完整指南" target="_blank">推客小程序系统开发全解析：从概念到落地的完整指南</a>
<span class="text-muted">ywyy6798</span>
<a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E7%B3%BB%E7%BB%9F/1.htm">推客系统</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91/1.htm">推客系统开发</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">推客小程序</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91/1.htm">推客小程序系统开发</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E5%88%86%E9%94%80/1.htm">推客分销</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E5%88%86%E9%94%80%E7%B3%BB%E7%BB%9F/1.htm">推客分销系统</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2/1.htm">推客</a>
<div>一、推客小程序系统概述在当今移动互联网时代，社交电商已成为商业领域的重要增长点。推客小程序系统作为一种创新的社交分销工具，正逐渐改变传统电商的营销模式。推客（社交推广客）小程序本质上是一种基于微信生态的社交电商解决方案，它通过用户裂变和社交分享机制，实现产品的高效推广与销售转化。推客小程序系统的核心价值在于其"三级分销"机制，这种机制允许用户通过分享商品链接获取佣金，同时发展下级推广员形成分销网络</div>
</li>
<li><a href="/article/1950141156172034048.htm"
title="Spring AI Alibaba 快速入门指南（适合初学者）" target="_blank">Spring AI Alibaba 快速入门指南（适合初学者）</a>
<span class="text-muted">会飞的架狗师</span>
<a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</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/java/1.htm">java</a>
<div>如果你是刚接触AI开发或Spring框架的初学者，不用担心，本指南会用简单易懂的语言带你一步步了解并使用SpringAIAlibaba。一、什么是SpringAIAlibaba（小白也能懂）简单来说，SpringAIAlibaba就是一个“工具包”，它把阿里巴巴的AI技术（比如通义千问大模型、向量数据库等）和大家常用的Spring框架“打包”到了一起。**打个比方：**就像你想做蛋糕（开发AI应用</div>
</li>
<li><a href="/article/1950138256133779456.htm"
title="响应式编程实践：Spring Boot WebFlux构建高性能非阻塞服务" target="_blank">响应式编程实践：Spring Boot WebFlux构建高性能非阻塞服务</a>
<span class="text-muted">fanxbl957</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>博主介绍：Java、Python、js全栈开发“多面手”，精通多种编程语言和技术，痴迷于人工智能领域。秉持着对技术的热爱与执着，持续探索创新，愿在此分享交流和学习，与大家共进步。全栈开发环境搭建运行攻略：多语言一站式指南(环境搭建+运行+调试+发布+保姆级详解)感兴趣的可以先收藏起来，希望帮助更多的人响应式编程实践：SpringBootWebFlux构建高性能非阻塞服务一、引言在当今数字化时代，互</div>
</li>
<li><a href="/article/1950136744322068480.htm"
title="java.time包使用指南" target="_blank">java.time包使用指南</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/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JDK%E7%89%88%E6%9C%AC%E6%96%B0%E7%89%B9%E6%80%A7/1.htm">JDK版本新特性</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>目录前言一、时区与时间1.世界标准时：UTC、GMT、UT2.地区时：Asia/Shanghai、UTC+83.时区：ZoneId、TimeZone4.时间偏移量：ZoneOffset5.时区简称：CTT、PRC二、主要时间类1.重要时间接口：Temporal2.时间单位、时间字段、时长：ChronoUnit、ChronoField、DurationA.ChronoUnitB.ChronoFiel</div>
</li>
<li><a href="/article/1950123887568154624.htm"
title="SpringBoot 核心注解详解与实战应用指南" target="_blank">SpringBoot 核心注解详解与实战应用指南</a>
<span class="text-muted">策划加强小乔</span>
<a class="tag" taget="_blank" href="/search/SpringBoot/1.htm">SpringBoot</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>SpringBoot通过丰富的注解简化了开发流程，提升了效率。以下从核心注解、配置注解、数据注解等方面展开详细说明，并附实战代码示例。@SpringBootApplication核心注解解析@SpringBootApplication是SpringBoot项目的核心注解，组合了三个关键功能：@Configuration：标识该类为配置类@EnableAutoConfiguration：启用自动配置</div>
</li>
<li><a href="/article/1950118087764275200.htm"
title="【服务器知识】nginx配置ipv6支持" target="_blank">【服务器知识】nginx配置ipv6支持</a>
<span class="text-muted">问道飞鱼</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9B%B8%E5%85%B3/1.htm">服务器相关</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/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/ipv6/1.htm">ipv6</a>
<div>nginx配置ipv6支持Nginx全面支持IPv6配置指南一、基础IPv6配置1.启用IPv6监听2.IPv6地址格式说明二、高级IPv6配置1.双栈配置优化2.IPv6访问控制3.IPv6反向代理三、SSL/TLS配置1.IPv6SSL证书配置2.HSTS包含IPv6四、性能优化1.内核参数调优2.Nginx调优参数五、安全加固1.IPv6DDoS防护2.防止地址欺骗六、IPv6测试与诊断1.</div>
</li>
<li><a href="/article/1950115062781898752.htm"
title="26. 什么是雪碧图，作用和原理了解吗" target="_blank">26. 什么是雪碧图，作用和原理了解吗</a>
<span class="text-muted">yqcoder</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不</div>
</li>
<li><a href="/article/1950112039502409728.htm"
title="H5UI微信小程序前端框架实战指南" target="_blank">H5UI微信小程序前端框架实战指南</a>
<span class="text-muted">ai</span>
<div>本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下</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 （就是不换行啦，现在