155-1695-4797

当前位置: 首页 > 高端网站建设资讯 » 

企业官网定制:做网站时网站命名规范大全(CSS规范便于交流 )

企业官网定制:做网站时网站命名规范大全(CSS规范便于交流 )

随着时代的发展,线上渠道变得越来越重要,也有更多的企业开始慢慢重视网站搭建及网站优化推广相关工作,本篇资讯企业官网定制:做网站时网站命名规范大全(CSS规范便于交流 ),关于命名,主要内容,方式几点内容做简单的介绍。

    良好的命名规范能够为集体合作研制开发推波助澜,无论在项目研制开发,依然是产品保护上都起到了至关关键的作用。应当说命名规范是一种约定,也是步骤员之间良好交流商议的桥梁。

另外古人相信只要清楚了解一个体私人真正的名字就会取得凌驾于那个体私人之上的不可思议的力量。只要给事物想到正确的名字,它就能够带给比代码更强的力量。如果所有的命名都与其自然相适合,则关联清晰,含义能够推导得出,通常人的推想也能在意料之中。

CSS+DIV的命名规则:

  登录条:loginBar
  标志:logo
  侧栏:sideBar
  广告:banner
  导航:nav
  子导航:subNav
  菜单:menu
  子菜单:subMenu
  搜索:search
  滚动:scroll
  页面主体:main
  内容:content
  标签页:tab
  文章列表:list
  提示信息:msg
  小技能:tips
  栏方向题:title
  友情链接:friendLink
  页脚:footer
  加入:joinus
  指南:guild
  服务:service
  热点:hot
  新闻:news
  下载:download
  注册:regsiter
  状态:status
  按钮:btn
  投票:vote
  合作伙伴:partner
  版权:copyRight

  1.CSSID的命名
  外套:wrap
  主导航:mainNav
  子导航:subnav
  页脚:footer
  整个页面:content
  页眉:header
  页脚:footer
  商标:label
  标题:title
  主导航:mainNav(globalNav)
  顶导航:topnav
  边导航:sidebar
  左导航:leftsideBar
  右导航:rightsideBar
  旗志:logo
  标语:banner
  菜单内容1:menu1Content
  菜单容量:menuContainer
  子菜单:submenu
  边导航图标:sidebarIcon
  注释:note
  面包屑:breadCrumb(即页面所处位置导航提示)
  容器:container
  内容:content
  搜索:search
  登陆:login
  功能区:shop(如消费车,收银台)
  当前的current

  2.样式文件命名
  主要的:master.css
  组织架构版面:layout.css
  专栏:columns.css
  文字:font.css
  打印样式:print.css
  主旨:themes.css

说明:均为class,需要扩展,则在当前命名内以“_“(下划线)后缀自定名称。
我习惯称列表页为list,新闻列表则为newslist,图片列表为piclist,
内容页为view,
/**/
集体大框架:#wrapper
大框架内:#inwrapper
/////////////////////////////////////////////////////////////////////////////////////////////////////////
顶部及banner:.top
顶部及banner内:.intop
Logo:.logo
Banner:.banner
导航:.menu
导航内:.inmenu
        .Menuul
        .Menuul li
        .Menuul li a
下拉菜单:.inmenu_xiala
          .Inmenu_xialaul
          .Inmenu_xialaul li
          .Inmenu_xialaul li a
///////////////////////////////////////////////////////////////////////////////////////////////////////////
主要内容:.mainWrapper
主要内容内:.inmainwrapper
左侧拦:.sideleft
左侧内:.insideleft
右侧栏:.sideright
右侧内:.insideright
中间:.sidecenter
中间内:.insidecenter
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
底部:.foot
底部内:.infoot
////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*其他命名*/
搜索:.search
搜索内:.insearch
搜索条:.searchselect
搜索按钮:.serachbuttom
输入文本框:.input
.select

/*表格样式*/
表格集体框架:.listbox
表格的宽度:.listbox-table
表格头部文字样式:.listbox-header
表格正文文字样式:.listbox-entry
/*通用型*/
通用:.GM/*这个有点郁闷,英文太差...*/
通用内:.INGM
通用左浮动:.GMfl(GM FLOAT LEFT)
通用右浮动:.GMfr(GM FLOAT RIGHT)
/*通用图片样式*/
通用图片样式:.img
/*清除浮动*/
清除所有浮动:.clear
清除左侧浮动:.clearleft
清除右侧浮动:.clearright
/*文字样式*/
文字:.font
/*新闻列表*/
新闻列表:.fontnews
/*View页字体总样式*/
VIEW页字体:.fontview


商 标:  label
标 题:  title
主导航:  mainbav(globalnav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsidebar
右导航:  rightsidebar
旗 志:  logo
标 语:  banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   Login
功能区:  shop(如消费车,收银台)
当前的   current
报头:   masthead
摘要, 概要  summary或general
左边的浮动照图片 photoleft
右边的浮动图片 photoright
标题   title
条目底端    entrybottom
更多    extended或.more
容器背景 containerbg
服务   service
服务链接   servicelink
线   line
文本   text
右边   rightside
版权   copyright
新闻   news
书皮   wrapper
推荐      intro-part1
专栏   column
路径   pathways
片断   section
模块   module
上导航   subnav
2.另外在编辑样式表时可用的注释可这样写:

<-- Footer -->
内容区
<-- End Footer -->

3.样式文件命名

主要的 master.css
组织架构,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主旨 themes.css

4.样式表中的注示
实例一
/* GLOBAL --------------------------- */
/* LINKS --------------------------- */
/* FORMS --------------------------- */
/* IDS --------------------------- */
/* HEADER --------------------------- */
/* COLUMN 1 --------------------------- */
/* COLUMN 2 --------------------------- */
/* CLASSES --------------------------- */

实例二

HTML

实例三(网易)

CSS
#UrsLogin
#LogoNav
#Column
#Content1
#bNav
#Copyright
#UrsLogin
#LogoNav
#SearchArea
#ChannelArea
#HotNews
#NewsCenter
.keyword
#MallArea
#city
#aboutus

……………………
常见命名

包含 wrapper和container
页头 header 或缩写为hd
页面尾部 footer 或缩写为ft
导航 nav
您的位置 breadcrumbs
二级导航 sub_nav
侧栏 sidebar或side-column
模块 module

数值库中的命名规则

数值库牵扯字符规则

运用26个英文字母(区分大小写)和0 -9这十个自然数,加上下划线_组成,共63个字符。不能显现其他字符(注释除外)。

数值库对象命名规则

数值库对象包含表、视图(查询)、存储步骤过程(参数查询)、函数、约束。对象名字由前缀和实际名字组成,长度不超过30。前缀:运用小写字母。

比如:表-tb 视图-vi 存储步骤过程-sp 函数-fn

实际名字

实际名字尽量描述实体的内容,由单词或单词组合,每个单词的首字母大写,其他字母小写,不以数字和_开始。

比如:表 User_Info 视图 UserList 存储步骤过程 UserDelete

因此,正当的对象名字类似如下。

表 tbUser_Info、tbMessage_Detail

视图 vi_MessageList

存储步骤过程 sp_MessageAdd

数值库表命名规则

字段由前缀和实际名字组成。实际名字中首单词一个系统尽量采用同一单词。

前缀:运用小写字母tb,表示表。

比如:tbMember   tbMember_Info   tbForum_Board   tbForum_Thread1

字段命名规则

数字、字符、日期/时间、lob(大对象)、杂项,字段由表的简称、下划线,实际名字加后缀组成。

后缀:运用小写字母,代表该字段的属性。

比如:  User_Idint     User_Namestr     User_RegDatedtm

视图命名规则

字段由前缀和实际名字组成,中间用下划线连接。

前缀:运用小写字母vi,表示视图。

比如:vi_User    vi_UserInfo

存储步骤过程命名规则

字段由前缀和实际名字组成,中间用下划线连接。
前缀:运用小写字母sp,表示存储步骤过程。
比如:sp_User

数值库设计文档规则

所有数值库设计要写成文档,文档以模块化形式表达。大致格式如下:

  '-------------------------------------------

  '  表名:  tbUser_Info  

  '  创建人:UAM_Richard

  '  日期:  2004-12-17

  '  版本:  1.0

  '  描述:  保存客户材料

  '  具体内容:

  '  UserId  int,自动增量  客户代码

  '  UserName  char(12)  客户名字

  '  ......

  '--------------------------------------------
CSS类及id中的命名规则

  Web前端开发人员能够通过搭建CSS类及id名称并运用这些名称来对div以及其他的格式页面因素推进标识。对研制开发人员来说,在命名重新定义XHTML标记(tags)的CSS selectors时,必须确保其与预定义的标记准确匹配,但就类以及id选取器名称而言,则仁者见仁,智者见智。然而随心所欲的为这些类以及id命名则并不是个好的习惯。

1、直观命名

当在设计Web页面以及需要对一个div推进标识的时候,自然的看法就是运用能够描述因素所在页面位置的词汇来对其命名。

比如:top-panel

   horizontal-nav

   left-side

   center-column

   right-col

这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且满足使人顾名思义,因此满足了标识页面因素以及相应的CSS样式的需要。

但疑问是这样的名称同页面内容的特定表达方式相关联联。这些命名参考了某种特定页面组织架构中的页面因素位置,因此在这样的组织架构之外运用就会显得不合适甚至造成明白混乱。这些命名不存在牵扯文档内容的构造。因此,下面给出了对CSS类以及ID命名更好的方式。

2、构造化命名

这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且满足使人顾名思义,因此满足了标识页面因素以及相应的CSS样式的需要。 这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且满足使人顾名思义,因此满足了标识页面因素以及相应的CSS样式的需要。

有标记的相关联信息都是用来描述文档的构造而不是外观。这样的特点使得我们能够通过简单的转变CSS的方式来对不一样外观格式下的内容(content)以及标记(markup)推进重用。当你明白这种方式时,很容易就能够发觉运用页面位置来为类以及id命名的方式在处理如音频(audio)等外观格式上显得十分不合适。因此,应当根据在文档中的运用目的而非显现位置来对类以及id推进构造化命名。

能够按照如下所示的构造化方式来对类以及id名称命名:

比如:branding

   main-nav

   subnav

   main-content

   sidebar

这些名字同直观命名方式一样十分易懂,但他们描述了页面因素的作用而非位置。这使得代码尤其符合运用纯粹的构造化标记(structural markup)的初衷,即研制开发人员能够在不转变标记的情景概况下对各种各样媒体下的表现格式推进处理。

即使你不打算在其他的媒体上对Web页面推进格式更正修改,运用构造化命名方式还能够协助支持你在日后的站点升级或重新设计中更为轻松。比如,构造化命名防止了当一个div同id right-column移动到页面左边后所带给的混乱。对div sidebar的运用这样的命名方式就显得尤其适当,因为无论它显现在页面的哪一边,这个名字仍然对研制开发人员来说直观易懂。

3、常规

Andy Clarke剖析了40份由推崇准则化Web设计理念的研制开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一,但是依然是发觉了少许频繁显现的常用名称。这里给出了常用类/id名称的示例列表:

比如:header

   content

   nav

   sidebar

   footer

3.基于成员的命名规范
基于成员的命名规范是指按照文件,文件夹的从属关联,通过归类的方式推进命名,这样能够使文件的排列具备较强的逻辑性.
比如:一个图片文件是在鼠标点击之前为"file_on".而在点击后的图片文件命名为"file_off"根据这个类别命名.尤其的清晰.

4.基于属性的命名规范
比如:装饰性小图片按照"<图片内容说明>_<颜色>_<图片尺寸>_<序号>.*"来表现.这个为"heart_red_401*334_1.jpg"

5.基于序数的命名规范
在网站页面中通常为了降低图片的下载时间把图片分隔成一小部分,组成一个集体图.这时能够用二维数组的方式命名.
比如:     

这个图片为"donghua_11.jpg"


这个图片为"donghua_12.jpg"

这个图片为"donghua_21.jpg"


这个图片为"donghua_22.jpg"

这些组成一幅图片.

6.基于枚举的命名规范

靠前个为书的侧面为"ddd_cemian.jpg"
第二个为书的封皮为"ddd_fengpi.jpg"
第三个为书的封底为"ddd_fengdi.jpg"

还有的网络站点上图片的欣赏也有不一样的大小,可根据客户的意愿查看.

比如:"ddd_cemian_401*334.jpg"和"ddd_cemian_1024*768.jpg"

这些供大家创建网络站点参考.

为防止代码冲突(这样做也会让你的代码更为通用),就要运用命名法则,这是一个很好的编程习惯。好啦,这里推荐少许常用的法则。

◆命名变量、方式、以及属性

变量、方式和属性的名称的靠前个字母应当大写,并且名称应当能表达出它们的用途(或者说是意义)。

变量
.NET 命名
匈牙利命名
描述

Cstring
EmployeeName
szName
Name of an employee.

Int
AttendanceCounter
nCounter
A counter of type long.

Long
NumberOfBytes
lBytes
A long type variable stores bytes.


有时我们习惯于在定义中运用下划线 "_",比如: Add_Data(int a, int b). 按照新的命名法则,这不是一个好的编程习惯,虽然它并不存在错。你应当将定义 Add_Data 改为 AddData。 这不是微软的准则,你也不是必须按照这些法则。但是,在少许地方你会明白下边这些法则的合理性。

就我个体私人而言,我更喜爱匈牙利命名法。当然,变量也运用同样的法则。如果你记得匈牙利命名法的话,一个布尔型的变量定义以"b"打头,例如:

BOOL bFlag = TRUE;


新的法则不推选运用Flag 和 "b":

bool IsFileFound = true;

你能够阅读一下MSDN,那里边有更多有关新的法则的说明。


◆命名组件以及集合(Assemblies)

为防止代码冲突, 按照命名法则给你的库(在 .NET 中称为assembly)命名是一个良好的编程习惯。假定你是MindCracker 企业公司的,你在研制开发一个用于扩充C# database 类的库, 把它的名字命名为MindCracker.DatabaseAssembly.ADOSet 要比MyAssembly.Database.ADOSet好的多。

再假定你的库有一个方式,它是从表中读取数值,并返回一个数值集。你如果取名为 DataSet return_data()的话,改为DataSet ReturnData()好啦.

你还应当在命名中遵循一个统一的单词顺序。比如,你有俩个表,分别为Employee 和 Manager ,并且你还为它们分别定义了一个向表里边插入一条记录的方式, 那么方式名AppendEmployee 和 AppendManager 要比AppendEmployee 和 ManagerAppend要好。
我更喜爱的二种方式,因为很容易了解一个块儿构造和嵌套块儿构造。

◆匈牙利命名法(efoxxx附)

匈牙利命名法是一名匈牙利步骤员发明的,而且他在微软任务了多年。此命名法就是通过微软的各种产品和文档传出来的。多数有经验的步骤员,不管他们用的是哪门儿语言,都或多或少在运用它

这种命名法的基本原则是:

变量名=属性+类别+对象描述

即一个变量名是由三部分信息组成,这样,步骤员很容易明白变量的类别、用途,而且便于记忆。

下边是少许推选运用的规则例子,你能够挑选运用,也能够根据个体私人喜好作些更正修改再用之。

⑴属性部分:

全局变量: g_

常量 : c_

类成员变量: m_

⑵类别部分:

指针: p

句柄: h

布尔型: b

浮点型: f

无符号: u

⑶描述部分:

初始化: Init

临时变量: Tmp

目的对象: Dst

源对象: Src

窗口: Wnd

将推荐匈牙利命名法,后面的例子里也会尽量遵守它和上面的代码风格。依然是那句话,并不是要求所有的读者都要去遵守,但是希望读者作为一个现代的软件研制开发人员都去遵守它。

a       Array                                 数组

b       BOOL (int)                            布尔(整数)

by      Unsigned Char (Byte)                  无符号字符(数据存储基本单位字节)

c       Char                                  字符(数据存储基本单位字节)

cb      Count of bytes                        数据存储基本单位字节数

cr      Color reference value                 色彩(参考)值

cx      Count of x (Short)                    x的集合(短整数)

dw      DWORD   (unsigned long)                 双字(无符号长整数)

f       Flags   (usually multiple bit values)   标志(通常是有多位的数值)

fn      Function                              函数

g_      global                                全局的

h       Handle                                句柄

i       Integer                               整数

l       Long                                  长整数

lp      Long pointer                          长指针

m_      Data member of a class                一个类的数值成员

n       Short int                             短整数

p       Pointer                               指针

s       String                                字符串

sz      Zero terminated String                以0结尾的字符串

tm      Text metric                           文本规则

u       Unsigned int                          无符号整数

ul      Unsigned long (ULONG)                 无符号长整数

w       WORD (unsigned short)                 无符号短整数

x,y     x, y coordinates (short)              坐标值/短整数

v       void                                  空

下边举例说明:

hwnd: h表示句柄,wnd表示窗口,合起来为“窗口句柄”。

m_bFlag: m表示成员变量,b表示布尔,合起来为:“某个类的成员变量,布尔型,是一个状态标志”。

C# .net 命名规范
一个好的命名规范如此难找,依然是自己收藏一个比较好

1 ADO.NET          命名规范          数值类别          数值类别简写          准则命名举例         
Connection          con          conNorthwind         
Command          cmd          cmdReturnProducts         
Parameter       parm          parmProductID         
DataAdapter      dad          dadProducts         
DataReader      dtr          dtrProducts         
DataSet          dst          dstNorthWind         
DataTable        dtbl          dtblProduct         
DataRow          drow          drowRow98         
DataColumn         dcol          dcolProductID         
DataRelation      drel          drelMasterDetail         
DataView          dvw          dvwFilteredProducts        

WinForm          Control          命名规范

数值类别          数值类别简写          准则命名举例         
Label            lbl          lblMessage         
LinkLabel       llbl          llblToday         
Button          btn          btnSave         
TextBox          txt          txtName         
MainMenu          mmnu          mmnuFile         
CheckBox          chk          chkStock         
RadioButton      rbtn          rbtnSelected         
GroupBox          gbx          gbxMain         
PictureBox       pic          picImage         
Panel             pnl          pnlBody         
DataGrid          dgrd          dgrdView         
ListBox          lst          lstProducts         
CheckedListBox    clst          clstChecked         
ComboBox          cbo          cboMenu         
ListView          lvw          lvwBrowser         
TreeView          tvw          tvwType         
TabControl          tctl          tctlSelected         
DateTimePicker     dtp          dtpStartDate         
HscrollBar          hsb          hsbImage         
VscrollBar          vsb          vsbImage         
Timer              tmr          tmrCount         
ImageList          ilst          ilstImage         
ToolBar           tlb          tlbManage         
StatusBar          stb          stbFootPrint         
OpenFileDialog      odlg          odlgFile         
SaveFileDialog      sdlg          sdlgSave         
FoldBrowserDialog   fbdlg          fgdlgBrowser         
FontDialog          fdlg          fdlgFoot         
ColorDialog          cdlg          cdlgColor         
PrintDialog          pdlg          pdlgPrint        

3          WebControl          命名规范

数值类别          数值类别简写          准则命名举例         
AdRotator          adrt          Example         
Button             btn          btnSubmit         
Calendar          cal          calMettingDates         
CheckBox          chk          chkBlue         
CheckBoxList       chkl          chklFavColors         
CompareValidator   valc          valcValidAge         
CustomValidator     valx          valxDBCheck         
DataGrid           dgrd          dgrdTitles         
DataList           dlst          dlstTitles         
DropDownList       drop          dropCountries         
HyperLink          lnk          lnkDetails         
Image             img          imgAuntBetty         
ImageButton      ibtn          ibtnSubmit         
Label            lbl          lblResults         
LinkButton       lbtn          lbtnSubmit         
ListBox          lst          lstCountries         
Panel            pnl          pnlForm2         
PlaceHolder     plh          plhFormContents         
RadioButton          rad          radFemale         
RadioButtonList          radl          radlGender         
RangeValidator          valg          valgAge         
RegularExpression          vale          valeEmail_Validator         
Repeater                    rpt          rptQueryResults         
RequiredFieldValidator      valr          valrFirstName         
Table              tbl          tblCountryCodes         
TableCell          tblc          tblcGermany         
TableRow          tblr          tblrCountry         
TextBox            txt          txtFirstName         
ValidationSummary    vals          valsFormErrors         
XML                xmlc          xmlcTransformResults        

.NET中的命名规则

名称空间的命名 

   命名名称空间的通常规则如下:
   CompanyName.TechnologyName
  这样,我们见到的名称空间应当是这样的:  
   Microsoft.Office
   PowerSoft.PowerBuilder                               

  关注:这只是一个原则。第三方企业公司能够选取其它的名字。
  防止用企业公司名称或其它著名品牌的名称作为名称空间的前缀,这样会造成两个公布的名称空间有同一个名称的也许性。
  比如: 将微软提供的Office自动类命名为Microsoft.Office

  运用Pascal大写方式,用逗号分隔逻辑成分。
  比如:Microsoft.Office.PowerPoint

  如果你的品牌运用的是非以前的大写方式,那么一定要遵循你的品牌所确定运用的大写方式,即使这种方式背离了通常的名称空间大写规则。
  比如:NeXT.WebObjects
     ee.cummings


类和类成分的命名

  类的命名原则是用名词或名词短语命名类,运用Pascal大写。降低类名中缩写的运用量。不要运用任何类前缀(例如C),不要运用带下划线的字符。
  比如:public class FileStream {}
      public class Button {}
      public class String {}

 

做网站时网站命名规范大全(CSS规范便于交流 )

网站好看才会有人看,互联网时代客户购买你的第一件产品是你的网站。高端网站建设服务商可以为您提供企业官网定制、多语种网站定制、营销型官网定制等多种类型网站定制服务,为您搭建用户体验度好、美观且利于SEO优化的高端网站。

5大行业领域,覆盖优质制造企业,累计服务客户超过1200+

百人技术团队开发,N对1专属服务,为企业定制专属网站,覆盖全网营销,轻松维护,快速收录

建站咨询

上一篇:网站高端定制价格:高端网站建设分页代码

下一篇:高端网站定制:网站制作中做门户网站怎样写CSS才简洁规范呢

精选案例