Linda

摘要： 在你的页面里，你可能会使用<span></span>作为一种放置图标的方式，就像这样：<li class="favorite"> <span class="icon favorite"></span> <span id="favorite-insert-point" class="favorite"></span></li> 如果是这样，看看这样是不是好点：图标应该使用一个图标(icon)元素，可以使用<i> 阅读全文

摘要： 使用图片代替文字的CSS技术在前端开发有着悠久辉煌的历史。在2012年3月，Jeffrey Zeldman引进了一个新的技巧，称为Kellum方法。不是使用-9999px hack使文本超出屏幕达到隐藏文本的目的，他的技术在隐藏文本的同时保留了文本在屏幕范围之内。.hide-text { text-indent: 100%;white-space: nowrap; overflow: hidden;} 阅读全文

摘要： 在HTML5 Boilerplate里使用的Micro Clearfix是最新、兼容性最好、前端编码里最好的实践方法。Micro Clearfix支持firefox 3.5、safari 4、chrome、opera 9、IE6及以后的版本。清除浮动类.cf应该被加在所有包含浮动元素的元素上。在这种情况下，旧式的空div带有clear样式的元素（<div class=”clear”></div>）可以永远从你保留的方法里退出了。/* 现代浏览器 */.cf:before,.cf:after {content:"";display:table;}.cf 阅读全文

摘要： CSS重置有助于根据所有设置的样式建立一个基准样式。样式重置有效重写了浏览器某些元素（在浏览器里有很大的不同）默认的样式。尽管CSS resets在过去的几年里很受欢迎，但是，很多网站至今也没有使用，这些网站CSS的可扩展性因css resets会有很大的困难。大多数人推荐使用normalize.css重置默认样式，而不是使用由Eric Meyer写的非常流行的CSS Reset或者自己写的Reset。Normalize.css给所有浏览器的元素设置了一个共同的样式，而不是重置了这些元素的基本样式。可以参考github上normlize.css项目，它具有以下优点，不仅仅是CSS样式重置：不像 阅读全文

摘要： 解决的思路：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。<style type="text/css"> div { position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px; width:400px; he 阅读全文

摘要： 对一个幻灯插件来说， jQuery Tools 的 Tabs 包含的.slideshow() 非常友好，只是配置起来容易犯晕。比如，官方 API 指南上说加上autoplay: true 即可让幻灯自动播放，所以想当然地就写：$(".slidetabs").tabs(".images > div", { effect: 'fade', fadeOutSpeed: "slow", autoplay: true, rotate: true, interval: 50, clickable: false }).slid 阅读全文