Browsing the archives for the css tag

float margin-left 浮动对象双倍距离

in 设计重构

出现问题是:使用 float: left; 后,在IE显示margin-left:1px;就变成2px的距离。 IE Bug 的解决方法: 加一个 display: inline; 就OK了 #box1{ float: left; background: #F2F2F2; width: 300px; height: 200px; margin-left: 50px; } #box1{ float: left; background: #F2F2F2; width: 300px; height: 200px; margin-left: 50px; display: inline; } margin在IE6下被解释为双倍距离,出现了Margin与float一起用时,在IE6下,其Margin属性会被解释会双倍的距离,margin产生双倍距离其解决兼容问题的两种方法:

0 Comments

HTML5+CSS3 W3C规范<<中文版>>参考手册(提供下载)

in 设计重构

很多人说现在IE浏览器不支持.研究没用.但我觉的.就算IE9出来了,IE6,7,8还是不支持.. 所以现在和以后效果是一样的.都是要搞些兼容性 点击这里下载 以下是参考手册下载地址 : http://files.cnblogs.com/Capricornus/css3.0html5.rar 各大浏览器 CSS3 和 HTML5 兼容速查表 http://news.csdn.net/a/20100401/217692.html 深入了解 HTML 5资源 http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K701.aspx

0 Comments

谈CSS书写风格

in 设计重构

随着公司业务的增加,需求变的越来越多,团队也因此在不断的扩大,我们经常会遇到几个人协同工作来完成同一件作品或者维护修改别人作品的时候,那么 是什么最让你最感到困扰呢?我们在实现一个表现复杂的页面的同时,CSS文件就会比较繁琐,众多的选择符、属性让人眼花缭乱,那么如何更快的定位、如何更 高效的编写样式呢?CSS的书写被很多人所忽略。关于书写风格,翻看了一些知名网站的作品,发现横向连排几乎成为各大产品项目的主流,然而,每个人对于 CSS的写法各异,这就导致我们工作效率的降低。为了更好的协同工作,保持团队内CSS书写的一致性,几经波折后达成共识,具体书写方法如下:CSS属性 横排书写,选择符纵排书写,每个”,”(逗号)后必须换行;

0 Comments

页面重构中的模块化思维

in 设计重构

最近被“模块化”缠身,又是文章又是PPT的,被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考,大多都是我自己从事页面重构这份 工作的经验和理解,在一定程度上存在局限性,也希望自己能温故而知新。 “模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓,就像“Ajax”。不过做为页面重构发展的一种趋势,越来越被大家重视,不自觉 也满口的“模块化”,只是你真的理解什么是“模块化”吗?

0 Comments

用CSS 3将我们带入下一个高度吧!

in 设计重构

“CSS 3 不是新事物,更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里,已经准备好了首次登场,呷着咖啡,等着浏览器来铺上红地毯。 你看,浏览器需要跟上了……” –谨以此文纪录ISD WEBTEAM 09年Q2力作:CSS 3.0 中文参考手册 背景 苏昱的《样式表中文手册》为代表的 CSS2.0参考资料伴随了国内众多web设计师们走过了近10年的时光,这种影响是深远的,但随着CSS技术的不断发展,设计师们多受传统资料的影响, 不能超脱现有的篱笆,给自己背上了沉重的包袱。你是否已注意到CSS 3已经蓄势待发?你是否渴望开始使用它们却又不知从何下手呢?正当CSS 3新特性备受期待的时候,我们的CSS3.0 中文参考手册就应运而生了……

0 Comments

[译]Efficient, maintainable CSS

in 设计重构

翻译自 Russ Weakley 的 Efficient, maintainable CSS 翻译自Russ大师的一篇关于如何书写高效、可维护、组件化的CSS的演示文档。Enjoy~

0 Comments

深入 CSS 行高

in 设计重构

翻译自 Russ Weakley 的Line Height 一个简单的, step-by-step 关于 CSS 行高的演示文档, 涵盖行间距, 如何应用各种类型的行高值, 当然还有 inline box 模型介绍, 希望能满足您 (但实战应用在中文字体或中英文字体混合,以及IE678,XP win7里,行高规则又有所不同,泪流满面)

0 Comments

网页设计中经常使用的页面检验地址

in 设计重构

可以自己进行校验: HTML校验:http://validator.w3.org/check CSS校验:http://jigsaw.w3.org/css-validator/ 有错误会报出来,在网上找下解决办法。 一般你验证多了以后,慢慢写得就会越来越符合标准了。 不过建议你不要太在意这个东西,当做努力的方向是可以的

0 Comments

css中potition的理解总结

in 设计重构

这里以实例说明position的两种属性值relative和absolute.
可能的值
值 描述
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。

因此,”left:20″ 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。
TIY 实例

定位: 相对定位
本例演示如何相对于一个元素的正常位置来对其定位。
定位: 绝对定位
本例演示如何使用绝对值来对元素进行定位。
定 位:固定定位
本例演示如何相对于浏览器窗口来对元素进行定位。
设置元素的形状
本例演示如何设置元素的形状。此元素被剪裁到这个形状内,并显示出来。
Z-index
Z-index可被用于将在一个元素放置于另一元素之后。

0 Comments

ol ul li dt dl dd等的常用用法

in 设计重构

DIV +CSS网页布局中常用的列表元素ul ol li dl dt dd用法解释,块级元素div尽量少用,和table一样,嵌套越少越好

ol 有序列表。

  1. ……
  2. ……
  3. ……
0 Comments