当前位置:文档之家› 网站命名规范大全CSS规范

网站命名规范大全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 https://www.doczj.com/doc/7e10714363.html, 命名规范数据类型数据类型简写标准命名举例

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 类和ID的常用命名:

网站头部: head/header(头部) top(顶部)导航:nanv 导航具体区分:topnav(顶部导航)、mainnav(主导航)、mininav(迷你导航)、textnav(导航文本)、subnav(子导航/二级导航) 旗帜、广告和商标:logo(旗帜)、brand(商标)、banner(标语)

搜索:sreach(搜索)、sreachbox(搜索框)、sreachbtn(搜索按钮)、sreachinput(搜索输入框)注册和登录:login(登录)、regsiter(注册)、userbox(用户名/通行证的文本框)、password(密码) 布局、分栏和框:layout(布局)、bigdiv(大div)、leftdiv(左分栏)、rightdiv(右分栏)、leftfloat(左浮动)、rightfloat(右浮动)、mainbox()、subpage(子页面/二级页面)

页脚/底部:foot/footer(页脚/底部)、copyright(版权信息)、sitemap(网站地图)

其他:content(内容)、skin(皮肤)、title(标题)、from(表单)、pic(图片)、news(新闻)、shop(购物区)、list(列表/清单)、newslist(新闻列表)、downloadlist(下载列表)、piclist(图片列表)、dropmenv(下拉菜单)、cor/corner(圆角)、homepage(首页)、crumb(当前位置导航)

实际上上面的id命名我会经常用大小写和_来区分,比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名,比如写一个红色字体的class,可以

.f_red {}(f是font 字体的缩写)。总之原则是:大小写、_、缩写,大大增强代码的可读性。另外我还经常使用"in"的写法做子divd的命名,写法in+父div,这样可以避免前面命名过了后面div不知道怎么去命名。比如intop、inbox、infrom、inlogin等等。

史上最全!css命名规范(英文命名)

史上最全!css 命名规范(英文命名)一.文件命名规范 [b] 样式文件命名[/b] [quote] 主要的master.css 布局,版面layout.css 专栏columns.css 文字font.css 打印样式print.css 主题themes.css [/quote] [b]CSS ID 的命名[/b] [quote] 页头: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 menu1content menucontainer submenu sidebarIcon 注释: note 面包屑: breadcrumb ( 即页面所处位置导航提示) 容器: 内容: 搜索: 登陆: 功能区: container content search Login shop( 如购物车,收银台 ) 当前的 current[/quote] [b] 网站常用中英文对照表 [/b] [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 外 套: 主导 航: 子导航: 页 脚: 整个 页面: 页 眉: 页 脚: 商 标: 标 题: 主导航: 顶导航: 边导航: 左导航: 右导航: 旗 志: 标 语: 菜单内容 1: 菜单容量: 子菜单: 边导航图标:

移动端手机前端css命名规范

手机前端CSS命名规范 一、文件规范 1、文件均归档至约定的目录中。 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中:?基本样式库 /css/core ?通用UI元素样式库 /css/lib ?JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件,放在如下目录中: ?读书 /css/book/ ?电影 /css/movie/ ?音乐 /css/music/ ?社区 /css/sns/ ?小站 /css/site/ ?同城 /css/location/ ?电台 /css/radio/ 外联CSS文件适用于全站级和产品级通用的大文件。内联CSS文件适用于在一个或几个页面共用的CSS。另外一对具体的CSS进行文档化的整理。如: ?util-01 reset /css/core/reset.css ?util-02 通用模块容器 /css/core/mod.css ?ui-01. 喜欢按钮 /css/core/fav_btn.css ?ui-02. 视频/相册列表项 /css/core/media_item.css ?ui-03. 评星 /css/core/rating.css ?ui-04. 通用按钮 /css/core/common_button.css ?ui-05. 分页 /css/core/pagination.css ?ui-06. 推荐按钮 /css/core/rec_btn.css

?ui-07. 老版对话框 /css/core/old_dialog.css ?ui-08. 老版Tab /css/core/old_tab.css ?ui-09. 老版成员列表 /css/core/old_userlist.css ?ui-10. 老版信息区 /css/core/notify.css ?ui-11. 社区用户导航 /css/core/profile_nav.css ?ui-12. 当前大社区导航 /css/core/site_nav.css ?ui-13. 加载中 /css/lib/loading.css 2、文件引入可通过外联或内联方式引入。 ?外联方式:(类型声明type=”text/css”可以省略) ?内联方式:(类型声明type=”text/css”可以省略) ?link和style标签都应该放入head中,原则上,不允许在html上直接写样式。避免在CSS中使用@import,嵌套不要超过一层。 3、文件名、文件编码及文件大小 ?文件名必须由小写字母、数字、中划线组成 ?文件必须用UTF-8编码,使用UTF-8(非BOM),在HTML中指定UTF-8编码,在CSS中则不需要特别指定因为默认就是UTF-8。 ?单个CSS文件避免过大(建议少于300行) 二、注释规范 1、文件顶部注释(推荐使用) /* * @description: 中文说 明 * @author: name * @update: name (2013-04-13 18:32) */ 2、模块注释 /* module: module1 by 张三 */ … /* module: module2 by 张三 */ 模块注释必须单独写在一行 3、单行注释与多行注释 /* this is a short comment */ 单行注释可以写在单独一行,也可以写在行尾,注释中的每一行长度不超过40个汉字,或者80个英文字符。

CSS代码规范#(精选.)

HTML基本格式: 标题 注释:/*header start*/ 内容区域 /*header end*/ CSS 书写规范 1、用两个空格代替tab键。 2、不要在自闭合的元素尾部添加斜线。不要省略可选的结束标签。 3、对于属性的定义,确保全部用双引号,不要用单引号。 4、指定HTML的根元素的lang属性。 5、IE通过指定edge mode。通知IE采用其所支持的最新模式。 列: 6、必须声明字符编码,一般采用UTF-8。 7、引入CSS与JS时不指定type属性,因为它们都有默认值。 8、属性顺序: 8.1 class 8.2 Id、name 8.3 data-* 8.4 src、for、type、href 8.5 title、alt 8.6 aria-*、role 9、书写顺序: 9.1 位置属性(position,top,right,z-index,display,float 等) 9.2 大小(width,height,padding,margin) 9.3 文字系列(font,line-height,letter-spacing,color-text-algin 等) 9.4 背景(background,border 等) 9.5 其他(animation,transition等) 10、尽量缩写属性。 11、去掉小数点前的“0”。 12、不建议使用下划线,为了和js区分,IE6中无效而且输入的时候少按shift键。 13、不要随意使用id(应按需要使用,而不能滥用) 14、减少标签数量。 15、尽量避免使用js生成标签。通过js生成的标签让内容变得不易查找,编辑,并且降低性能. 16、对于从逗号分隔的属性值,每个逗号后面都应该插入一个空格(,box_shadow)。

CSS设计(代码)规范

UI设计(代码)规范 一.目录结构与命名规则 (1)目录结构规范 1、目录建立的原则:以最少的层次提供最清晰简洁的页面结构。 2、根目录一般只存放index.htm以及其他系统必须的文件 3、在根目录中应该按照系统的栏目结构,给每一个栏目开设一个目录,根据需要在每一个栏目的目录中开设一个images 和media 的子目录用来放置此栏目专有的图片和多媒体文件,如果这个栏目的内容特别多,又分出很多下级栏目,可以相应的再开设其他目录。根目录下的images用于存放各页面都要使用的公用图片,子目录下的images目录存放本栏目页面使用的私有图片 4、所有JS,ASP,PHP等脚本存放在根目录下的scripts目录 5、所有CGI程序存放在根目录下的cgi-bin目录 6、所有CSS文件存放在根目录下style目录 7、每个语言版本存放于独立的目录。例如:简体中文gb 8、所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录 9、temp 子目录放客户提供的各种文字图片等等原始资料,以时间为名称开设目录,将客户陆续提供的资料归类整理。 (2)文件和目录命名规范 1、文件命名的原则:以最少的字母达到最容易理解的意义。 2、每一个目录中包含的缺省html 文件,文件名统一用index.htm 3、文件名称统一用小写的英文字母、数字和下划线的组合,不得包含汉字、空格和特殊字符

4、尽量按单词的英语翻译为名称。例如:feedback(信息反馈),aboutus(关于我们) 不到万不得已不要以拼音作为目录名称 5、多个同类型文件使用英文字母加数字命名,字母和数字之间用_分隔。例如:news_01.htm。注意,数字位数与文件个数成正比,不够的用0补齐。例如共有200条新闻,其中第18条命名为news_018.htm (3)图片的命名规范 1、名称分为头尾两两部分,用下划线隔开。 2、头部分表示此图片的大类性质。 例如:放置在页面顶部的广告、装饰图案等长方形的图片我们取名:banner ;标志性的图片我们取名为:logo ;在页面上位置不固定并且带有链接的小图片我们取名为button ;在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu ;装饰用的照片我们取名:pic ;不带链接表示标题的图片我们取名:title 依照此原则类推。 3、尾部分用来表示图片的具体含义,用英文字母表示。例如:banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg. (4)css的命名规范 1,全局定义 /*{}(大括号)内为空时,除ul元素外,其他均自己定义*/ body,ul,ol,p,span,dd,dt,h1,h2,h3,h4,h5,h6{ margin:0px; padding:0px;}/*初始化元素的内联及外联*/ div{ overflow:hidden}

网页制作的目录文件及CSS命名规范

网页制作的目录文件及CSS命名规范 第一部分:目录、文件、CSS命名方式: 文件夹与文件名称、CSS样式命名、程序中的一些控件等等: 名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;目录名应以英文、拼音为主(不到万不得已不要以拼音作为目录名称,经验证明,用拼音命名的目录往往连一个月后的自己都看不懂)。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。而且当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。 例如:images(图形文件),flash(Flash文件)等。 命名方式:(性质_描素_位置_分类_数量)项相结合,采用简写、组合的方式形成通用规则。 例如: news (性质) news_title (性质_描素) news_title_top (性质_描素_位置) news_title_top_01 (性质_描素_位置_数量) news_title_top_a_01 (性质_描素_位置_分类_数量) news_title_top_b_01 (性质_描素_位置_分类_数量) 常用目录名: data(数据库) images(图片) install (安装) templets (模版) include (包含) admin (后台) rss (定阅) media (媒体) config (配置) Script (脚本) Language (语言) style (样式)等…… 常用CSS名: 页面外围控制整体布局宽度:wrapper;头:header;内容:content/container;页面主体:main;侧栏:sidebar;尾:footer等……,更多命名查看: 《div+css 命名规则》

css样式表ID命名规则

一.文件命名规范[b]样式文件命名[/b] [quote]主要的master.css 布局,版面layout.css 专栏columns.css 文字font.css 打印样式print.css 主题themes.css [/quote] [b]CSS ID 的命名[/b] [quote]页头: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] [b]网站常用中英文对照表[/b] [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

CSS命名规则

CSS-命名总结 热度2已有26 次阅读2010-8-13 23:42 |个人分类:资料库|关键词:CSS 命名 https://www.doczj.com/doc/7e10714363.html, CSS书写命名总结 一、命名原则: 不要通过视觉外观来给元素命名,而是根据功能给元素命名。 ID具有唯一性,Class具有可重复性。让所有的Class元素都成为外围ID元素的子级或孙级。网页模块化,利于网站代码的控制,维护和修改 a.外围架构使用ID控制 b.内部结构使用Class控制 二、命名规则: https://www.doczj.com/doc/7e10714363.html, a.骆驼命名法 指混合使用大小写字母来构成变量和函数的名字,首写字母小写 myData b.帕斯卡命名法 指混合使用大小写字母来构成变量和函数的名字,首写字母大写 MyData c.匈牙利命名法 标识符的名字以一个或者多个小写字母开头作为前缀,标识出变量的作用域,类型等。前缀之后的是首字母大写的一个单词或多个单词组合或者符号,该单词要指明变量的用途。txtMyData d.下划线或中划线命名法 树状结构的命名 层叠式命名 每一个逻辑断点都有一个下划线或中划线来标记 DWMenu_Insert_Animals DWMenu_Insert_Animals_Dog DWMenu_Insert_Animals_Cat DWMenu_Insert_Animals_Monkey DWMenu-Insert-Animals DWMenu-Insert-Animals-Dog DWMenu-Insert-Animals-Cat DWMenu-Insert-Animals-Monkey txt-MyData e.常量命名 SQL_SELECT_CA TEGORIES https://www.doczj.com/doc/7e10714363.html, 三、CSS推荐命名方式 [模块前缀(模块标识|区域标识)]+[功能标识]+[模块后缀(状态|位置|[A-Z]:多风格标识|[0-9]:行标识|[a-z]:列标识)] wrapperDetails

WEB前端开发规范文档+CSS命名规范

WEB前端开发规范文档+CSS命名规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录中; 2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面; 3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.; 4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名. html书写规范 1. 文档类型声明及编码: 统一为html5声明类型; 编码统一为, 书写时利用IDE实现层次分明的缩进; 2. 非特殊情况下样式文件必须外链至...之间;非特殊情况下JavaScript文件必须外链至页面底部; 3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下: Example Source Code [https://www.doczj.com/doc/7e10714363.html,]

web前端规范-CSS的命名

原则:整个项目的命名风格要统一,id说明特殊性,class说明普遍性。从模块重用和节约文件体积的角度看,建议id类应尽量减少使用。class类的命名向模块化发展。 命名风格: 常见的命名风格有:1.分隔线 css-style(不推荐);2.下划线 css_style(次推荐);3.驼峰式 cssStyle(主推荐)。 没有强制一定用哪种风格,不过同个项目中最好只使用一种风格,除非想表达特殊作用的再用多种风格,但要写好注释说明。好的命名规范也能体现出语义化。 id 和class: 什么时候用id,什么时候用class没有一个绝对的说法。这里只是提供一个参考。 对于页面的各个结构外层或者特殊部分(比如页面的布局,各个栏目),用id 来说明这个区域是什么内容。对于页面中可重用的结构或者一些常用的从属结构(比如栏目中的标题,文章,列表等),用class来说明这个小块是什么,表现怎么样。 约定:搜索search不加bar修饰, 比如左边搜索区域, 命名为: searchL。以此类推, L(左边), R(右边), T(上方), B(下方)。不管任何模块, 为避开css 过多的命名名称, 比如选项卡tab的标题区域, 用hd命名, 写法为:" .tab .hd " 所有模块, 全部采用hd和bd模式。另外, 用"Tb"代表表格的缩写,比如表单表格: formTb。所有css命名采用Java的命名规范, 既是驼峰式的命名方式, 比如"newsList"。大量模块使用雅虎的hd和bd命名思想(见‘CSS 书写’ 部分),将内层的css类命名简化,减少起名字的次数。最好不要用id类定义html的模块外观,id类的唯一性比特殊。比如在两个div中,用了相同的 id,js拿id 交互便会出现问题。

命名规则

1命名规则 (1)项目命名:ISpeakBBS (2)URL上下文命名:ISpeak (3)包命名: 1、util:系统常用的工具包 2、entity:系统实体类 3、biz:业务逻辑层 4、dao:数据访问层(包下面的接口) 5、servlet:控制层 6、filter:过滤器 (4)类命名:根据类的功能命名,如果类名只有一个单词则单词首字母大写,其余小写;如果累名由多个单词构成,则每个单词的首字母大写,其余小写。 1、entity包下面的类:主要和数据库表名相同,首字母大写 例如:Article 文章类 2、dao包下面的接口:和数据库表名一一对应,首字母大写+Dao 例如:ArticleDao 文章接口类 3、biz 包下面的业务逻辑类:和数据库表名一一对应,首字母大写+Biz 例如:ArticleBiz 文章业务逻辑类 4、servlet包下面的类:表名+Servlet,URL映射:表名(有区分是前端还 是后端管理) 例如: a)如游客或其他用户查看时:ArticleServlet,url映射:article b)如用户后台管理,ArticleAdminServlet,URL映射:user\article c)如系统后台管理:ArticleAdminServlet,URL映射:admin\article (5)webroot网站目录结构: 1、images:存放网站所有图片 2、css:存放网址所有样式 3、js:存放JavaScript脚本语言 4、upload:文件上传(以上传的时间日期再划分) 5、admin:系统网站后台文件夹 6、user:个人博客后台文件夹 (6)jsp页面:统一用小写开头。 1、网站前端: a)首页:index.jsp b)注册页面:register.html c)全站热议话题页:topicList.jsp d)文章详细页:article.jsp e)个人评论足迹页:comment.jsp f)个人首页:userIndex.jsp g)文章分类页:articleList.jsp

HTML命名规则

网页切图过程中div+css命名规则 内容:content/container 导航:nav 侧栏:sidebar 栏目:column 标志:logo 页面主体:main 广告:banner 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 搜索:search 页脚:footer 滚动:scroll 版权:copyright 友情链接:friendlink 子菜单:submenu 内容:content 标签页:tab 文章列表:list 注册:regsiter 提示信息:msg 小技巧:tips 加入:joinus 栏目标题:title 指南:guild 服务:service 状态:status 投票:vote 尾:footer 合作伙伴:partner 登录条:loginbar 页面外围控制整体布局宽度:wrapper 左右中:left right center (二)注释的写法: /* Footer */ 内容区 /* End Footer */ (三)id的命名: (1)页面结构 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 左右中:left right center 页面外围控制整体布局宽度:wrapper (2)导航 导航:nav 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary (3)功能 标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:regsiter 搜索:search 功能区:shop

史上最全的css常用class名

CSS的class、id、css文件名的常用命名 常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:copyright 滚动:scroll 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 加入:joinus 指南:guild 服务:service 注册:regsiter 状态:status 投票:vote 合作伙伴:partner (二)注释的写法: /* Footer */ 内容区 /* End Footer */ (三)id的命名: (1)页面结构 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度: wrapper 左右中:left right center (2)导航 导航:nav 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary (3)功能 标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:regsiter 搜索:search 功能区:shop 标题:title 加入:joinus 状态:status 按钮:btn 滚动:scroll 标签页:tab 文章列表:list

css命名规范

一.文件命名规范 [b]样式文件命名[/b] 重置reset.css [quote]主要的master.css 布局,版面layout.css 专栏columns.css 文字font.css 打印样式print.css 主题themes.css [/quote] [b]CSS ID 的命名[/b] [quote]页头: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] [b]网站常用中英文对照表[/b] [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

DIV标签命名规则

1. 常用的CSS命名规则 头:header 内容:content/container Chinaz 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:copyright 滚动:scroll 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 加入:joinus 指南:guild 服务:service 注册:regsiter 状态:status 投票:vote 合作伙伴:partner 2.注释的写法: 内容区 3. id的命名: (1)页面结构 容器: container 页头:header 内容:content/container 页面主体:main

页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center (2)导航 导航:nav 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary (3)功能 标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:regsiter 搜索:search 功能区:shop 标题:title 加入:joinus 状态:status 按钮:btn 滚动:scroll 标签页:tab 文章列表:list 提示信息:msg 当前的: current 小技巧:tips 图标: icon 注释:note 指南:guild 服务:service 热点:hot 新闻:news 下载:download 投票:vote 合作伙伴:partner 友情链接:link 版权:copyright

DIV+CSS规范命名大全集合

一、命名规则说明: - TOP 1)、所有的命名最好都小写 2)、属性的值一定要用双引号("")括起来,且一定要有值如 class="divcss5",id="divcss5" 3)、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整 4)、空元素要有结束的tag或于开始的tag后加上"/" 5)、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等 6)、

的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。 7)、给每一个表格和表单加上一个唯一的、结构标记id 8)、给图片加上alt标签 9)、尽量使用英文命名原则 10)、尽量不缩写,除非一看就明白的单词 DIVCSS5给大家介绍常见CSS命名和DIV CSS命名方法。 二、相对网页外层重要部分CSS样式命名: - TOP 外套 wrap ------------------用于最外层 头部 header ----------------用于头部 主要内容 main ------------用于主体内容(中部) 左侧 main-left -------------左侧布局 右侧 main-right -----------右侧布局 导航条 nav -----------------网页菜单导航条 内容 content ---------------用于网页中部主体 底部 footer -----------------用于底部 三、DIV+CSS命名参考表: - TOP 以下为CSS样式命名与CSS文件命名参考表,DIV CSS命名集合: CSS样式命名说明 网页公共命名 #wrapper 页面外围控制整体布局宽度 #container或#content 容器,用于最外层 #layout 布局 #head, #header 页头部分 #foot, #footer 页脚部分 #nav 主导航 #subnav 二级导航

CSS规范命名大全

CSS规范命名大全集合

CSS规则 一、CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列(font,line-height,letter-spacing,color-text-align等) 4.背景(background,border等) 5.其他(animation,transition等)

二、CSS书写规范 1.使用CSS缩写属性 CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。 2.去掉小数点前的“0” 3.简写命名 很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

4.16进制颜色代码缩写 有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。 5连字符CSS选择器命名规范 1).长名称或词组可以使用中横线来为选择器命名。 2).不建议使用“_”下划线来命名CSS选择器,为什么呢? 输入的时候少按一个shift键;浏览器兼容问题(比如使用_tips的选择器命名,在IE6是无效的)能良好区分JavaScript变量命名(JS变量命名是用“_”)

6.不要随意使用id id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与cla ss,所以id应该按需使用,而不能滥用。 7.为选择器添加状态前缀 有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。

CSS标准化命名规则

CSS标准化命名规则 一、文件命名规范 基本样式:base.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 XHTML-CSS写作建议 1、所有的xhtml代码小写; 2、属性的值一定要用双引号("")括起来,且一定要有值; 3、每个标签都要有开始和结束,且要有正确的层次; 4、空元素要有结束的tag或于开始的tag后加上"/"; 5、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border 等; 6、

的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询; 7、给每一个表格和表单加上一个唯一的、结构标记id; 8、给重要的区块加上注释; 9、给图片加上alt属性; 10、所有的标签必须进行合理的嵌套; 11、根元素前必须有元素,宣告使用那一种DTD; 12、根元素必须有xmlns属性来指定使用https://www.doczj.com/doc/7e10714363.html,/1999/xhtml的namespace。 三、常规书写规范及方法 1、选择DOCTYPE XHTML1.0提供了三种DTD声明可供选择: 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:

CSS规范_10

CSS规范 1.0版2009-10-10 一、总则 (2) 1.1目的及效力 (2) 1.2 CSS书写原则 (2) 二、样式重置 (2) 2.1重置代码 (2) 2.2注意事项 (3) 三、CSS书写顺序 (3) 3.1样式 (3) 3.2注意事项 (3) 四、CSS Hack (4) 4.1样式 (4) 4.2书写顺序 (4) 4.3注意事项 (4) 按住CTRL并单击目录可直接定位

一、总则 1.1目的及效力 1.制订本规范的目的:使css样式表文件标准化,具有较高的可读性,便于后期自己或他人 阅读、修改,使之开发效率提高。 2.页面制作人员必须严格遵守此规范。 3.本规范应用于2009年11月1日以后制作的项目中,不溯及以往。 4.本规范随时根据需要修订,请注意版本号的变化。当前为1.0版。 1.2 CSS样式书写总规范 1.普通企业网站样式表文件统一命名为“main.css”,对于门户型网站或大型企业网站根据 实际情况进行命名、细分。 2.由于页面采用utf-8编码所以必须在样式表文件顶部加上“@charset "utf-8";”。 3.书写样式时必须先进行样式重置。 4.书写样式时必须按照规定的顺序。 5.不同浏览器对于CSS解析认识不一样,为保证页面在各个浏览器下基本一致需要针对不 同浏览器去写不同的CSS。 6.书写样式时可以缩写的样式推荐使用缩写。 二、样式重置 2.1重置代码 /* 样式重置*/ body { margin:0; padding:0; font-size:12px; font-family:Arial,"宋体"; } form,ul,li,p,h1,h2,h3,h4,h5,h6 { margin:0; padding:0; } img { border:0; vertical-align:absbottom; } ul,li { list-style-type:none; } input, select, textarea { font-size:12px; font-family:Arial; vertical-align:absmiddle; } /* 常用功能样式*/

table标签和CSS命名规则

文件宣传 头部 标题 <body>主体 排版标记: <!--注释 段落标记 <hr />水平线 <br />换行 <center>居中 <pre>预先格式化 <div></div>定位标记 <nobr>不换行 <wbr>预先换行 字体标记: <strong></strong>加粗 <b></b>加粗 <em></em>斜体 <i></i>斜体 <tt></tt>等宽字体 <u></u>加下划线 <h1></h1>一级标题(一共有六级)<font></font>字体标记 <basefont />基准字体标记 <big></big>字体加大 <small></small>字体缩小 <strike>加删除线 <code></code>程序码 <kbd></kbd>键盘字 <samp></samp>范例 <var></var>变量 <cite></cite>斜体标记 <blockquote></blockquote>向右编排<dfn></dfn>术语定义 <sub></sub>下标记 <sup></sup>上标记 清单标记: <ul></ul>无顺序列表 <ol></ol>顺序列表 <li></li>清单项目 <menu>连项清单 <dt></dt>定义条目 <dd></dd>定义内容</p><p><table></table>表格 <caption></caption>表格标题 <tr></tr>行 <td></td>单元格 <th></th>表格头标 表单标记: <form></form>表单标记 <textarea></textarea>文本框 <input>输入类 <option></option>选项 Reset重置 Radio单选 Chickbox复选 Password密码 Submit提交 Select选择类 图像标记: <img>图形标记 连接标记 <a></a>连接 <base />基准标记 框架标记: <frameset></frameset>框架设定 <frame />窗口设定 <iframe></iframe>业内框架 <noframes></noframes>不支持框架影像标记: <map></map>影像地图名称 <bgsound />背景声音 <embed></embed>多媒体 <marquee></marquee>走马灯 <isindex>页内寻找器 <meta />开头说明 <znk>关系定义 <style></style>式样表 <span></span>自定标记</p> <div> <div>相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="7890412"><a href="/topic/7890412/" target="_blank">css命名规范</a></li> </ul> </div> </div> </div> <div class="container"> <div>文本预览</div> <div class="textcontent"> </div> </div> </div> <div class="category"> <span class="navname">相关文档</span> <ul class="lista"> <li><a href="/doc/1515970412.html" target="_blank">网页制作的目录文件及CSS命名规范</a></li> <li><a href="/doc/d616194038.html" target="_blank">样式表CSS命名规则</a></li> <li><a href="/doc/4a14522029.html" target="_blank">命名规则</a></li> <li><a href="/doc/619807562.html" target="_blank">网页布局命名规范</a></li> <li><a href="/doc/9712961973.html" target="_blank">史上最全!css命名规范(英文命名)</a></li> <li><a href="/doc/0f11606439.html" target="_blank">史上最全!css命名规范(英文命名)</a></li> <li><a href="/doc/cf4798697.html" target="_blank">网站命名规则</a></li> <li><a href="/doc/3214064687.html" target="_blank">CSS命名规则</a></li> <li><a href="/doc/fd6204462.html" target="_blank">W3C标准CSS命名规则</a></li> <li><a href="/doc/5f14749790.html" target="_blank">css命名规范</a></li> <li><a href="/doc/7d8274598.html" target="_blank">CSS规范命名大全</a></li> <li><a href="/doc/ad18780261.html" target="_blank">网页设计过程中div+css命名规则</a></li> <li><a href="/doc/1711654490.html" target="_blank">CSS设计(代码)规范</a></li> <li><a href="/doc/d313038673.html" target="_blank">CSS命名规范</a></li> <li><a href="/doc/4613788259.html" target="_blank">web前端规范-CSS的命名</a></li> <li><a href="/doc/6d7334315.html" target="_blank">css样式初始化以及名名规范</a></li> <li><a href="/doc/968062682.html" target="_blank">table标签和CSS命名规则</a></li> <li><a href="/doc/c21511442.html" target="_blank">编写CSS代码时样式命名的通用规则</a></li> <li><a href="/doc/2717366789.html" target="_blank">dic+css定义规范</a></li> <li><a href="/doc/ea17906351.html" target="_blank">CSS样式表命名规则教学教材</a></li> </ul> <span class="navname">最新文档</span> <ul class="lista"> <li><a href="/doc/0619509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0a19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9619184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3319258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d719211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a519240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9019184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8819195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8319195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7b19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7019336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6819035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6819035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4219232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2a19396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2c19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1619338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/e619066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/b019159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "78dede1e6bd97f192279e9d8"; </script> <script type="text/javascript">bdtj();</script> <footer class="footer"> <p><a href="/tousu.html" target="_blank">侵权投诉</a> © 2022 www.doczj.com <a href="/sitemap.html">网站地图</a></p> <p> <a href="https://beian.miit.gov.cn" target="_blank">闽ICP备18022250号-1</a>  本站资源均为网友上传分享,本站仅负责分类整理,如有任何问题可通过上方投诉通道反馈 <script type="text/javascript">foot();</script> </p> </footer> </body> </html>