网页设计过程中一般命名规则
2017-02-12 00:00
239 查看
由--学无止境--整理
www.nmgzlt.com/blog
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 标题：title
加入：joinus 状态：status 按钮：btn 滚动：scroll
标签页：tab 文章列表：list 提示信息：msg当前的: current
小技巧：tips 图标: icon 注释：note 指南：guild
服务：service热点：hot 新闻：news 下载：download
投票：vote 合作伙伴：partner友情链接：link 版权：copyright
(四)class 的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2) 字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事项:（）
1.一律小写;
2.尽量用英文;
3.统一用中“-”;
4.尽量不缩写，除非一看就明白的单词.
主要的master.css 模块 module.css基本共用 base.css
主 题 themes.css专栏 columns.css 打印 print.css
文 字 font.css 表单 forms.css 补丁 mend.css
布局，版面 layout.css
CSS命名规则
头：header尾：footer 导航：nav
内容：content/containe侧栏：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
XHTML文件中id的命名
(1)页面结构
容器: container页头：header内容：content/container
页面主体：main页尾：footer 侧栏：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
投票：votet合作伙伴：partner 友情链接：link
版权：copyright
做网页时，常会因为不会命名和命名重复而造成好多不不必要的麻烦，正确的命名的确很重要，我这里也收集了一些命名规则，发上来大家共享下。
.CSS ID 的命名
外 套：wrap 主导航：mainnav 子导航：subnav 页 脚：footet 整个页面：content 页 眉：header 页 脚：footer 商 标：label 标 题：title
主导航：nav（mainnav/globalnav） 顶导航：topnav
边导航：sidebar左导航：leftsidebar 右导航：rightsidebar当前位置：loc 旗 志：logo 标 语：banner菜单内容1： menu1 content 菜单容量：menu container
子菜单：submenu 边导航图标：sidebarIcon 许可证：licence
注释：note面包屑：breadcrumb(即页面所处位置导航提示）
容器：container内容：content 搜索：search
登陆：Login功能区：shop(如购物车，收银台)当前的current
网站公用相关
Container div #container容器
Header or banner div #header页头部分
Main or global navigation div #main-nav 主导航
Menu #menu 菜单
Sub Menu #submenu 子菜单
Left or right side columns #sidebar-a, #sidebar-b左边栏或右边栏
Main div #main页面主体
Content div #content内容部分
The main content area #content-main主要内容区域
Footer div #footer页脚部分
Tag #tag标签
Message #msg #message提示信息
Tips #tips 小技巧
Vote #vote投票
Friend Link #friendlink友情连接
Title #title 标题
Summary #summary摘要
Sub-navigation list #sub-nav二级导航
Search input #search-input搜索输入框
Search output #search-output搜索输出和搜索结果相似
Search #search搜索
Search results #search-results搜索结果
Copyright information #copyright版权信息
brand #branding 商标
branding-logo #branding-logo LOGO
Site information #siteinfo网站信息
Copyright information etc. #siteinfo-legal 法律声明
Designer or other credits #siteinfo-credits信誉
Join us #joinus加入我们
Partnership opportunities #partner合作伙伴
Services #service服务
Regsiter #regsiter注册
Status #status状态
电子贸易相关
Products .products产品
Products prices .products-prices产品价格
Products description .products-description产品描述
Products review .products-review产品评论
Editor's review .editor-review编辑评论
New release .news-release最新产品
Publisher .publisher生产商
Screen shot .screenshot缩略图
FAQ .faqs 常见问题
Keyword .keyword关键词
Blog .blog博客
Forum .forum 论坛
2.另外在编辑样式表时可用的注释可这样写：
<-- Footer -->
内容区
<-- End Footer -->
www.nmgzlt.com/blog
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 标题：title
加入：joinus 状态：status 按钮：btn 滚动：scroll
标签页：tab 文章列表：list 提示信息：msg当前的: current
小技巧：tips 图标: icon 注释：note 指南：guild
服务：service热点：hot 新闻：news 下载：download
投票：vote 合作伙伴：partner友情链接：link 版权：copyright
(四)class 的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2) 字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事项:（）
1.一律小写;
2.尽量用英文;
3.统一用中“-”;
4.尽量不缩写，除非一看就明白的单词.
主要的master.css 模块 module.css基本共用 base.css
主 题 themes.css专栏 columns.css 打印 print.css
文 字 font.css 表单 forms.css 补丁 mend.css
布局，版面 layout.css
CSS命名规则
头：header尾：footer 导航：nav
内容：content/containe侧栏：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
XHTML文件中id的命名
(1)页面结构
容器: container页头：header内容：content/container
页面主体：main页尾：footer 侧栏：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
投票：votet合作伙伴：partner 友情链接：link
版权：copyright
做网页时，常会因为不会命名和命名重复而造成好多不不必要的麻烦，正确的命名的确很重要，我这里也收集了一些命名规则，发上来大家共享下。
.CSS ID 的命名
外 套：wrap 主导航：mainnav 子导航：subnav 页 脚：footet 整个页面：content 页 眉：header 页 脚：footer 商 标：label 标 题：title
主导航：nav（mainnav/globalnav） 顶导航：topnav
边导航：sidebar左导航：leftsidebar 右导航：rightsidebar当前位置：loc 旗 志：logo 标 语：banner菜单内容1： menu1 content 菜单容量：menu container
子菜单：submenu 边导航图标：sidebarIcon 许可证：licence
注释：note面包屑：breadcrumb(即页面所处位置导航提示）
容器：container内容：content 搜索：search
登陆：Login功能区：shop(如购物车，收银台)当前的current
网站公用相关
Container div #container容器
Header or banner div #header页头部分
Main or global navigation div #main-nav 主导航
Menu #menu 菜单
Sub Menu #submenu 子菜单
Left or right side columns #sidebar-a, #sidebar-b左边栏或右边栏
Main div #main页面主体
Content div #content内容部分
The main content area #content-main主要内容区域
Footer div #footer页脚部分
Tag #tag标签
Message #msg #message提示信息
Tips #tips 小技巧
Vote #vote投票
Friend Link #friendlink友情连接
Title #title 标题
Summary #summary摘要
Sub-navigation list #sub-nav二级导航
Search input #search-input搜索输入框
Search output #search-output搜索输出和搜索结果相似
Search #search搜索
Search results #search-results搜索结果
Copyright information #copyright版权信息
brand #branding 商标
branding-logo #branding-logo LOGO
Site information #siteinfo网站信息
Copyright information etc. #siteinfo-legal 法律声明
Designer or other credits #siteinfo-credits信誉
Join us #joinus加入我们
Partnership opportunities #partner合作伙伴
Services #service服务
Regsiter #regsiter注册
Status #status状态
电子贸易相关
Products .products产品
Products prices .products-prices产品价格
Products description .products-description产品描述
Products review .products-review产品评论
Editor's review .editor-review编辑评论
New release .news-release最新产品
Publisher .publisher生产商
Screen shot .screenshot缩略图
FAQ .faqs 常见问题
Keyword .keyword关键词
Blog .blog博客
Forum .forum 论坛
2.另外在编辑样式表时可用的注释可这样写：
<-- Footer -->
内容区
<-- End Footer -->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DIV+CSS 之 网页切图过程中div+css命名规则
- 网页切图过程中dic+css命名规则(适合菜鸟)
- 网页设计常用的CSS和ID命名规则
- [转]网页设计中常用的CSS命名规则整理
- 网页切图过程中div+css命名规则参考
- 网页切图过程中div+css命名规则
- 建站DIV+CSS 之网页切图过程中div+css命名规则
- 网页设计中常用的CSS命名规则整理
- web标准化设计：常用的CSS命名规则
- [FxCop.设计规则]10. 类型应该被声明在命名空间中
- webdesignerwall.com 的网页设计过程
- 病毒命名的一般规则
- 程序设计命名规则
- 网页标题设计原则与一般规律
- 网页设计65条规则
- DIVCSS网页布局常用的一些命名规则和书写
- web标准设计:常用的CSS命名规则
- 一个比较有效的存储过程命名规则
- [FxCop.设计规则]2. 程序集应该拥有有效的强命名
- 常用的CSS命名规则 (web标准化设计)