DIV命名规范

最新推荐文章于 2021-06-19 06:39:37 发布

转载最新推荐文章于 2021-06-19 06:39:37 发布 · 492 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=00jiciibb&title=DIV%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83

文章标签：

#Web丨HTML丨CSS丨Js丨

前端专栏收录该内容

493 篇文章

订阅专栏

本文详细介绍了网页设计中DIV元素的命名规范，包括常用元素如导航、标题、按钮等的命名建议，以及CSS样式的书写顺序指导，旨在提高前端开发效率与代码可读性。

DIV命名规范

- 企业
```
DIV
```
  使用频率高的命名方法
- 网页内容类
  
  ---
- - 注释的写法:
```
/* Footer */ 
```
    内容区
```
/* End Footer */
```
  - 摘要:
```
summary
```
  - 箭头：
```
arrow
```
  - 商标：
```
label
```
  - 网站标志：
```
logo
```
  - 转角/圆角：
```
 corner
```
  - 横幅广告：
```
banner
```
  - 子菜单：
```
subMenu
```
  - 搜索：
```
search
```
  - 搜索框：
```
searchBox
```
  - 登录：
```
login
```
  - 登录条：
```
loginbar
```
  - 工具条：
```
toolbar
```
  - 下拉：
```
drop
```
  - 标签页：
```
tab
```
  - 当前的：
```
current
```
  - 列表：
```
list
```
  - 滚动：
```
scroll
```
  - 服务：
```
service
```
  - 提示信息：
```
msg
```
  - 热点：
```
hot
```
  - 新闻：
```
news
```
  - 小技巧：
```
tips
```
  - 下载：
```
download
```
  - 栏目标题：
```
title
```
  - 热点：
```
hot
```
  - 加入：
```
 joinus
```
  - 注册：
```
regsiter
```
  - 指南：
```
guide
```
  - 友情链接：
```
friendlink
```
  - 状态：
```
status
```
  - 版权：
```
copyright
```
  - 按钮：
```
btn
```
  - 合作伙伴：
```
partner
```
  - 投票：
```
vote
```
  - 左右中：
```
left
```
```
right
```
```
center
```
  - 标题:
```
title
```
- id的命名:
  
  ---
- - 导航：
```
nav
```
  - 主导航：
```
mainbav
```
  - 子导航：
```
subnav
```
  - 顶导航：
```
topnav
```
  - 边导航：
```
sidebar
```
  - 左导航：
```
leftsidebar
```
  - 右导航：
```
rightsidebar
```
  - 菜单：
```
menu
```
  - 子菜单：
```
submenu
```
  - 标题:
```
title
```
  - 摘要:
```
summary
```
  - 容器:
```
container
```
  - 页头：
```
header
```
  - 内容：
```
content
```
    /
```
container
```
  - 页面主体：
```
main
```
  - 页尾：
```
footer
```
  - 导航：
```
nav
```
  - 侧栏：
```
sidebar
```
  - 栏目：
```
column
```
  - 页面外围控制整体布局宽度：
```
wrapper
```
  - 左右中：
```
left
```
```
right
```
```
center
```
  - 页面结构
    
    ---
  - 导航
- - 标志：
```
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
```
  的命名:
- - ```
  .barnews { }
```
  - ```
  .barproduct { }
```
  - ```
  .left { float:left; }
```
  - ```
  .bottom { float:bottom; }
```
  - ```
  .font12px { font-size: 12px; }
```
  - ```
  .font9px {font-size: 9pt; }
```
  - ```
  .red { color: red; }
```
  - ```
  .f60 { color: #f60; }
```
  - ```
  .ff8600 { color: #ff8600; }
```
  - 颜色:使用颜色的名称或者16进制代码,如
  - 字体大小,直接使用"font 字体大小"作为名称,如
  - 对齐样式,使用对齐目标的英文名称,如
  - 标题栏样式,使用"类别功能"的方式命名,如