未知高度的图片垂直居中

<p>图片的宽度和高度是未知的,没有固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求,所以先把一些常用的方法都收集整理了一下。</p>
<p>下图是理想中的效果图,外部容器的宽度和高度固定,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。</p>
<div class="art_inner_img"><img src="http://stylechen.com/wp-content/uploads/2010/12/img_middle.jpg" alt="理想的图片垂直居中效果图" /></div>

阅读全文 »

CSS清除浮动

<p>“90%的CSS布局的兼容问题都是浮动布局引起的”,这是我无意中听到某位前端人员的抱怨。</p>
<p>某位新手朋友经常问起我浮动布局的时候该如何清除浮动,我回答过N次,但这位新手朋友好像始终记不住,总是会在这里出问题,包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确,但也反映出了前端人员在这个问题上或多或少的要纠结一番,新手会时常犯难,老手也不一定就不犯傻。</p>
<p>我总结了一下以往几种清除浮动的方法,发觉方法还是挺多的,那么有没有一种最优的方法可以实现一劳永逸呢?且看下面的几种方法先。</p>
<h3>空标签法</h3>
<p>在浮动元素后加一个空标签,空标签上定义一个清除浮动的类:</p>
<pre class="brush: c-sharp">
&lt;style type="text/css"&gt;
.clear{ clear:both;height:0;overflow:hidden; }
.float_left{ float:left; }
.float_right{ float:left; }
&lt;/style&gt;
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
<div class="clear"></div>
</pre>

阅读全文 »

jQuery常用选择器性能测试

<p>一直想知道jQuery的选择器到底哪个性能更好,却一直苦于没有顺手的测试工具。直到前不久同事老马开发了一款测试JavaScript性能的给力小插件<a href="http://www.kacakong.com/archives/300" target="_blank">FireJSPT</a>,这个插件是基于Firebug的,可以灵活的对页面中的JS代码片断进行测试,使用的时候只要将FireJSPT的类库文件导入即可:</p>
<pre class="brush: c-sharp">
&lt;script type="text/javascript" src="firejspt.js"&gt;&lt;/script&gt;
</pre>
<p>使用FireJSPT,本博对jQuery的常用的选择器在Firefox下做了一个测试,测试环境如下:</p>
<ul>
<li>操作系统:Windows 7旗舰版本</li>
<li>浏览器:Firefox 3.6.13</li>
<li>插件:Firebug 1.60(未安装其他插件)</li>
<li>jQuery版本:1.44</li>
</ul>
<h3>层级选择器(ul li)和find的对比</h3>
<p>HTML结构如下:</p>
<pre class="brush: c-sharp">
&lt;ul class="list"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;<!–省略455个li标签–>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>

阅读全文 »

jQuery TAB插件

最近的项目用到TAB效果的地方较多,于是自己稍微封装了下,写成了jQuery插件,方便以后使用,顺便重温下jQuery插件的实现机制。

在写插件之前对常见的TAB效果做了下总结,大体上也就那几种效果。插件力求简单易用,只要能实现常见的功能即可。

参数说明:

  • event
  • 触发TAB的事件类型,鼠标悬停:mouseover,鼠标点击:click,默认为mouseover。
  • timeout
  • 事件延迟,单位为毫秒,默认为0。
  • auto
  • 自动切换,单位为毫秒,默认为0。
  • callback
  • 回调函数,触发TAB时执行,函数的参数返回的是this。
阅读全文 »

新模板!

转眼间博客已沉寂2个多月了,原因诸多,但恐怕大多是自找借口。当然最大的原因还是因为在折腾新模板,新模板没完之前就不想更新,这对于本博来说是应该最好的借口了。

原来的模板从博客上线到今天,也没用多久,可能外表看起来清爽,但是感觉不是很实用,在发表文章的时候感觉有诸多的不便,很是不爽。索性就思量着换个全新的模板。

很喜欢新模板的布局与版式,简洁,本博一贯的风格,更多的考虑了可阅读性以及用户体验。本想整个低调的灰色,奈何我对绿色太有爱了,感觉自己有点偏执了。

最后,发个原来模板的截图,就当是在这里留给纪念吧。
<div class="art_inner_img"><img src="http://stylechen.com/wp-content/uploads/2010/11/old_templates.jpg" alt="纪念老模板" /></div>

阅读全文 »
第 15 页,共 18 页« 最新...10...1314151617...最旧 »