Zen Coding – 超快地写网页代码

上次在北京看到善用佳软的 xBeta 演示 VIM 的时候,@sfufoet 我就被强烈震撼到了。VIM 的确是个强大的编辑器,它可以折腾出很多种强大的功能。今天看到这个叫 Zen Coding 的东西,我强烈推荐给经常和 HTML CSS 打交道的朋友。@appinn

下面的动态演示图,只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成,秒杀了你自定义的各种快捷键或者 AHK 的热字符串,以智能简洁高效的缩短输入,带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。

先举一个复杂的例子:zen-coding 可以把这样的代码:div#header>ul.navigation>li*4>a,变成下面的 HTML 代码 Continue reading

圆角(border-radius)样式

建议参考:http://www.css3.info/preview/rounded-border/

圆角样式示例(仅在firefox内核,safari,chrome等内核浏览器下支持,IE内核不支持)

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

CSS3的border-radius规范

  1. 属性:
    border-top-right-radius
    border-bottom-right-radius
    border-bottom-right-radius
    border-bottom-right-radius
    值:<length> <length>。它们分别是定义角形状的四分之一椭圆的两个半径。如图:

 

  1. 第一个值是水平半径。
  2. 如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。
  3. 如果任意一个值为0,则这个角是矩形,不会是圆的。
  4. 值不允许是负值。
  1. 属性:border-radius。它是上面四个属性值的简写。
    值:<length>{1,4} [ / <length>{1,4} ] 

    1. 如果斜线前后的值都存在,那么斜线前的值设置水平半径,且斜线后的值设置垂直半径。如果没有斜线,则水平半径和垂直半径相等。
    2. 四 个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置的。如果bottom-left省略,那么它等于top-right。如果bottom-right省略,那么它等于 top-left。如果top-right省略,那么它等于top-left。
  2. 应用范围:所有的元素,除了table的样式属性border-collapse是collapse时
  3. 内边半径等于外边半径减去对应边的厚度。当这个结果是负值时,内边半径是0。所以内外边曲线的圆心并不一定是一致的。
  4. border-radius也会导致该元素的背景也是圆的,即使border是none。如果background-clip是padding-box,则背景(background)会被曲线的内边裁剪。如果是border-box则被外边裁剪。border和padding定义的区域也一样会被曲线裁剪。
  5. 所有的边框样式(solid、dotted、inset等)都遵照角的曲线。如果设置了border-image,则曲线以外的部分会被裁剪掉。
  6. 如果角的两个相邻边有不同的宽度,那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。
  7. 两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如,两条边宽度相同,这个点就是一个45°的角上,如果一条边是另外一条边的两倍,那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线
  8. 角 不允许相互重叠,所以当相邻两个角半径的和大于所在矩形区域的大小时,用户代理(浏览器)比如缩小一个或多个角半径。运算法则如下:f = min(Li/Si),i ∈ {top, right, bottom, left},Ltop = Lbottom = 所在矩形区域的宽,Lleft = Lright = 所在矩形区域的高。如果f < 1,那么所有角半径都乘以f。

实际CSS应用,需要根据不同浏览器HACK

css样式float造成的浮动“塌陷”问题的解决办法

什么是CSS Float?

定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级元素,而不论它本身是何种元素。元素对象设置了float属性之后,它将不再独自占据一行。浮动块可以向左或向右移动,直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。
fload属性有四个可用的值:Left 和Right 分别浮动元素到各自的方向,None (默认的) 使元素不浮动,Inherit 将会从父级元素获取float值。
下面让我们来详细了解下css float

1.Float的用处

除了简单的在图片周围包围文字,浮动可用于创建全部网页布局。

1

浮动对小型的布局同样有用。例如页面中的这个小区域。如果我们在我们的小头像图片上使用浮动,当调整图片大小的时候,盒子里面的文字也将自动调整位置: Continue reading

css问题,ie6下有时候边框断断续续bug的解决l办法

e6.0下面经常会出现border边框断断续续的问题,初学div+css 的一般不会用遇到这个问题,不过等深一步了解了div之后自然会经常碰到这种问题了,因为初学者不会偷懒,等我们觉得用的很熟了,各种浏览器都能很方便的 兼容之后就会出现这种问题,我有很多同事都碰到过这种问题,其实解决办法很简单,我先简单描述一下边框断裂的效果.

在浏览器下一刷新边框是全的,再以刷新边框就会有断开,什么原因呢,很懊恼的事情,网上一搜也没有答案,下面我就告诉大家解决的方法,其实他是有原因的, 原因就是你的外层有边框,边框层里面嵌套的层里面有浮动,浮动这个最令人懊恼的东西经常会出问题,由于这个原因会引起ie6下面边框断裂,解决办法就是在 外层加 zoom:1; 或者 heigth:100%; 很容易就解决了这个问题。

表现状况:窗口的边框时隐时现。。。

发生情况:

网上说是在一个容器中有元素浮动时容易出现,自己感觉有时内部元素把容器撑开时也会看不到边框。

解决办法:

如果按网上说的是因为浮动的原因的话,那么添加清除浮动则应试可以正常解决。

另外网上的解决办法是:给窗口设置{zoom:1} or { width:100%; height:100%}使其拥有布局即可。

 

 

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

出现问题是:使用 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产生双倍距离其解决兼容问题的两种方法:

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

很多人说现在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

Continue reading

谈CSS书写风格

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

页面重构中的模块化思维

最近被“模块化”缠身,又是文章又是PPT的,被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考,大多都是我自己从事页面重构这份 工作的经验和理解,在一定程度上存在局限性,也希望自己能温故而知新。

“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓,就像“Ajax”。不过做为页面重构发展的一种趋势,越来越被大家重视,不自觉 也满口的“模块化”,只是你真的理解什么是“模块化”吗? Continue reading

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

CSS 3 不是新事物,更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里,已经准备好了首次登场,呷着咖啡,等着浏览器来铺上红地毯。 你看,浏览器需要跟上了……

–谨以此文纪录ISD WEBTEAM 09年Q2力作:CSS 3.0 中文参考手册

背景

苏昱的《样式表中文手册》为代表的 CSS2.0参考资料伴随了国内众多web设计师们走过了近10年的时光,这种影响是深远的,但随着CSS技术的不断发展,设计师们多受传统资料的影响, 不能超脱现有的篱笆,给自己背上了沉重的包袱。你是否已注意到CSS 3已经蓄势待发?你是否渴望开始使用它们却又不知从何下手呢?正当CSS 3新特性备受期待的时候,我们的CSS3.0 中文参考手册就应运而生了…… Continue reading