社会专题
靓丽女人 黑白社会 硬件网络 天下军事 教育咨询 星新一代 汽车电子 幽默笑话 农村特色 有书有道 软件技术 玄幻奇幻 办公达人 便民服务 免费资源 代码效果 美文园地 寻医问药 健康保健 时尚酷玩 天文地理 科技科幻 美食天下 游山玩水 历史天空 制作教程
FLASH频道
女生游戏 益智游戏 有声艺术 有声故事 电脑运用 休闲游戏 MTV类 运动游戏
聚划算
商旅游玩 装潢装饰 家电家具 服装服饰 健康保健 二手特色 生活必备 数码产品
映讯频道
喜剧片 国内片 情感片 动作片 战争片 纪录之窗 欧美剧集 明星云集 动漫片 港澳台剧 大陆剧 科幻片 恐怖片 浓缩电影 教育教学 艺术无界 一技之长 邻国热剧
下载中心
音体美合 信息社政 英语外语 科学自然 常用软件 语文数学 手机软件 红绿软件
图片中心
制作美图 生活图片 美女欣赏 实物图片 艺术欣赏 风景欣赏
领券购
热销女装 热血男装 生活必须 电子电器 手机电脑 旅游出行 学习艺术 吃货优选
新闻中心
一语惊人 奇闻趣事 热点专栏 曝光台 消费警示 今日观察 IT业界 消费主张 动态备忘 专利之窗
关闭
当前位置:首页社会专题代码效果
CSS网页布局的常用规范

对于两个不同的类,但是其中有部分相同甚至是全部相同的属性及属性值时,应对其加以合并缩写,特别是当有多个不同的类而有相同

的属性及属性值时,合并缩写可以减少代码量并易于控制。如:

#mainMenu {

background:url(../images/bg.gif);

border:1px solid #333;

wiidth:100%;

heiight:30px;

overflow:hidden;

}

#subMenu {

background:url(../images/bg.gif);

border:1px solid #333;

wiidth:100%;

heiight:20px;

overflow:hidden;

}

两个不同类的属性值有重复之处,刚可以缩写为:

#mainMenu,#subMenu {

background:url(../images/bg.gif);

border:1px solid #333;

wiidth:100%;

overflow:hidden;

}

#mainMenu {heiight:30px;}

#subMenu {heiight:20px;}

2、同一属性的缩写:

同一属性根据它的属性值也可以进行简写,如:

.search {

background-color:#333;

background-image:url(../images/icon.gif);

background-repeat: no-repeat;

background-position:50% 50%;

}

.search {

background:#333 url(../images/icon.gif) no-repeat 50% 50%;

}

3、内外侧边框的缩写:

在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的,当这四个属性值不同时也可直接缩写,如:

.btn {

margin-top:10px;

margin-right:8px;

margin-bottom:12px;

margin-left:5px;

padding-top:10px;

padding-right:8px;

padding-bottom:12px;

padding-left:8px;

}

则可缩写为:

.btn {

Margin:10px 8px 12px 5px;

Padding:10px 8px 12px 5px;

}

而如果当上边与下边、左边与右边的边框属性值相同时,则属性值可以直接缩写为两个,如:

.btn {

margin-top:10px;

margin-right:5px;

margin-bottom:10px;

margin-left:5px;

}

缩写为:

.btn {margin:10px 5px;}

而当上下左右四个边框的属性值都相同时,则可以直接缩写成一个,如:

.btn {

margin-top:10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

}

缩写为:

.btn{margin:10px;}

4、颜色值的缩写:

当RGB三个颜色值数值相同时,可缩写颜色值代码。如:

.menu { color:#ff3333;}

可缩写为:

.menu {color:#f33;}

四.hack书写规范

因为不同浏览器对W3C标准的支持不一样,各个浏览器对于页面的解释呈视也不尽相同,比如IE在很多情况下就与FF存在3px的差距,对于这些差异性,就需要利用css 的hack来进行调整,当然在没有必要的情况下,最好不要写hack来进行调整,避免因为hack而导致页面出现问题。

1、 IE6、IE7、Firefox之间的兼容写法:

写法一:

IE都能识别*;标准浏览器(如FF)不能识别*;

IE6能识别*,但不能识别 !important,

IE7能识别*,也能识别!important;

FF不能识别*,但能识别!important;

根据上述表达,同一类/ID下的CSS  hack可写为:

.searchInput {

background-color:#333;/*三者皆可*/

*background-color:#666 !important; /*仅IE7*/

*background-color:#999; /*仅IE6及IE6以下*/

}

一般三者的书写顺序为:FF、IE7、IE6.

写法二:

IE6可识别“_”,而IE7及FF皆不能识别,所以当只针对IE6与IE7及FF之间的区别时,可这样书写:

.searchInput {

background-color:#333;/*通用*/

_background-color:#666;/*仅IE6可识别*/

}

写法三:

*+html 与 *html 是IE特有的标签, Firefox 暂不支持。

.searchInput {background-color:#333;}

*html .searchInput {background-color:#666;}/*仅IE6*/

*+html .searchInput {background-color:#555;}/*仅IE7*/

提示:输入修改代码都可运行!
11
酒精度
126
顶一下
相关阅读
内容加载中……