摘要: 今天我们阐述HTML 5的革新之一:更简洁的结构。新的文档类型 DOCTYPE先来解释一下文档类型 DOCTYPE:文档类型位于HTML源文件的第一行,在HTML4的标准中,DOCTYPE在被归在“HTML 标签”一章中,DOCTYPE由来历史说说历史吧,其实 DOCTYPE 之所以出现是由于早期的Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式)。而且这个黑色艺术的缔造者就是微软,微软在开发Explorer 5时改进了对W3C标准的支持,以至于旧的一些网页出现了错误的渲染效果(其实是依照规范是正确的 阅读全文
posted @ 2013-07-12 15:46 momoの前端花园 阅读(392) 评论(0) 推荐(0) 编辑
摘要: 建议:不推荐使用Quirks Mode。Quirks Mode中发生了什么?Quirks Mode是一种浏览器(像IE,Firefox,Opera)操作模式。从根本上说,怪异模式(也称之为兼容模式)意味着一个相对新的浏览器故意模拟许多在旧浏览器中存在的bug,特别是在IE4和IE5中。Quirks Mode是由文档类型探查法触发。也就是大家熟知的文档类型切换。这意味着浏览器检查一个HTML文档的开始,看它是否包含一个HTML规范所要求的文档类型声明。Quirks Mode的目标是使旧页面显示出他们的作者想要的那样。旧页面可能利用旧浏览器已知的特性写成,或者至少是适应旧浏览器。更多关于怪异模式的 阅读全文
posted @ 2013-07-12 15:25 momoの前端花园 阅读(221) 评论(0) 推荐(0) 编辑
摘要: HTML 5的革新之一:语义化标签二文本元素标签、分组元素标签。HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充,譬如图片、文本、代码、表单、交互等等。所以接下来我们就来详细了解HTML5的新增加的和重新定义的文本元素标签、分组元素标签等其他元素标签。文本字体元素文字对SEO影响很大,而HTML5对一些文本字体元素的语义又重新定义了一遍,也增加了一些新的。那我们就来重新认识他们。a(anchor 的缩写): 用于定义超链接em(emphasis 的缩写):em 是句意强调,加与不加会引起语义变化,也可以理解为 阅读全文
posted @ 2013-07-12 13:46 momoの前端花园 阅读(500) 评论(0) 推荐(0) 编辑
摘要: HTML 5的革新之一:语义化标签一节元素标签。在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。(即使我们用css样式的id和class形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”。看下图没有用div标签来布局html5的布局嗯,如上图那个页面结构没有一个div,都是采用html5语义标签(用哪些标签,关键取决于你的设计目标)。但是也不要因为html5新标签的出现,而随意用之,错误的使用肯定会事与愿违。所以有些地方还是要用div的 阅读全文
posted @ 2013-07-12 13:44 momoの前端花园 阅读(389) 评论(0) 推荐(0) 编辑
摘要: 让我们头痛的是IE是不支持text-shadow效果,但为了在兼容这一问题,我们只好使用滤镜filter:shadow来处理(本人不提倡使用滤镜)。filter:shadow滤镜作用与dropshadow类似,也能使用对象产生阴影效果,不同的是shadow可产生渐近效果,使用阴影更平滑实现。滤镜语法:E {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}其中E是元素选择器,Color用于设定对象的阴影色;Direction用于设定投影的主向,取值为0即零度(表示向上方向),45为右上,90为右,135为右下,180为下方,225为左下方,27 阅读全文
posted @ 2013-07-05 14:00 momoの前端花园 阅读(358) 评论(0) 推荐(0) 编辑
摘要: text-shadow,让我们大家一起来学习一下吧。语法:text-shadow:none |[ ,]*={2,3} &&?默认值:none;适用于:所有元素继承性:有取值:none:无阴影①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值:设置对象的阴影的颜色,可以是rgba透明色。说明:可以设定多组效果,每组参数以逗号分隔。兼容性:示例: 1 2 3 4 5 无标题文档 6 137 138 139 140 141 mark... 阅读全文
posted @ 2013-07-05 13:29 momoの前端花园 阅读(445) 评论(0) 推荐(0) 编辑
摘要: 1 2 3 4 5 Document 6 11 12 13 14 15 鼠标经过下面的块16 17 18 19 20 21 22 23 24 低版本浏览器不支持hover伪类,这段代码可以解决这个问题。实现完美兼容。 阅读全文
posted @ 2013-07-05 10:17 momoの前端花园 阅读(312) 评论(0) 推荐(0) 编辑
摘要: 1 2 3 4 5 无标题文档 6 30 31 32 33 34 35 1111111111136 222222222237 3333333333338 444444444439 5555555555540 66666666641 7777777777742 88888888888843 99999999944 0000000000045 46 47 48 49 ... 阅读全文
posted @ 2013-07-05 09:43 momoの前端花园 阅读(444) 评论(0) 推荐(0) 编辑
摘要: 好东西就要收藏起来! 1 2 3 4 兼容IE6的淘宝悬浮工具栏 5 6 29 30 31 32 33 34 35 36 37 38 View Code 网上找到的好宝贝~ 阅读全文
posted @ 2013-07-04 16:53 momoの前端花园 阅读(194) 评论(0) 推荐(0) 编辑
摘要: css3のborder-radius今天主要练习了一下border-radius这个属性,这个是最常用的属性,所以先从它开始学习和总结吧。我觉得需要注意以下几点:1.书写规范:-webkit-border-radius-top-left 其中top left是分开写的用-来连接,而-moz-border-radius-topleft 这个topleft是连在一起写的,不要记混了。2.简写方式:border-radius:2em;不用多说了border-radius:2em 3em;是指左上角=右下角=2em 右上角=左下角=3em border-radius:2em 3em 4em;左上角=2 阅读全文
posted @ 2013-07-04 15:15 momoの前端花园 阅读(376) 评论(0) 推荐(0) 编辑