CSS命名规则
头: header
内容: content/containe
尾: 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
XHTML文件中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
做网页时,常会因为不会命名和命名重复而造成好多不不必要的麻烦,正确的命名的确很重要,我这里也收集了一些命名规则,发上来大家共享下。
1.CSS ID 的命名
外 套: wrap
主导航: mainnav
子导航: subnav
页 脚: footet
整个页面: content
页 眉: header
页 脚: footer
商 标: label
标 题: title
主导航: nav(mainnav/globalnav)
顶导航: topnav
边导航: sidebar
左导航: leftsidebar
右导航: rightsidebar
当前位置: loc
旗 志: logo
标 语: banner
菜单内容: menu1 content
菜单容量: menu container
子菜单: submenu
边导航图标: sidebarIcon
注释: note
面包屑: breadcrumb(即页面所处位置导航提示)
容 器: container
内容: content
搜索: search
登陆: Login
功能区: shop(如购物车,收银台)
当前的 current
1)网站公用相关
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 状态
2)电子贸易相关
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
浙公网安备 33010602011771号