- h5+c3新特性:
html5:
1.用于绘画的canvas元素
2.用于媒介回放的video和audio元素
3.对于本地离线存储的更好的支持
4.语义化标签,比如article、footer、header、nav、ssection
5.新的表单控件,比如calendar、date、time、email、url、searchcss3:
1.rgba
2.multi-column layout 多栏布局
3.round corner 圆角功能
4.@font face
5.css3动画 - 左侧固定右侧自适应:
一、左边固定,右边自适应的布局1. 左边左浮动,右边加个overflow:hidden;#lt{ float: left;200px; background: #ff0;}#rt{ overflow: hidden; background: #f0f;}2. 左边左浮动,右边加个margin-left;#lt{ float: left; 200px; background: #ff0;}#rt{ margin-left: 200px; background: #f0f;}3. 左边绝对定位,右边加个margin-left;#lt{ position: absolute; top:0; left:0; 200px; background: #ff0;}#rt{ margin-left: 200px; background: #f0f;}4. 左右两边绝对定位,右边加个width,top,left,right#lt{ position: absolute; top:0 ; left:0 ;200px; background: #ff0;}#rt{ position: absolute; top:0 ; left:200px; 100% ; rigth:0;background: #f0f;}效果图如下:二、右边固定,左边自适应的布局1. 左边左浮动,margin-left负值,右边右浮动;#lt{float:left; 100%;background: #00f;margin-right: -200px;}#rt{float: right; 200px;background: #ff0;}2. 右边绝对定位,左边margin-right;#lt{margin-right:200px; background: #00f;}#rt{ position: absolute; right:0; top:0; 200px;background: #ff0;}3. 左右两边绝对定位,左边加个width,top,left,right#lt{ position: absolute; top:0; left:0; rigth:0; 100% ; background: #f0f;}#rt{ position: absolute; top:0; left:200px; 200px; background: #ff0;}效果图如下:
- 文档类型:
浏览器的(严格模式)标准模式和(混杂模式)怪异模式
要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode)。
所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声明,将使网页进入怪异模式(quirks mode)。<
html
>
<
head
>
<
title
>重庆PHP</
title
>
</
head
>
<
body
>
<
h3
>重庆PHP,最专业的PHP社区</
h3
>
</
body
>
</
html
>
如果你的网页代码不含有任何声明,那么浏览器就会采用怪异模式解析,便是如果你的网页代码含有DTD声明,浏览器就会按你所声明的标准解析。
<!
DOCTYPE
html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
title
>重庆PHP</
title
>
</
head
>
<
body
>
<
h3
>重庆PHP,最专业的PHP社区</
h3
>
</
body
>
</
html
>
上面的代码,浏览器会按HTML 4.01的标准进行解析。