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 相关文章推荐
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
CSS 制作波浪效果的思路
HTML通过表单实现酒店筛选功能
面试必问:圣杯布局和双飞翼布局的区别
May 13 #HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 #HTML / CSS
CSS 实现多彩、智能的阴影效果
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
You might like
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
python实现雨滴下落到地面效果
2018/06/21 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
pytorch 预训练层的使用方法
2019/08/20 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
两年的个人工作自我评价
2014/01/10 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
幼儿评语大全
2014/04/30 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
Golang入门之计时器
2022/05/04 Golang