一、命名规则说明:
1)、所有的命名最好都小写
2)、属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
3)、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
4)、空元素要有结束的tag或于开始的tag后加上"/"
5)、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
6)、<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
7)、给每一个表格和表单加上一个唯一的、结构标记id
8)、给图片加上alt标签
9)、尽量使用英文命名原则
10)、尽量不缩写,除非一看就明白的单词
二、相对网页外层重要部分CSS样式命名
外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容(中部)
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部
页面结构命名
- page:代表整个页面,用于最外层。
- wrap:外套,将所有元素包在一起的一个外围包,用于最外层
- wrapper:页面外围控制整体布局宽度,用于最外层
- container:一个整体容器,用于最外层
- head、header:页头区域,用于头部
- nav:导航条
- content:内容,网站中最重要的内容区域,用于网页中部主体
- main:网站中的主要区域(表示最重要的一块位置),用于中部主体内容
- column:栏目
- sidebar:侧栏
- foot、footer:页尾、页脚。网站一些附加信息放置区域,(或命名为copyright)用于底部
导航命名
- nav、navbar、navigation、nav-wrapper:导航条或导航包,代表横向导航
- topnav:顶部导航
- mainbav:主导航
- subnav:子导航
- sidebar:边导航
- leftsidebar 或 sidebar_a :左导航
- rightsidebar 或 sidebar_b:右导航
- title:标题
- summary:摘要/li>
- menu:菜单。区域包含一般的链接和菜单
- submenu:子菜单
- drop:下拉
- dorpmenu:下拉菜单
- links:链接菜单
-
左右中: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
功能命名
- logo:标记网站logo标志
- banner:标语、广告条、顶部广告条
- login:登陆,(例如登录表单:form-login)
- loginbar:登录条
- regsiter:注册
- tool、toolbar:工具条
- search:搜索
- searchbar:搜索条
- searchlnput:搜索输入框
- shop:功能区,表示现在的
- icon:小图标
- label:商标
- homepage:首页
- subpage:二级页面子页面
- hot:热门热点
- list:文章列表,(例如新闻列表:list-news)
- scroll:滚动
- tab:标签
- sitemap:网站地图
- msg 或 message:提示信息
- current:当前的
- joinus:加入
- status:状态
- btn:按钮,(例如搜索按钮可写成:btn-search)
- tips:小技巧
- note:注释
- guild:指南
- arr、arrow:标记箭头
- service:服务
- breadcrumb:(即页面所处位置导航提示)
- download:下载
- vote:投票
- siteinfo:网站信息
- partner:合作伙伴
- link、friendlink:友情链接
- copyright:版权信息
- siteinfoCredits:信誉
- siteinfoLegal:法律信息
-
登录条: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
CSS样式命名
- 对齐样式命名:left(左边内容)、center(中间内容)、right(右边内容)等;
- 颜色英文命名:red(红色)、green(绿色)、yellow(黄色),又或者border_red(红色边框)等;
- 颜色代码命名:f00(红色)、ff0(黄色)、f90(橙色)等;
- 文字大小命名:font12px(字体12像素)、font16px(字体16像素)等;
- 页面线条命名:line_x (横线)、line_y (纵线)或 line_red(红线)、line_black(黑线)
- 图片图标命名:pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
- 页面广告命名:ad_01、ad_02
- 背景框架命名:nav_bg(代表导航条的背景图片位置)、tool_bg(代表工具栏的背景图片位置)
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
CSS样式表命名
- index.css:单独为首页建立样式
- head.css:头部样式,多个页面头部设计风格相同时使用。
- base.css:共用样式。
- style.css:独立页面所使用的样式文件。
- global.css:页面样式基础,全局公用样式,页面中必须包含。
- layout.css:布局、版面样式,公用类型较多时使用,一般用在首页级页面和产品类页面中
- module.css:模块,用于产品类页,也可与其它样式配合使用。
- master.css:主要的样式表
- columns.css:专栏样式
- themes.css:主体样式
- forms.css:表单样式
- mend.css:补丁,基于以上样式进行的私有化修补。
DIV+CSS命名参考表
CSS样式命名 | 说明 |
---|---|
网页公共命名 | |
#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 | 搜索 |
#search_output | 搜索输出和搜索结果相似 |
#searchBar | 搜索条 |
#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_prices | 产品价格 |
.products_description | 产品描述 |
.products_review | 产品评论 |
.editor_review | 编辑评论 |
.news_release | 最新产品 |
.publisher | 生产商 |
.screenshot | 缩略图 |
.faqs | 常见问题 |
.keyword | 关键词 |
.blog | 博客 |
.forum | 论坛 |
CSS文件命名 | 说明 |
---|---|
master.css,style.css | 主要的 |
module.css | 模块 |
base.css | 基本共用 |
layout.css | 布局,版面 |
themes.css | 主题 |
columns.css | 专栏 |
font.css | 文字、字体 |
forms.css | 表单 |
mend.css | 补丁 |
print.css | 打印 |
通常我们最常用主要命名有:wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)
、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。其它可根据自己需要选择性使用。
DIVCSS5建议:主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名。