体制文件命名,字体样式

 

少年老成.文件命名标准

体制文件命名
主要的 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
边导航空Logo:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面所处地点导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   Login
成效区:  shop(如购物车,收银台卡塔尔(قطر‎
当前的   current[/quote]

网站常用中Ukraine语对照表
网址导航 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 & 德姆and
老董思想 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 Fields
人力财富 Human Resource Hr
集团主致辞 Leader`s oration
集团天资 Enterprise Qualification
行当信息 Trade News
行当动态 Trends
顾客留言 Customer Message
顾客服务 Customer 瑟维斯
信息动态 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”、“寻找Logo”命名那“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卡塔尔(英语:State of Qatar):特地针对框架页面设计使用的DTD,即使你的页面中含有有框架,须求利用这种DTD。完整代码如下:

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

  理想图景自然是严刻的DTD,但对于大家超过56%刚接触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卡塔尔(英语:State of Qatar)</span>天幻网六周年天幻网六周年天幻网六周年天幻网六</li>

接下来在css中定义span为右浮动,实现了日期和标题分两边显示的功力

h1-h6:标题
h1-h6 依照入眼依次依次减少
h1位最注重的标题

label:为了使您的表单更有吸重力而且还是能扶植表单制版的好东西,

例如:

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

田野先生set & 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
……

 


用类的命名应竭尽以广大República Portuguesa语单词为准,做到老妪能解,并在合适的地点加以注释。对于二级类/ID命名,则接收组合书写的方式,后叁个单词的首字母应大写:
诸如“搜索框”则应命名字为“searchInput”、“寻觅Logo”命名那“searchIcon”、“寻觅按键”命名叫“searchBtn

CSS书写标准及艺术

大器晚成. 平常化书写标准及办法

1. 选择DOCTYPE:

XHTML 1.0 提供了三种DTD注脚可供选取:

紧接的(Transitional卡塔尔(英语:State of Qatar):必要极其宽松的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、颜色值的缩写:

当WranglerGB八个颜色值数值相似有的时候候,可缩写颜色值代码。如:

.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…