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教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
CSS 制作波浪效果的思路
HTML通过表单实现酒店筛选功能
面试必问:圣杯布局和双飞翼布局的区别
May 13 #HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 #HTML / CSS
CSS 实现多彩、智能的阴影效果
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
You might like
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
Js面试算法详解
2018/04/08 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
python简单贪吃蛇开发
2019/01/28 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
易程科技软件测试笔试
2013/03/24 面试题
求职信的最佳写作思路
2014/02/01 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
环保倡议书范文
2014/05/12 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
推普标语口号大全
2015/12/26 职场文书