您现在的位置是：网站首页> 编程资料编程资料

CSS的class与id常用的命名规则值得收藏的CSS命名规范(规则)常用的CSS命名规则 CSS命名规则和命名方法常用的 css 命名规则(推荐)浅谈css命名规则(新手必看)CSS语义化命名方式及常用命名规则CSS书写规范、顺序和命名规则常用的CSS命名规则 web标准化设计编写CSS代码时样式的命名规则CSS 样式命名规则CSS 文件命名规则

2021-09-02 904人已围观

简介网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，本文主要介绍了CSS的class与id常用的命名规则，感兴趣的可以了解一下

网页公共命名：

#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 - - 列表
#homeepage - - 首页
#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 - - 论坛

基础的命名：

外套 wrap - - 用于最外层
头部 header - - 用于头部
主要内容 main - - 用于主体内容（中部）
左侧 main-left - - 左侧布局
右侧 main-right - - 右侧布局
导航条 nav - - 网页菜单导航条
内容 content - - 用于网页中部主体
底部 footer - - 用于底部

CSS文件命名：

master.css,style.css - - 主要的
module.css - - 模块
base.css - - 基本共用
layout.css - - 布局，版面
themes.css - - 主题
columns.css - - 专栏
font.css - - 文字、字体
forms.css - - 表单
mend.css - - 补丁
print.css - - 打印

命名建议：

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

到此这篇关于CSS的class与id常用的命名规则的文章就介绍到这了,更多相关CSS class与id命名规则内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：CSS 制作波浪效果的思路CSS实现波动水球效果的示例代码CSS Houdini实现动态波浪纹效果svg+css3做一个动感的波浪效果实现使用CSS实现逼真的水波纹点击效果使用css实现圆形波浪效果图纯CSS实现波浪移动效果的示例css3实现冲击波效果的示例代码利用css实现波纹动画效果实例一波CSS高级实用技巧小结一波CSS制作的三角形和圆形小按钮示例

下一篇：css背景和边框标签实例详解基于CSS 属性实现按钮悬停边框和背景动画集合CSS 制作带边框背景色透明的消息框css3 边框、背景、文本效果的实现代码CSS3实现多背景模拟动态边框的效果CSS控制背景图像平铺实现边框阴影效果css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果css样式div或li在ie6下背景平铺及border边框断线解决技巧 CSS新特性:圆角边框多栏Gird布局背景设置

您现在的位置是：网站首页> 编程资料编程资料

网页公共命名：

基础的命名：

CSS文件命名：

命名建议：

相关内容

点击排行

本栏推荐

猜你喜欢