熟悉DIV+CSS排版的站长们或网页设计人员,都知道规范的CSS语言会给我们带来不少好处,下面让我们分享下规范的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
2.另外在编辑样式表时可用的注释可这样写: <-- Footer --> 内容区 <-- End Footer -->
3.样式文件命名 主要的 master.css 布局,版面 layout.css 专栏 columns.css 文字 font.css 打印样式 print.css 主题 themes.css
DIV CSS名称 说明网站公用相关 电子贸易相关 Container div #container 容器 Header or banner div #header 页头部分 Main or global navigation div #mainNav 主导航 Menu #menu 菜单 Sub Menu #submenu 子菜单 Left or right side columns #sidebarA, #sidebarB 左边栏或右边栏 Main div #main 页面主体 Content div #content 内容部分 The main content area #contentMain 主要内容区域 Footer div #footer 页脚部分 Tag #tag 标签 Message #msg #message 提示信息 Tips #tips 小技巧 Vote #vote 投票 Friend Link #friendlink 友情连接 Title #title 标题 Summary #summary 摘要 Sub-navigation list #subNav 二级导航 Search input #searchInput 搜索输入框 Search output #searchOutput 搜索输出和搜索结果相似 Search #search 搜索 Search results #searchResults 搜索结果 Copyright information #copyright 版权信息 brand #branding 商标 branding-logo #brandingLogo LOGO Site information #siteinfo 网站信息 Copyright information etc. #siteinfoLegal 法律声明 Designer or other credits #siteinfoCredits 信誉 Join us #joinus 加入我们 Partnership opportunities #partner 合作伙伴 Services #service 服务 Regsiter #regsiter 注册 Status #status 状态 Products .products 产品 Products prices .productsPrices 产品价格 Products description .productsDescription 产品描述 Products review .productsReview 产品评论 Editor's review .editorReview 编辑评论 New release .newsRelease 最新产品 Publisher .publisher 生产商 Screen shot .screenshot 缩略图 FAQ .faqs 常见问题 Keyword .keyword 关键词 Blog .blog 博客 Forum .forum 论坛
|