十二、 html页面的CSS、DIV命名规则
|
名称 |
命名 |
名称 |
命名 |
名称 |
命名 |
名称 |
命名 |
|
页头 |
header |
广告条 |
banner |
登录条 |
loginbar |
标志 |
logo |
|
侧栏 |
sidebar |
菜单 |
menu |
子菜单 |
subMenu |
下拉菜单 |
dropMenu |
|
导航 |
nav |
工具条 |
toolbar |
表单 |
form |
栏目 |
column |
|
子导航 |
subNav |
箭头 |
arrow |
搜索 |
search |
搜索按钮 |
btn-search |
|
滚动条 |
scroll |
内容 |
content |
标签页 |
tab |
文章列表 |
list |
|
提示信息 |
msg |
小技巧 |
tips |
栏目标题 |
title |
链接 |
links |
|
页脚 |
footer |
服务 |
service |
热点 |
hot |
新闻 |
news |
|
下载 |
download |
注册 |
regsiter |
状态 |
status |
按钮 |
btn |
|
投票 |
vote |
合作伙伴 |
partner |
版权 |
copyright |
网站地图 |
sitemap |
|
最外层 |
wrap |
主体内容（中部） |
main |
左侧布局 |
main-left |
右侧布局 |
main-right |
|
中部主体 |
content |
底部 |
footer |
||||
|
css、js文件命名： |
|||||||
|
名称 |
命名 |
名称 |
命名 |
名称 |
命名 |
名称 |
命名 |
|
主要的 |
master.css/main.css |
布局，版面 |
layout.css |
专栏 |
columns.css |
文字 |
font.css |
|
打印样式 |
print.css |
主题 |
themes.css |
模块 |
module.css |
基本共用 |
base.css |
|
表单 |
forms.css |
补丁 |
mend.css |
||||
|
ID命名： |
|||||||
|
名称 |
命名 |
名称 |
命名 |
名称 |
命名 |
名称 |
命名 |
|
页面外围控制整体布局宽度 |
#wrapper |
容器,用于最外层 |
#container或#content |
布局 |
#layout |
页头部分 |
#head, #header |
|
页脚部分 |
#foot, #footer |
主导航 |
#nav |
二级导航 |
#subnav |
菜单 |
#menu |
|
子菜单 |
#submenu |
侧栏 |
#sideBar |
左边栏或右边栏 |
#sidebar_a, #sidebar_b |
页面主体 |
#main |
|
标签 |
#tag |
提示信息 |
#msg #message |
小技巧 |
#tips |
投票 |
#vote |
|
友情连接 |
#friendlink |
标题 |
#title |
摘要 |
#summary |
登录条 |
#loginbar |
|
搜索输入框 |
#searchInput |
热门热点 |
#hot |
搜索 |
#search |
搜索条 |
#searchBar |
|
搜索输出和搜索结果相似 |
#search_output |
搜索结果 |
#search_results |
版权信息 |
#copyright |
商标 |
#branding |
|
网站LOGO标志 |
#logo |
网站信息 |
#siteinfo |
法律声明 |
#siteinfoLegal |
信誉 |
#siteinfoCredits |
|
加入我们 |
#joinus |
合作伙伴 |
#partner |
服务 |
#service |
注册 |
#regsiter |
|
箭头 |
arr/arrow |
指南 |
#guild |
网站地图 |
#sitemap |
列表 |
#list |
|
首页 |
#homepage |
二级页面子页面 |
#subpage |
工具条 |
#tool, #toolbar |
下拉 |
#drop |
|
下拉菜单 |
#dorpmenu |
状态 |
#status |
滚动 |
#scroll |
标签页 |
.tab |
|
居左、中、右 |
.left .right .center |
新闻 |
.news |
下载 |
.download |
广告条(顶部广告条) |
.banner |
|
电子贸易相关： |
|||||||
|
名称 |
命名 |
名称 |
命名 |
名称 |
命名 |
名称 |
命名 |
|
产品 |
.products |
产品描述 |
.products_description |
编辑评论 |
.editor_review |
生产商 |
.publisher |
|
产品价格 |
.products_prices |
产品评论 |
.products_review |
最新产品 |
.news_release |
缩略图 |
.screenshot |
|
常见问题 |
.faqs |
关键词 |
.keyword |
博客 |
.blog |
论坛 |
.forum |
http://www.cnblogs.com/rising-fay/archive/2013/02/25/2932592.html
67. 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
==========
68. 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
======
69. CSS+DIV的命名规则：
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
友情链接:friendLink
页脚:footer
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyRight
1.CSSID的命名
外套:wrap
主导航:mainNav
子导航:subnav
页脚:footer
整个页面:content
页眉:header
页脚:footer
商标:label
标题:title
主导航:mainNav(globalNav)
顶导航:topnav
边导航:sidebar
左导航:leftsideBar
右导航:rightsideBar
旗志:logo
标语:banner
菜单内容1:menu1Content
菜单容量:menuContainer
子菜单:submenu
边导航图标:sidebarIcon
注释:note
面包屑:breadCrumb(即页面所处位置导航提示)
容器:container
内容:content
搜索:search
登陆:login
功能区:shop(如购物车，收银台)
当前的current
2.样式文件命名
主要的:master.css
布局版面:layout.css
专栏:columns.css
文字:font.css
打印样式:print.css
主题:themes.css
说明：均为class，需要扩展，则在当前命名内以“_“(下划线)后缀自定名称。
我习惯称列表页为list，新闻列表则为newslist，图片列表为piclist，
内容页为view，
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner