DIV+CSS，Web标准化！
May
1
要点：
块级元素前后元素会换行
行内元素前后元素不会换行
第一：行内元素与宽度
宽度不起作用
span {
width:200px;
}
没有变化
第二：行内元素与高度
高度不起作用
span{
height:200px;
}
没用变化
第三：行内元素与padding，margin
span{
padding:200px;
}
影响左右，不影响上下
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 居中对齐块
* dir - 目录列表
* div - 常用块级元素，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
块级元素前后元素会换行
行内元素前后元素不会换行
第一：行内元素与宽度
宽度不起作用
span {
width:200px;
}
没有变化
第二：行内元素与高度
高度不起作用
span{
height:200px;
}
没用变化
第三：行内元素与padding，margin
span{
padding:200px;
}
影响左右，不影响上下
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 居中对齐块
* dir - 目录列表
* div - 常用块级元素，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
Apr
9
语法：
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( enabled=bEnabled, sizingMethod=sSize, src=sURL)
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片，并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( enabled=bEnabled, sizingMethod=sSize, src=sURL)
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片，并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
Feb
22
又是浏览器的兼容问题。
针对不同浏览器对页面的显示方式来写css文件，需要使其对IE6 IE7 FIREFOX都有最佳的显示效果，或要调整css在其中一中浏览器中的显示方式，可以通过下划线(_)、星号(*)来处理：
比如要居中显示，我们都知道css中写法为：
当然这属性是所有浏览器都解释的，如果只想让ie6有居中的效果而firefox和IE7则不应用居中，可写为
如果想让所有IE都解释而在firefox不解释则写为：
而ie6与ie7的不同在于ie6不解释!important，而ie7会解释!important。
区别不同浏览器的css hack写法为：
总结：
针对不同浏览器对页面的显示方式来写css文件，需要使其对IE6 IE7 FIREFOX都有最佳的显示效果，或要调整css在其中一中浏览器中的显示方式，可以通过下划线(_)、星号(*)来处理：
比如要居中显示，我们都知道css中写法为：
text-align: center;
当然这属性是所有浏览器都解释的，如果只想让ie6有居中的效果而firefox和IE7则不应用居中，可写为
_text-align: center;
如果想让所有IE都解释而在firefox不解释则写为：
*text-align: center;
而ie6与ie7的不同在于ie6不解释!important，而ie7会解释!important。
区别不同浏览器的css hack写法为：
区别ie6和ie7：text-align: center; text-align: left!important;
区别firefox和ie6：text-align: center; _text-align: left;
区别firefox和ie7：text-align: center; *text-align: left;
区别firefox、ie6和ie7：text-align: center; *text-align: left; *text-align: right!important;
区别firefox和ie6：text-align: center; _text-align: left;
区别firefox和ie7：text-align: center; *text-align: left;
区别firefox、ie6和ie7：text-align: center; *text-align: left; *text-align: right!important;
总结：
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6支持下划线"_"，IE7和firefox均不支持下划线"_"。
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6支持下划线"_"，IE7和firefox均不支持下划线"_"。
Jan
16
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
Aug
26
看一下下边的例子您就会明白了：
例2 创建一个普通列表
此例在浏览器中的显示如下:
中国城市
北京
上海
广州
美国城市
华盛顿
芝加哥
纽约
例2 创建一个普通列表
<html>
<head>
<title>一个普通列表</title>
</head>
<body text="blue">
<dl>
<dt>中国城市</dt>
<dd>北京 </dd>
<dd>上海 </dd>
<dd>广州 </dd>
<dt>美国城市</dt>
<dd>华盛顿 </dd>
<dd>芝加哥 </dd>
<dd>纽约 </dd>
</dl>
</body>
</html>
<head>
<title>一个普通列表</title>
</head>
<body text="blue">
<dl>
<dt>中国城市</dt>
<dd>北京 </dd>
<dd>上海 </dd>
<dd>广州 </dd>
<dt>美国城市</dt>
<dd>华盛顿 </dd>
<dd>芝加哥 </dd>
<dd>纽约 </dd>
</dl>
</body>
</html>
此例在浏览器中的显示如下:
中国城市
北京
上海
广州
美国城市
华盛顿
芝加哥
纽约
