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.0 图形构成实例练习二
Mar 19 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
CSS 制作波浪效果的思路
HTML通过表单实现酒店筛选功能
面试必问:圣杯布局和双飞翼布局的区别
May 13 #HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 #HTML / CSS
CSS 实现多彩、智能的阴影效果
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
You might like
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
在Python的web框架中配置app的教程
2015/04/30 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
Python二元赋值实用技巧解析
2019/10/25 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Python try except finally资源回收的实现
2021/01/25 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
小区停车场管理制度
2014/01/27 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript