摘要: 1.针对IE的注释语句:lt,gt,lte,gte分别是小于,大于,小于等于,大于等于。注意,注释时,IE 和其对应的浏览器版本中间有空格。<!--[if lt IE 9]><link href="http://www.cnblogs.com/src/main/webapp/assets/styles/ieHack.css" rel="stylesheet" type="text/css" /><![endif]-->2._property:这个只有IE6可以识别,非常有用。body { _bord 阅读全文
posted @ 2013-01-07 18:41 xmlovecss 阅读(235) 评论(0) 推荐(0) 编辑
摘要: css选择符是有权重的。作用于同一标签的样式同一属性,究竟哪个能起到作用,而哪个会被覆盖掉,这就跟css选择符权重有关了。在说明权重之前,必须强调一点,那就是css样式规则渲染是先就近渲染,然后才依据选择符权重进行渲染。看看什么是就近渲染原则:html:<div id="test"> <p>测试字体颜色</p></div>css:#test { color:red; }p { color:blue; }请问,段落p的字体颜色是红色还是蓝色?答案是,显示蓝色。无论div#test的权重有多大,依据就近原则,p就显示蓝色。简单描述 阅读全文
posted @ 2013-01-07 18:39 xmlovecss 阅读(991) 评论(0) 推荐(0) 编辑
摘要: 一.css样式表管理(样式划分)搜索一下,一大把。各种心得,各种理解啊。见蓝色理想早期讨论帖子:http://bbs.blueidea.com/thread-2767504-1-1.html我们总结一下css样式表管理的需要:减少对css文件的请求数合理加载需要的css,规避冗余样式良好的可扩展性,团队的高效合作前两点可能是css划分产生的一个根本原因,第三点则是维护上的需要。从长期考虑,前面两点甚至可以忽略,但是第三点相当重要。良好的可扩展性:不怕有规律的设计,就怕有针对性的变态设计。前端不应当握紧拳头对设计师说不,而应当放开手来,让设计师展开自己的手脚。在应对千变万化的设计时,你还需要把它 阅读全文
posted @ 2013-01-07 16:41 xmlovecss 阅读(405) 评论(0) 推荐(0) 编辑
摘要: 前面的培训其实讲了个大概。下面讲讲比较细节的东西。一.padding 和 margin理解的关键在于,padding就是内填充,margin只是外边距。给元素加了背景色,就可以查看出两者的差异了。而在盒模型计算上,padding是要计算的,margin是不用计算的,因而背景图的平铺可以铺到padding上。通常在使用这两者比较含糊的地方是:在没有边框或者背景色的情况下,padding和margin看不出有何差异。因而,如果为了扩展,避免将来又要加上边框或者背景色,对于元素和元素之间存在间距,请使用margin。还需要注意的一点是,内联元素的margin-top,margin-bottom通常不 阅读全文
posted @ 2013-01-07 13:42 xmlovecss 阅读(186) 评论(0) 推荐(0) 编辑
摘要: 一.css reset的整理。最霸道的一句就是:*{margin:0;padding:0;},没办法,html标签基本都带有默认的padding或者margin,所以为了统一,就只有此策略了。更详细的css reset就是针对具体的标签订制。可以查看淘宝的css reset。若想有所思考,可以参考此文章对css reset的反思:http://www.zhangxinxu.com/wordpress/2010/04/css-reset%E7%9A%84%E9%87%8D%E6%96%B0%E5%AE%A1%E8%A7%86-%E9%81%BF%E5%85%8D%E6%A0%B7%E5%BC%8 阅读全文
posted @ 2013-01-07 11:05 xmlovecss 阅读(160) 评论(0) 推荐(0) 编辑
摘要: 仅仅从标签上理解语义未免显得狭隘,语义应当不止如此。语义还应包括结构上的先后和层级逻辑。此处我们不讨论微格式,有关微格式,大家可以下去查阅资料。一.结构上的先后(内容的重要性)。什么才是具有良构的页面,如果不查看源代码,裸奔的页面层次结构清晰,内容划分合理,就算是一个具有良构的页面。当然,即便是看起来长得一样的裸奔页面,其html结构可能也写的五花八门。这才是语义里最难也最有意思的地方。我们来看看,一个最简单的页面的合理结构。通常一个页面基本组成有三个部分,头部,内容和底部。html的书写顺序也应当如此,从头到底。头部通常包含关于网站的logo,搜索,注册,导航等重要的信息,而内容部分可能包括 阅读全文
posted @ 2013-01-07 10:20 xmlovecss 阅读(144) 评论(0) 推荐(0) 编辑
摘要: 1.无序列表ul>li从字面意思去理解,既然是“无序”的,就说明列表项中的信息重要性是一致的。比较常见的是门户站点的新闻列表。2.与无序列表对应的列表是有序列表,ol>li有序列表排名分先后顺序的。常见的是各种排行榜,比如music排行榜。3.定义列表dl>dt+dd定义列表看着好理解,但是容易被滥用。一个标题dt,然后dd对此进行展开描述。详见链接:http://bbs.blueidea.com/forum.php?mod=viewthread&tid=30306404.表格 table,caption,thead,tbody,tfoot,tr,td表格标签没什么好 阅读全文
posted @ 2013-01-06 20:05 xmlovecss 阅读(173) 评论(0) 推荐(0) 编辑
摘要: 总结一下方案和计划:计划:假如每天都有培训的话,每天培训一个小时,需要两周时间。涉及的内容只是一些关键的东西。太基础的自学。另外包括一些经验性的规范。其它扩展知识请参考:http://aliceui.com/alice-css-guide/第一周考核两次,语义考核,实例练习(html+css),第二周考核两次,实例考核,psd转化html页面。培训课程:html语义培训css培训工具培训:firebug,fiddler2等推荐书籍:css权威指南(第三版)具体如下:html语义。涉及常用的有序无序定义列表,表格,表单,标题,html5新增标签 menu,article,header,foote 阅读全文
posted @ 2013-01-06 16:07 xmlovecss 阅读(182) 评论(0) 推荐(0) 编辑
摘要: 原理很简单,使用jquery实现的。代码就不封装了,一眼看出原理。<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>返回到顶部</title><style type="text/css">*{ margin:0;padding:0; }body { font:12px/1.5 arial; }.wrap { border:2px solid orange; }p { height:400px; }.btn { 阅读全文
posted @ 2012-07-23 14:58 xmlovecss 阅读(253) 评论(0) 推荐(0) 编辑
摘要: 今天测试animate时候,发现不支持颜色动画,包括background-color,color,以及border-color。搜索了一把发现这是个bug,需要扩展插件来弥补此问题。官网地址:http://jqueryui.com/demos/animate/,这个需要jqueryUI js。另外可以参考:http://www.bitstorm.org/jquery/color-animation/ 阅读全文
posted @ 2012-07-23 13:39 xmlovecss 阅读(201) 评论(0) 推荐(0) 编辑