网页设计过程中一般命名规则
由--学无止境--整理
lt/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
注释：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 合作伙伴html网页设计的标题
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 -->
lt/blog

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。