DIV+CSS规范命名大全集合

网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容篇。

常用DIV+CSS命名大全集合，即CSS命名规则

DIV CSS命名目录

命名规则说明
重要CSS命名
CSS命名参考表
命名技巧

我们开发CSS+DIV网页（Xhtml）时候,比较困惑和纠结的事就是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	打印

CSS命名其它说明:

DIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)
、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用。

DIVCSS5建议：主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名。

2.CSS样式文件命名如下

主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

四、英文命名技巧： - TOP

如果遇到不常用的，可以借助翻译工具进行翻译取其英文命名。
推荐使用谷歌在线翻译工具：http://translate.google.cn/
谷歌翻译工具介绍：http://www.divcss5.com/css-tool/t346.shtml

也许你需要了解一下css引用到html方法

以上为DIV+CSS的命名规则总结，相信通过规范的CSS命名给你以后网站网页的维护带来方便。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/jiqiao/j4.shtml

转载于:https://www.cnblogs.com/leeshine-luo/p/5248338.html

DIV+CSS规范命名大全集合相关推荐

2021前端最新DIV+CSS规范命名大全集合
我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明: - TOP 所有的命名最好都小写属性的 ...
DIV+CSS规范命名集合
我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 命名规则说明: 1).所有的命名最好都小写 2).属性的值一 ...
web开发 DIV+CSS规范命名集合
我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 命名规则说明: 1).所有的命名最好都小写 2).属性的值一 ...
DIV+CSS规范命名
一.命名规则说明: 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="di ...
div+css中命名规范
上次给别人演示div的效果时,写了css样式却一直不能呈现,最后不小心发现自己在写css样式时候,给一个class命名为数字开头的名称,才想起来自己去年刚学习样式表时候也出现此问题,最后被我解决掉的, ...
有利于SEO的div+CSS的命名规则小结（技巧）
一.CSS文件及样式命名 1.CSS文件命名规范全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print. ...
html 中div的下划线,div css布局命名时尽量避免下划线
一直习惯了在命名css样式名时使用下划线"_"做为单词的分隔符,这也是在写js时惯用的写法. 用过css hack的朋友应该知道,用下划线命名也是一种hack,如使用"_ ...
html div代码大全,DIV+CSS 常用代码大全
* html .classdao {} 6.0 *+html .classdao {} 7.0 DISPLAY: block;块状元素注释代码里面放中文会引起多出行或着很多不确认因素文字溢出和浮动 ...
css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

DIV+CSS规范命名大全集合

一、命名规则说明： - TOP

二、相对网页外层重要部分CSS样式命名： - TOP

三、DIV+CSS命名参考表： - TOP

四、英文命名技巧： - TOP

DIV+CSS规范命名大全集合相关推荐

最新文章

热门文章