DIV+CSS命名规范

在一个内容较多的HTML页面中，需要设计许多不同的框架，再为这些不同的框架及内容进行分类，给予相应的名称，从而使得网页结构更加清晰，也为工作提供了方便。许多新手朋友在设计一个HTML文件时，可能只会依据自己的想法随便给一些简单的名称，但若是一味的乱起名称，不仅会让团队的伙伴看不明白，还会导致标签名称混乱，这样会使得代码维护十分困难，是非常不利于管理的。所以我们在设计整个网站，还是一个单独的HTML页面，都应该要有良好的命名规则。在本文中，主要讲解CSS命名规则，这也包括了对HTML标签命名。

文件名称必须由英文字母开头，通常命名的规则是根据内容的分类和框架的类型翻译成英文单词来命名，例如：div id=”nav”（表示为这个div是个导航条），所有单词应当用小写字母，名称中可以使用数字，或下划线，例如：div=”main_piclist”（表示主要内容下的图片列表）、div=”nav_bg.jpg”（表示导航条的背景图），还可以使用中划线进行名称之间的连接，例如：div=”main-left”（表示左侧内容的布局）所有命名要尽量避免使用中文字符，要以最少的字母达到最容易理解的含义，除非一看即懂，否则尽量不缩写。

HTML标签的命名/CSS标准化命名大全

页面结构命名

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：链接菜单

功能命名

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：法律信息

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（代表工具栏的背景图片位置）

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命名规范相关推荐

div+css命名规范大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么 ...
[转]HTML DIV+CSS 命名规范大全
原文链接常用DIV+CSS命名大全集合,即CSS命名规则我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. ...
DIV+CSS 命名规范
常用的CSS命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper ...
一些DIV+CSS 命名规范
外套: wrap 主导航: mainnav 子导航: subnav 页脚: footet 整个页面: content 页眉: header 页脚: footer 商标: label 标题: ...
网页制作中规范使用DIV+CSS命名规则（转）
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则内容如下: 页头:header 如:#header{属性:属性值;}或.h ...
转载--让搜索引擎优化(SEO)更有效 CSS+DIV标签命名规范
转载--让搜索引擎优化(SEO)更有效 CSS+DIV标签命名规范让搜索引擎优化(SEO)更有效 CSS+DIV标签命名规范搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很关键的步骤 ...
css命名规范和书写规范
1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(f ...
css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发来源 | web前端开发我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
我认为最节省时间的CSS命名规范
CSS命名规范一 js中对变量的命名最好使用camel case驼峰式命名法,但CSS中更适用于red-box命名规范. CSS命名规范二 BEM命名规范 B=>block E=>elem ...
DIV+CSS 之网页切图过程中div+css命名规则
网页切图过程中div+css命名规则内容:content/container 导航:nav 侧栏:sidebar 栏目:column 标志:logo 页面主体:main 广告:banner 热点:h ...

DIV+CSS命名规范

DIV+CSS命名规范相关推荐

最新文章

热门文章