通用CSS命名规范

 

一.文件命名规范

体文件命名
主要的 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 Fields
人力资源 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

 

过去一律年,想必大家还能够感受及,几乎每个网站还发了一个新的职能让个性化推荐或猜测你爱,恨不得每个网站还是今条漫漫,让用户以里头消费的从停不下来;

 

 

那么到底是什么促使这么多的互联网产品开动个性化推荐、个性化推荐是什么实现的、有怎样常用之个性化推荐算法/系统;本文将围绕这几乎单点来进展;


1、个性化推荐起的愿或者说背景是什么;

咱们面前来相同篇文章称到过,当下移动互联网时代,随着互联网的深刻发展,越来越多之音讯于互联网及盛传,产生了严重的消息过载;如果非采用一定之手腕,用户很麻烦由这样多之音流中找到对协调来价的音信;

釜底抽薪信息过载有两栽手段:

1)、一种植是摸索,当用户发矣家喻户晓的要求对象要意图后,将需要变换为几独简易的乐章或短语的三结合,然后将这些歌词要短语组合提交到相应的追寻引擎,例如百度、天猫等搜寻,再由搜索引擎在海量的信息库中摸索出同搜索词相关的信返回给用户;

2)、一栽是推荐,很多时节用户之打算并无是好强烈,或者坏为难用清晰的语义表达,有时还并用户自己还非懂得自己的要求,这种景象下搜寻就解决不了用户之题目;

立有的时总结起来有个别种植现象:a)、大多数凡就电子商务的勃兴,用户毫无一定是牵动在明显的买意向去浏览,很多辰光是去游的;b)、随着情节市场的勃兴和泛滥,充斥着极多之消息,用户不理解好欠拘留呀种资讯或者说勿懂得好哪种类型资讯,抱在圈一样收押之情怀去浏览,碰到喜欢的即使扣留下去;

眼看简单栽情景下解决信息过载,理解用户意图,为用户推送个性化的结果,个性化推荐便是如出一辙栽比较好之选项;

一言以蔽之,个性化推荐在的背景或者由是,当下互联网时代,信息严重了载,用来解决信息过载问题;推荐系统是由此挖掘用户与信息里的涉嫌关系,帮助用户从大量数被发觉那个或感兴趣之音讯,并十分成个性化推荐以满足个性化需要;


2、个性化推荐到底是怎落实个性推荐的;

咱们眼前说过,推荐解决之是信过载的问题,即解决之凡用户获取信息这个流程的问题;

也就是说推荐是平种植能力,介于用户与信里,将不同之用户和不同的音信做精准化匹配,模型就(用户–推荐算法–信息);通俗点说哪怕是推荐通过一样种算法能力,让用户找到自己嗜的抑称用户的音信;

那么到底是怎匹配的呢;通过前的(用户–推荐算法–信息)模型,我们得本着个性化推荐总结出这么一拟实现规律;

1)、通过用户信息(历史记录、个人属性)总结描述用户属性;

2)、通过拥有信息之花状态总结描述信息属性;

3)、通过算法总结发生什么种(用户属性)的用户可/喜欢什么项目(信息属性)的信息;

4)、将当类型(信息属性)的音讯显示被爱/适合类型(用户属性)的用户;


3、有哪些我们熟知的推常见的荐算法推荐规则;

引进算法是老古老的,在机械上还从未起的时就发求跟动用了,主要是电商网站、资讯网站等;目前比熟知的引进算法来三种植:基于内容的推荐算法、协同过滤推荐算法和冲规则之推介算法;

1)、基于内容之引进算法;

原理是冲内容之关联性最推荐,推荐用户喜爱跟温馨关注过的消息在情节达好像的信;比如您看了《三体1》,基于内容之引荐算法会给你推荐《三体2》、《三体3》,算法认为就两边与汝之前看的始末及产生异常打之关联性;

欠推荐算法的亮点是:a)、推荐结果非常直观,内容里有着很大的关联系,不需解释;b)、可以大幅度地避免推荐的冷启动问题;如果某新的信息内容上线,在尚未为其他用户消费之情景下,其他几栽推荐算法是匪见面推荐的,但是因内容的引荐算法可以分析信息中的涉嫌关系,实现推荐;

欠推荐算法的通病是:a)、由于推荐时独自因内容的关联性做推荐,所以可能会见针对实时性/时间维度来欠缺;某段日子你看罢MH370之资讯内容,后续还引进时,很可能推荐的情报以及汝浏览过之情节千篇一律;b)、新时期的多媒体内容,例如只音乐、电影、图片里充分麻烦描述关联性,很不便开推荐;

2)、协同过滤推荐算法;

原理是基于用户历史作为作分析对象,
用户喜爱消费那些拥有相似行为的用户消费/喜欢了之信,
基于其他和手上用户一般的用户的作为,推荐信息让当下用户;

该推荐算法的长是:a)、基于其他用户行为集的引荐,都是相似行为的用户,可以包个性化水平高;b)、基于相同行为集的用户,容易受用户发现新的兴趣点;c)、模型通用性强,不欲极多对许数据领域的专业知识;

该推荐算法的短是:a)、由于拖欠推荐算法必须要根据用户之史行为,所以对于新用户(没有历史行为的用户)推荐效果就算颇差;b)、相同行为集的用户,用户喜好好兴趣而扩展性很没有;c)、推荐质量完全依据历史行为,可能有时刻花了某项目的音讯,后面又不欣赏了,后续系统或者会延续举行推荐;d)、无法根据场景进行推荐,难以根据用户所在的光景以及用户眼前之心境进行推荐作为;

3)、基于规则之推荐算法;

规律是起家平等效仿行为规则进行推荐,这好像算法常见的本根据用户点击、最多用户浏览等;常见的发出树规则(A推荐B),凡是看了A信息之用户为他推荐B信息;

该推荐算法的亮点是:a)、可以经过规则,让用户发现新的兴趣点;b)、对于推荐算法,不待了解太多的消息里的涉知识,只待依据规则进行推荐;

该推荐算法的弱项是:a)、推荐规则难以创建,难以创建同效仿到的推荐规则;b)、该推荐了是因规则的,所以导致个性化水平很小,难以完成真的个性化推荐;


4、那么问题来了,某个业务场景到底该用谁推荐算法比较适中;

以上三种植推荐算法,各自有着各自的利弊,但眼看也只是是拖欠算法的得失,也就是说算法的优势缺点是论战及在的;当我们要使为某实际应用场景时,一定要是组成产品本身状况和应用状况考量,需要考虑到比如产品降温启动期间数据量、长期样本数据量的稍、算法使用的阳台的成熟度等等;

差数量量级的图景下不同措施配合不同算法来的特性压力吧是不同的,需要组合产品自己情况进行抉择;大多数时,某个业务场景不肯定只是用一个算法来解决问题,有或会见又用多只算法来缓解有问题;

故时主流推荐方式也几清一色使用混合推荐的方法,利用有限种要又道之间的优势,规避劣势从而达到尽量到的点子,这中间为毫无疑问是冲不同之采取状况和产品具体情况具体分析;


随即是个性化推荐系统系列之第3首,该系列一共来5首:1、《个性化推荐系列之始认识推荐系统》;2、《个性化推荐系列之始识机器上》;3、《个性化推荐系列之推荐系统的嬗变与大面积推荐算法》;4、《个性化推荐系列之同过滤推荐算法总结》;5、《个性化推荐系列的推荐算法实践》;

翔知乎专栏–产品打杂https://zhuanlan.zhihu.com/zhoulink

Leave a Comment.