本文介绍了一套常用的DIV命名规范及CSS属性的书写顺序，包括网页元素的命名建议和CSS样式的组织方式，有助于提高前端代码的可读性和维护性。
DIV命名规范
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 -
左右中：
leftrightcenter -
标题:
title
-
-
id的命名:
---
-
导航：
nav -
主导航：
mainbav -
子导航：
subnav -
顶导航：
topnav -
边导航：
sidebar -
左导航：
leftsidebar -
右导航：
rightsidebar -
菜单：
menu -
子菜单：
submenu -
标题:
title -
摘要:
summary -
容器:
container -
页头：
header -
内容：
content/container -
页面主体：
main -
页尾：
footer -
导航：
nav -
侧栏：
sidebar -
栏目：
column -
页面外围控制整体布局宽度：
wrapper -
左右中：
leftrightcenter -
页面结构
---
-
导航
-
-
-
标志：
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+字体大小"作为名称,如
-
对齐样式,使用对齐目标的英文名称,如
-
标题栏样式,使用"类别+功能"的方式命名,如
-
-
---
-
注意事项::
-
一律小写;
-
尽量用英文;
-
不加中杠和下划线;
-
尽量不缩写，除非一看就明白的单词.
-
---
-
推荐的
CSS书写顺序：-
color -
font -
text-decoration -
text-align -
vertical-align -
white-space -
other text -
content -
width -
height -
margin -
padding -
border -
background -
display -
list-style -
position -
float -
clear -
显示属性
-
自身属性
-
文本属性
-
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
