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

<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />

在符合web标准的设计中,推荐使用外部调用法,可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。

4、选用恰当的元素:

根据文档的结构来选择HTML元素,而不是根据HTML元素的样式来选择。例如,使用P元素来包含文字段落,而不是为了换行。如果在创建文档时找不到适当的元素,则可以考虑使用通用的div 或者是span;

避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式;

尽可能少地使用标签和结构嵌套,这样不但可以使文档结构清晰,同时也可以保持文件的小巧,在提高用户下载速度的同时,也易于浏览器对文档的解释及呈视;

5、派生选择器:

可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时也使结构更加的清晰化,如:

.mainMenu ul li {background:url(images/bg.gif;)}

6、辅助图片用背影图处理:

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理,可以在不改动页面的情况下通过CSS样式来进行改动,如:

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

7、结构与样式分离:

在页面里只写入文档的结构,而将样式写于css文件中,通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写:

页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。如:

<div id=”mainMenu”>

<ul>

<li><a href=”#” >首页</a></li>

<li><a href=”#” >介绍</a></li>

<li><a href=”#” >服务</a></li>

</ul>

</div>

/*=====主导航=====*/

#mainMenu {

wiidth:100%;

heiight:30px;

background:url(images/mainMenu_bg.jpg) repeat-x;

}

#mainMenu ul li {

float:left;

line-heiight:30px;

margin-right:1px;

cursor:pointer;

}

/*=====主导航结束=====*/

9、鼠标手势:

在XHTML标准中,hand只被IE识别,当需要将鼠标手势转换为“手形”时,则将“hand”换为“pointer”,即“cursor:pointer;”

二.注释书写规范

1、行间注释:

直接写于属性值后面,如:

.search{

border:1px solid #fff;/*定义搜索输入框边框*/

background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/

}

2、整段注释:

分别在开始及结束地方加入注释,如:

/*=====搜索条=====*/

.search {

border:1px solid #fff;

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

}

/*=====搜索条结束=====*/

三.样式属性代码缩写

1、不同类有相同属性及属性值的缩写:

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