如果你是网页设计师,如果你用的还是拼音命名,你真的落伍了内容: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标题: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.cssCSS命名规则头:header内容:content/containe尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center登录条:loginbar标志:logo广告:banner页面主体:main热点:hot新闻:news下载:download菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyright滚动:scroll内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title加入:joinus指南:guild服务:service注册:regsiter状态:status投票:vote合作伙伴:partnerXHTML文件中id的命名(1)页面结构容器: container页头:header内容:content/container页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center(2)导航导航:nav主导航:mainbav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar菜单:menu标题: 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做网页时,常会因为不会命名和命名重复而造成好多不不必要的麻烦,正确的命名的确很重要,我这里也收集了一些命名规则,发上来大家共享下。
1.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 LOGOSite 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 -->3.样式文件命名主要的master.css布局,版面layout.css专栏columns.css文字font.css打印样式print.css主题themes.css网页切图过程中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标题: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––––。