体制文件命名,一.文件命名规范

 

一.文件命名规范

体制文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css [/quote]

CSS ID 的命名
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
作品列表:list
提醒音信:msg
小技巧:tips
栏目的题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendlink
页脚:footer
版权:copyright
外 套:  wrap
主导航:  mainnav
子导航:  subnav
页 脚:  footer
漫天页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  mainbav(globalnav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsidebar
右导航:  rightsidebar
旗 志:  logo
标 语:  banner
食谱内容1: menu1content
菜单容量: menucontainer
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面所处地点导航提醒)
容器:   container
内容:   content
搜索:   search
登陆:   Login
功用区:  shop(如购物车,收银台)
当前的   current[/quote]

网站常用中国和英国文对照表
网站导航 Site Map
公司简介 Profile or Company Profile or Company
合营社设备 Equipment Equipment
集团荣誉 Glories Glories
商店文化 Culture Culture
产品突显 Product Product
天赋认证 Quality Certification
信用社层面 Scale Scale
营销互连网 Sales Network
团协会单位 organization organization
合作进入 Join In Cooperation
技术力量 Technology Technology
经纪致辞 Manager`s oration
提升进程 Development History
工程案例 Engineering Projects
业务范围 Business Scope
分支机构 Branches
供求信息 Supply & Demand
经营理念 Operation Principle
产品销售 Sales Sales
关系大家 Contact Us Contact Us
音讯表露 Information Information
归来首页 Homepage Homepage
产品定购 order order
分类浏览 Browse By Category
电子商务 E-business
店家实力 Strength Strength
版权所有 Copy Right
友情连结 Hot Link
应用领域 Application 菲尔德s
人力资源 Human Resource Hr
集团管理者致辞 Leader`s oration
公司资质 Enterprise Qualification
行业新闻 Trade News
行业动态 Trends
客户留言 Customer Message
客户服务 Customer Service
音信动态 News & Trends
商家名称 Company Name
销售热线 Sales Hot-Line
联系人 Contact Person
您的渴求 Your Requirements
建设中 In Construction
证书 Certificate Certificate
地址 ADD Add
邮编 Postal Code Zipcode
电话 TEL Tel
传真 FAX Fax
产品名称 Product Name
产品表明 Description Description
价格 Price
品牌 Brand
规格 Specification
尺寸 Size
生产厂家 Manufacuturer Manufacturer
型号 Model
出品标注 Item No.
技术目标 Technique Data
产品描述 Description
产地 Production Place
销售新闻 Sales Information
用途 Application
论坛 Forum
在线订购 On-line order
招商 Enterprise-establishing
招标 Bid Inviting
综述 General
业绩 Achievements
招聘 Join Us
求贤纳士 Join Us
大事 Great Event
动态 Trends
服务 Service
投资 Investment
行业 Industry
规划 Programming
环境 Environment
发送 Delivery
提交 Submit
重写 Reset
登录 Enter
注册 Login
中原信用社网技术帮忙 Powered By Ce.Net.Cn
社区 Community
事情介绍 Business Introduction
在线调查 Online Inquiry Inquiry
下载中央 Download
会员登陆 Member Entrance
意见反馈 Feedback
常见难题 FAQ
主干概略 General Profile
有教无类作育 Education & Training
游乐园 Amusement Park
在线沟通 Online Communication
专题报纸公布 Special Report[/quote]

  常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适合的地点加以注释。对于二级类/ID命名,则采纳组合书写的格局,后一个单词的首
字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名那“searchIcon”、“搜索按钮”命名为
“searchBtn”……

一. 正常书写规范及艺术

  1. 选择DOCTYPE:

  XHTML 1.0 提供了三种DTD注解可供选用:

  过渡的(Transitional):必要更加宽松的DTD,它同意你继续使用HTML4.01的标识(可是要顺应xhtml的写法)。完整代码如下:

  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“&gt;

  严峻的(Strict):需求从严的DTD,你无法选取其余表现层的标识和质量,例如<br>。完整代码如下:

  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“&gt;

  框架的(Frameset):专门针对框架页面设计使用的DTD,假使你的页面中蕴涵有框架,需求动用那种DTD。完整代码如下:

  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“&gt;

  理想状态当然是严酷的DTD,但对此我们超过一半刚接触web标准的设计师来说,过渡的DTD(XHTML
1.0
Transitional)是当前美好选取(包罗本站,使用的也是过渡型DTD)。因为这种DTD还同意大家选择表现层的标识、元素和特性,也相比较便于通
过W3C的代码校验。

  2. 点名语言及字符集:

  为文档指定语言:

  <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

  为了被浏览器正确解释和经过W3C代码校验,所有的XHTML文档都必须申明它们所采纳的编码语言;如:
常用的言语定义:

  <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ />
正规的XML文档语言定义:
<?xml version=”1.0″ encoding=” utf-8″?>
针对老版本的浏览器的言语定义:
<meta http-equiv=”Content-Language” content=” utf-8″ />
为增加字符集,指出选用“utf-8”。

  3. 调用样式表:

  外部体制表调用:

  页面内嵌法:就是将样式表直接写在页面代码的head区。如:

  <style type=”text/css”><!– body { background : white ;
color : black ; } –> </style>
外部调用法:将样式表写在一个独门的.css文件中,然后在页面head区用接近以下代码调用。

  <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 {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}

*******************************************************************************************

取名参考(来源互连网)

常用的CSS命名规则: 

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制总体布局宽度:wrapper
左右中:left right center 

取名全体运用小写字母,如果要求多个单词,单词间接纳“-”分隔,比如user-list

常用代码结构:

div:首要用以布局,分割页面的布局
ul/ol:用于无序/有种类表
span:没有例外的意义,可以当做排版的扶植,

例如

<li><span>(4.23)</span>天幻网六周年天幻网六周年天幻网六周年天幻网六</li>

然后在css中定义span为右浮动,落成了日期和标题分两侧彰显的效益

h1-h6:标题
h1-h6 根据首要依次递减
h1位最首要的标题

label:为了使您的表单更有亲和力而且仍可以协助表单排版的好东西,

例如:

<label for=”user-password”>密 码</label>
<input type=”password” name=”password” id=”user-password” />

fieldset & legend:fildset套在表单外,legend用于描述表单内容。

例如:<form>
<fieldset>
<legend>title</legend>
<label for=”user-password”>密 码</label>
<input type=”password” name=”password” id=”user-password” />
</fieldset>
</form>

dl,dt,dd:当页面中现身第一行事看似标题/简述,然后上边为详细描述的情节时应当使用该标签,

例如<dl>
<dt>什么是CSS?</dt>
<dd>CSS就是一种名叫样式表(stylesheet)的技艺。也部分人称之为层叠样式表(Cascading
Stylesheet)。<dd>
<dt>什么是XHTML?</dt>
<dd>XHTML是一个按照XML的置标语言,看起来与HTML有些想像,唯有部分小的但最主要的区分。能够如此看,XHTML就是一个扮演
着似乎HTML的角色的XML。
本质上说,XHTML是一个桥接(过渡)技术,结合了XML(有几分)的强有力功能及HTML(半数以上)的简约特性。</dd>
</dl> 

C #content

S #subcol

M #maincol

X #xcol

那是纵向布局的XHTML结构,c-smx表示网页有多少个纵栏, c-sm代表有三个纵栏,
c-mx代表有多个纵栏其中一个是隶属的, c-m表示一个纵栏。

内部在三纵栏的布局需求分为两层
第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

自定义命名:
根据w3c网站上付出的,最好是用意义命名
比如:是任重先生而道远的资讯高亮显示(像黑色)
有两种

.red{color:red}
.important-news{color:red}

很了然第三种传达的含义尤为显著,所以尽可能不要用意义不醒目标当作协调自定义的名字

CSS命名规范

DIV CSS名称 说明 
网站公用相关 
Container div #container 容器 
Header or banner div #header 页尾部分 
Main or global navigation div #mainNav 主导航 
Menu #menu 菜单 
Sub Menu #submenu 子菜单 
Left or right side columns #sidebarA, #sidebarB 左侧栏或右手栏 
Main div #main 页面主体 
Content div #content 内容部分 
The main content area #contentMain 首要内容区域 
Footer div #footer 页脚部分 
Tag #tag 标签 
Message #msg #message 提醒音讯 
Tips #tips 小技巧 
Vote #vote 投票 
Friend Link #friendlink 友情连接 
Title #title 标题 
Summary #summary 摘要 
Sub-navigation list #subNav 二级导航 
Search input #searchInput 搜索输入框 
Search output #searchOutput 搜索输出和查找结果相似 
Search #search 搜索 
Search results #searchResults 搜索结果 
Copyright information #copyright 版权新闻 
brand #branding 商标 
branding-logo #brandingLogo LOGO 
Site information #siteinfo 网站新闻 
Copyright information etc. #siteinfoLegal 法律注解 
Designer or other credits #siteinfoCredits 信誉 
Join us #joinus 参加大家 
Partnership opportunities #partner 协作伙伴 
Services #service 服务 
Regsiter #regsiter 注册 
Status #status 状态

  9、坐骨神经痛势:

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

 

初稿地址:http://www.cnblogs.com/517zd/archive/2010/11/17/1879879.html

 

DIV+CSS网页布局常用的有的基础知识整理,divcss

CSS命名规范

一.文件命名规范

全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;

二.常用类/ID命名规范

页 眉:header
内 容:content
容 器:container
页 脚:footer
版 权:copyright 
导 航:menu
主导航:mainMenu
子导航:subMenu
标 志:logo
标 语:banner
标 题:title
侧边栏:sidebar
图 标:Icon
注 释:note
搜 索:search
按 钮:btn
登 录:login
链 接:link
信息框:manage
……

 


用类的命名应尽量以广大英文单词为准,做到通俗易懂,并在适用的地方加以注释。对于二级类/ID命名,则运用组合书写的情势,后一个单词的首字母应大写:
诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名那“searchIcon”、“搜索按钮”命名为“searchBtn

CSS书写规范及办法

一. 好端端书写规范及艺术

1. 选择DOCTYPE:

XHTML 1.0 提供了三种DTD申明可供选用:

连接的(Transitional):必要尤其宽松的DTD,它同意你继续运用HTML4.01的标识(不过要顺应xhtml的写法)。完整代码如下:

 

严加的(Strict):必要从严的DTD,你不能采取其他表现层的标识和性质,例如
。完整代码如下:

 

框架的(Frameset):专门针对框架页面设计使用的DTD,假设你的页面中涵盖有框架,需要选拔那种DTD。完整代码如下:

 


想意况自然是严峻的DTD,但对此大家半数以上刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是当下出色选用(包含本站,使用的也是过渡型DTD)。因为那种DTD还同意咱们拔取表现层的标识、元素和品质,也比较简单通过W3C的代码校验。

2. 指定语言及字符集:

为文档指定语言:

 

为了被浏览器正确解释和透过W3C代码校验,所有的XHTML文档都不可以不表明它们所选拔的编码语言;如:
常用的言语定义:

业内的XML文档语言定义:

本着老版本的浏览器的言语定义:

为增高字符集,提议接纳“utf-8”。

3. 调用样式表:

表面体制表调用:

页面内嵌法:就是将样式表直接写在页面代码的head区。 如:

<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
外部调用法:将样式表写在一个独门的.css文件中,然后在页面head区用类似以下代码调用。

<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 {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height: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、差别类有相同属性及属性值的缩写:

对于三个分裂的类,然而中间有局地同样甚至是任何一律的特性及属性值时,应对其再说合并缩写,越发是当有多个不一样的类而有相同的质量及属性值时,合并缩写可以收缩代码量并易于控制。如:

#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}

五个差异类的属性值有双重之处,刚可以缩写为:

#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}

2、同一属性的缩写:

同一属性根据它的属性值也得以开展简写,如:

.search {

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:#666 !important; /*仅IE7*/
*background-color:#999; /*仅IE6及IE6以下*/
}
一般三者的书写顺序为:FF、IE7、IE6.

写法二:

IE6可识别“_”,而IE7及FF皆不可以鉴别,所以当只针对IE6与IE7及FF之间的界别时,可这么书写:
.searchInput {
/*通用*/
_background-color:#666;/*仅IE6可识别*/
}

写法三:

*+html 与 *html 是IE特有的标签, Firefox 暂不扶助。
.searchInput {}
*html .searchInput {background-color:#666;}/*仅IE6*/
*+html .searchInput {background-color:#555;}/*仅IE7*/

屏蔽IE浏览器:

select是选取符,依照意况更换。第二句是MAC上safari浏览器独有的。

*:lang(zh) select {font:12px  !important;} /*FF的专用*/
select:empty {font:12px  !important;} /*safari可见*/

IE6可识别:

此处重倘使经过CSS注释分开一个特性与值,注释在冒号前。

select { display /*IE6不识别*/:none;}

IE的if条件hack写法:

所有的IE可识别:

<!–[if IE]> Only IE <![end if]–>
唯有IE5.0可以辨认:
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0包换IE5.5都足以分辨:
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
仅IE6可识别:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6以及IE6以下的IE5.x都可甄别:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
仅IE7可识别:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>

2、清除浮动:

在Firefox中,当子级都为转变时,那么父级的莫大就不能够完全的包住整个子级,那么此时用那些清除浮动的HACK来对父级做五回定义,那么就可以化解那些标题。

select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}

http://www.bkjia.com/HTML5/1109799.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1109799.htmlTechArticleDIV+CSS网页布局常用的一些基础知识整理,divcss
CSS命名规范 一.文件命名规范 全局样式:global.css;
框架布局:layout.css; 字体样式:font…