Wxxslt 's blog

样式表命名规范

Mon, 27 Jul 2009 11:10:44 +0000

行内元素和块级元素

Fri, 01 May 2009 14:46:30 +0000

要点：
块级元素前后元素会换行
行内元素前后元素不会换行

第一：行内元素与宽度
宽度不起作用
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 - 客户端脚本

Tags - css

AlphaImageLoader滤镜详解

Thu, 09 Apr 2009 08:58:13 +0000

语法：
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)格式的图片完全透明区域后面的内容。
Tags - alphaimageloader , 滤镜

css hack 针对不同浏览器的写法

Sun, 22 Feb 2009 02:17:25 +0000

又是浏览器的兼容问题。

针对不同浏览器对页面的显示方式来写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;

总结：

IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6支持下划线"_"，IE7和firefox均不支持下划线"_"。

Tags - css , hack

Css命名规则

Fri, 16 Jan 2009 12:31:51 +0000

头：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

............

Tags - css , div

新做的，很好，很强大。

Sat, 23 Aug 2008 02:07:20 +0000

Div+Css

地址：http://blog.wenxueba.net/new/
Tags - 花卉 , 文学吧

dl、dt、dd标签

Sun, 26 Aug 2007 01:33:24 +0000

看一下下边的例子您就会明白了：

例2 创建一个普通列表

一个普通列表

中国城市: 北京; 上海; 广州
美国城市: 华盛顿; 芝加哥; 纽约

此例在浏览器中的显示如下:

中国城市
        北京
        上海
        广州
美国城市
        华盛顿
        芝加哥
        纽约

Tags - 列表