CSS的class与id常用的命名规则


Posted in HTML / CSS onMay 18, 2021

网页公共命名:

  • #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的class与id常用的命名规则

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命名规则内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
CSS 制作波浪效果的思路
HTML通过表单实现酒店筛选功能
面试必问:圣杯布局和双飞翼布局的区别
May 13 #HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 #HTML / CSS
CSS 实现多彩、智能的阴影效果
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
You might like
PHP通用检测函数集合
2011/02/08 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
js 省地市级联选择
2010/02/07 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
python写一个md5解密器示例
2018/02/23 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
简单了解python PEP的一些知识
2019/07/13 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
django admin 添加自定义链接方式
2020/03/11 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
专业技术职务聘任书
2014/03/29 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
食品销售计划书
2014/04/26 职场文书
代办委托书怎么写
2014/08/01 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python