搜档网
当前位置:搜档网 › CSS相关命名规范

CSS相关命名规范

CSS相关命名规范
CSS相关命名规范

CSS 相关命名规范 在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和扩展。由于Web 项目开发的分散性、独立性、整合的交互性等,所以定制一套完整的约定和规则显得尤为重要。特制定以下CSS 命名规范文档作。

1.0 CSS 样式文件命名

如果在制作中遇到建立样式表文件时,尽量分类建样式表并以下文件名命名并统一放在【css 】文件夹里:

主要的 [main.css ] 布局,版面 [layout.css ] 专栏 [columns.css ] 文字样式的定义 [font.css ] 打印样式 [print.css ] 链接样式 [link.css ] 主题 [themes.css ] 表格 [table.css ] 基本公用 [base.css ] 表单 [forms.css ] 补丁 [mend.css ]

2.0 图片的命名与书写规范

图片的命名原则名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质例如广告其它图片根据具体需求来取名

、标志、菜单、按钮等等。

放置在页面顶部的广告、装饰图案等长方形的图片取名: banner 标志性的图片取名为: logo

在页面上位置不固定并且带有链接的小图片我们取名为: button

在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名: menu 装饰用的照片我们取名: pic

不带链接表示标题的图片我们取名: title

下面是几个范例:

banner_sohu.gif 、banner_sina.gif、menu_aboutus.gif 、menu_job.gif、title_news.gif、logo_police.gif、logo_national.gif 、pic_people.jpg 。

3.0 CSS样式表注释书写规范

3.1、直接写于属性值后面,如:

.search{border:1px solid #fff;/*定义搜索输入框边框*/

background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/} 3.2、整段注释:

分别在开始及结束地方加入注释,如:

/*=====搜索条=====*/

.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}

/*=====搜索条结束=====*/

3.3、协助注释

非作者维护时所加入的表示修改时间、修改人等标识信息。

在区域注释或单行注释的基础上加上修改人和修改时间等信息。

例(区域注释):

...

/*=S 注释内容[修改人和修改时间]*/

.class{...}

.class{...}

/*=E 注释内容[修改人和修改时间]*/

例(单行注释):

...

.class{

/*注释内容[修改人和修改时间]*/

...

}

4.0 常用CSS命名参考

页头:[header ] 登录条: [loginbar] 标志: [logo] 侧栏: [sidebar]

广告: [banner] 导航: [nav]

子导航:[subnav] 菜单: [menu]

子菜单:[submenu] 搜索: [search]

滚动: [scroll] 页面主体:[main]

内容: [content] 标签页: [tab]

小技巧:[tips] 栏目标题:[title]

加入: [joinus] 指南: [guild]

服务: [service] 热点: [hot]

新闻: [news] 下载: [download] 注册: [regsiter] 状态: [status]

按钮: [button] 投票: [vote]

合作伙伴:[partner] 友情链接:[friendlink] 页脚: [footer] 版权: [copyright] 外套:[wrap] 主导航:[mainnav] 子导航:[subnav] 页脚: [footer]

整个页面:[content] 顶导航:[topnav]

边导航:[sidebar] 左导航:[leftsidebar] 右导航:[rightsidebar] 标志:[logo]

注释:[note] 搜索:[search]

登陆:[Login] 提示信息:[msg]

注意:命名大部分尽量用class,把ID尽量留给程序;命名方式使用“类别+功能”的方式(.braNews{} .barProduct{})。

5.0 注意事项:

5.1. id和class命名采用该版块的英文单词或组合命名,并第一个单词小写,第二个单词首个字母大写,如:newRelease(最新产品/new+Release)

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

5.2. CSS样式表各区块用注释说明

5.4. 不用加中杠和下划线

5.5. 尽量不缩写,除非一看就明白的单词

5.6、关于高度的问题

如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。

史上最全!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.sodocs.net/doc/0a7949686.html, CSS书写命名总结 一、命名原则: 不要通过视觉外观来给元素命名,而是根据功能给元素命名。 ID具有唯一性,Class具有可重复性。让所有的Class元素都成为外围ID元素的子级或孙级。网页模块化,利于网站代码的控制,维护和修改 a.外围架构使用ID控制 b.内部结构使用Class控制 二、命名规则: https://www.sodocs.net/doc/0a7949686.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.sodocs.net/doc/0a7949686.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.sodocs.net/doc/0a7949686.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.sodocs.net/doc/0a7949686.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> <div class="category"> <h2 class="navname">相关文档</h2> <ul class="lista"> <li><a href="/doc/4d16366661.html" target="_blank">HTML命名规则</a></li> <li><a href="/doc/6b9973483.html" target="_blank">DIV CSS网页布局常用的一些命名规则和书写</a></li> <li><a href="/doc/a49522076.html" target="_blank">dreamweaver中css的命名规则</a></li> <li><a href="/doc/d93512394.html" target="_blank">CSS命名+html标签属性大全</a></li> <li><a href="/doc/193921900.html" target="_blank">移动端手机前端css命名规范</a></li> <li><a href="/doc/4f293426.html" target="_blank">WEB前端开发规范文档+CSS命名规范</a></li> <li><a href="/doc/651069987.html" target="_blank">DIV标签命名规则</a></li> <li><a href="/doc/7018000327.html" target="_blank">CSS标准化命名规则</a></li> <li><a href="/doc/be4402578.html" target="_blank">CSS规范命名大全概论</a></li> <li><a href="/doc/da16194038.html" target="_blank">样式表CSS命名规则</a></li> <li><a href="/doc/1615970412.html" target="_blank">网页制作的目录文件及CSS命名规范</a></li> <li><a href="/doc/4b14522029.html" target="_blank">命名规则</a></li> <li><a href="/doc/669807562.html" target="_blank">网页布局命名规范</a></li> <li><a href="/doc/9112961973.html" target="_blank">史上最全!css命名规范(英文命名)</a></li> <li><a href="/doc/c94798697.html" target="_blank">网站命名规则</a></li> <li><a href="/doc/0e11606439.html" target="_blank">史上最全!css命名规范(英文命名)</a></li> <li><a href="/doc/f46204462.html" target="_blank">W3C标准CSS命名规则</a></li> <li><a href="/doc/3d14064687.html" target="_blank">CSS命名规则</a></li> <li><a href="/doc/5f14749790.html" target="_blank">css命名规范</a></li> <li><a href="/doc/7e8274598.html" target="_blank">CSS规范命名大全</a></li> </ul> <h2 class="navname">最新文档</h2> <ul class="lista"> <li><a href="/doc/f419253550.html" target="_blank">雅思阅读之选词填空题</a></li> <li><a href="/doc/9219165046.html" target="_blank">雅思阅读填空题例题详解</a></li> <li><a href="/doc/7819317404.html" target="_blank">雅思阅读真题附答案及解析</a></li> <li><a href="/doc/5d19338369.html" target="_blank">雅思阅读真题附答案及解析</a></li> <li><a href="/doc/4719212436.html" target="_blank">雅思阅读14类题型解题技巧之Summary</a></li> <li><a href="/doc/1919318526.html" target="_blank">雅思阅读之填空题技巧归纳</a></li> <li><a href="/doc/1019318527.html" target="_blank">雅思阅读总结摘要题型最全解析一劳永逸一篇文</a></li> <li><a href="/doc/f019253549.html" target="_blank">美术教师求职简历【三篇】</a></li> <li><a href="/doc/e819046316.html" target="_blank">美术专业研究生简历自荐信5篇</a></li> <li><a href="/doc/e719046317.html" target="_blank">美术老师简历(10篇)</a></li> <li><a href="/doc/db19192408.html" target="_blank">美术老师求职简历【三篇】</a></li> <li><a href="/doc/9c19165045.html" target="_blank">2021美术专业求职个人简历模板3篇</a></li> <li><a href="/doc/6319015825.html" target="_blank">美术个人简历模板范文</a></li> <li><a href="/doc/4b19212434.html" target="_blank">美术专业求职简历范文3篇</a></li> <li><a href="/doc/4e19212435.html" target="_blank">美术老师简历模板</a></li> <li><a href="/doc/3b19239429.html" target="_blank">美术设计师个人简历</a></li> <li><a href="/doc/2a19377072.html" target="_blank">美术生个人简历范文</a></li> <li><a href="/doc/1619318524.html" target="_blank">美术专业个人简历自荐信5篇大全</a></li> <li><a href="/doc/1519318525.html" target="_blank">应聘美术教师个人简历5篇</a></li> <li><a href="/doc/0519490064.html" target="_blank">美术个人简历范文</a></li> </ul> </div> </div> <script> var sdocid = "067cabea19e8b8f67c1cb9fe"; </script> <div class="footer"> <p>© 2013-2022 www.sodocs.net  <a href="/sitemap.html">站点地图</a> | <a href="/tousu.html" target="_blank">侵权投诉</a></p> <p><a href="https://beian.miit.gov.cn/">闽ICP备11023808号-8</a>  本站资源均为网友上传分享,本站仅负责收集和整理,有任何问题请在对应网页下方投诉通道反馈<script type="text/javascript">tj();</script></p> </div> </div> </body> </html>