• 懒鸟飞:精品网站源码、帝国cms模板专业分享平台

网页设计过程中div+css命名规则


做网页时,常会因为不会命名和命名重复而造成好多不不必要的麻烦,正确的命名的确很重要,我这里也收集了一些命名规则,发上来大家共享下。 
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 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 --> 
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
 
QQ在线咨询
QQ客服
淘宝官网