HTML,CSS的class与id命名规则

个人博客点这里

最重要的部分先说(命名书写格式)

常见的格式有:连接符(search-btn)、下划线、全小(searchbox)、小驼峰(searchBox)。

现在用得多广泛的还是第一种使用连接符,易读、书写方便。

在这里小编推荐大家id使用下划线_来进行连接,class用中划线-来进行连接

网页公共命名:

  • #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 - - 打印

原文链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/455187.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

主打“云安全” 迅雷系帝恩思登陆新三板

ZD至顶网安全频道 06月14日 综合消息: 6月14日上午,帝恩思(837018)敲响了登陆新三板的钟声。作为帝恩思的重要股东,迅雷(NASDAQ:XNET)CEO邹胜龙与帝恩斯董事长王宇杰、总经理许渊培等人一同参加了这一仪式。 帝恩斯是一…

UESTC 1636 梦后楼台高锁,酒醒帘幕低垂

题意&#xff1a;求一条路径&#xff0c;使得这条边连接1到n&#xff0c;求边权值的最大值与最小值的差 题解&#xff1a;最小生成树&#xff0c;对边权排序&#xff0c;可以枚举边的最大和最小的值&#xff0c;判断能否使得1和n连通 #include <bits/stdc.h> #define ll …

wav文件格式分析详解

wav文件格式分析详解 作者&#xff1a;曹京日期&#xff1a;2006年7月17日 一、综述 WAVE文件作为多媒体中使用的声波文件格式之一&#xff0c;它是以RIFF格式为标准的。RIFF是英文Resource Interchange File Format的缩写&#xff0c;每个WAVE文件的头四个字节便是“RIFF…

pg数据库开启远程连接_Postgresql开启远程访问的步骤全纪录

前言安装PostgreSQL数据库之后&#xff0c;默认是只接受本地访问连接。如果想在其他主机上访问PostgreSQL数据库服务器&#xff0c;就需要进行相应的配置。下面话不多说了&#xff0c;来一起看看详细的介绍吧。步骤如下&#xff1a;要在Postgresql中允许远程访问,需要设置如下2…

Vue.js前后端分离2

个人博客点这里 内容回顾 - 过滤器 - 局部的过滤器 // 只能在当前组件内部使用 filters:function(val,a,b){// 执行过滤处理逻辑,(添油加醋的内容)return xxx; }- 全局的过滤器 // 声明创建 在任何组件中都能使用 Vue.filter("myTime",function() {// 添油加醋的…

WORD列表缩进的文本起始点

Figure 1 Figure 2 Figure 3 编号位置以刻度尺为起点0.74厘米&#xff08;2个字符间距&#xff09;&#xff0c;文本缩进以刻度尺为起点2.96厘米&#xff08;8个字符间距&#xff09; 以上两者相减得到的值正好特殊格式悬挂缩进的值2.22厘米 Figure 4 上图看到&#xff0c;文本…

无人车火了 百度是如何做到的?

ZD至顶网服务器频道 03月02日 新闻消息&#xff08;文/于泽&#xff09;&#xff1a;百度无人车可谓狠狠的吸足了大众的眼球。一个问题逐渐出现在我们心中&#xff0c;为什么百度这样的互联网企业会推出无人车&#xff0c;似乎搜索引擎和无人车之间的关联度并不是很高。 谜题的…

测绘技术设计规定最新版_测绘技术设计规定

《》是中国测绘出版社出版图书&#xff0c;下面小编给大家介绍关于的相关资料&#xff0c;希望对您有所帮助。《》内容国家测绘地理信息局法规与行业管理司编著的《(2014)》是一本关于测绘资质管理规定和测绘资质分级标准的书。具体内容包括&#xff1a;大地测量专业标准、测绘…

各类音频格式解析

CD格式&#xff1a;天籁之音 当今世界上音质最好的音频格式是什么&#xff1f;当然是CD了。因此要讲音频格式&#xff0c;CD自然是打头阵的先锋。在大多数播放软件的“打开文件类型”中&#xff0c;都可以看到&#xff0a;.cda格式&#xff0c;这就是CD音轨了。标准CD格式也就是…

Error: Java heap space

在chd中 的hive中执行 (select count (*)) 或者mr程序都报Error: Java heap space 4、io.sort.mb 的作用 排序所使用的内存数量。 默认值&#xff1a;100M&#xff0c;需要与mapred.child.java.opts相配 默认&#xff1a;-Xmx200m。 不能超过mapred.child.java.opt设置&…

Golang语言基础课件

go学习pdf课件,大家可以收藏页面以免文件丢失 原文链接:http://victorfengming.gitee.io/course/go/

NIO客户端主要创建过程

NIO客户端主要创建过程:步骤一&#xff1a;打开SocketChannel&#xff0c;绑定客户端本地地址&#xff08;可选&#xff0c;默认系统会随机分配一个可用的本地地址&#xff09;&#xff0c;示例代码如下&#xff1a; SocketChannel clientChannel SocketChannel.open(); 步骤…

rank 开窗函数_over 开窗函数的的理解

over的功能&#xff1a;一、with Ta as(select 1 as Fa, a as Fbunion allselect 2 as Fa, b as Fbunion allselect 3 as Fa, c as Fbunion allselect 4 as Fa, d as Fbunion allselect 5 as Fa, e as Fb)select FB ,1.*Fa/(select sum(Fa) from Ta)from Tawith Ta as(select 1…

MP3技术白皮书-音频格式全解析

MP3的技术虽然现在已经完全公开&#xff0c;但是&#xff0c;其具体的技术细节还是有一定的深度&#xff0c;因此此次小编对某些技术进行深度解释&#xff0c;希望网友们笑纳。 采样率&#xff1a; 数码音频系统是通过将声波波形转换成一连串的二进制数据来再现原始声音的&…

Docker Compose 项目

二、Docker Compose 项目compose项目简介compose项目来源于之前的Fig项目&#xff0c;使用python代码编写。compose项目主要用于编排部署基于docker的应用。本身与docker&#xff0f;swarm配合度很高。Docker Compose 是 Docker 编排服务的一部分&#xff0c;可以让用户在其它平…

Goland安装-工欲善其事必先利其器

⼀、安装Goland开发⼯具 &#xff08;⼀&#xff09;、介绍 Goland是由JetBrains公司旨在为go开发者提供的⼀个符合⼈体⼯程学的新 的商业IDE。这个IDE整合了IntelliJ平台的有关go语⾔的编码辅助功能和⼯具集成 特点。它具有以下特点&#xff1a; 编码辅助功能符合⼈体⼯程学…

android 获取sd卡目录失败_树莓派对SD卡的大小,速度有哪些要求?

SD卡容量的大小通过NOOBS安装带有桌面和推荐软件&#xff08;完整&#xff09;的 Raspberry Pi OS&#xff0c;SD卡最小为16GB。 对于带有桌面和推荐软件的 Raspberry Pi OS 镜像安装&#xff0c;SD卡最小为8GB。对于安装 Raspberry Pi OS Lite&#xff0c;建议 SD 卡最小为4GB…

OGG音频格式解析

OGG 什么是Ogg Ogg全称是OGG Vobis(ogg Vorbis) &#xff0c;是一种新的音频压缩格式&#xff0c;类似于MP3等现有的音乐格式。但有一点不同的是&#xff0c;它是完全免费、开放和没有专利限制的。OGG Vobis有一个很出众的特点&#xff0c;就是支持多声道&#xff0c;随…

区分同源与非同源

2019独角兽企业重金招聘Python工程师标准>>> JSONP和AJAX相同&#xff0c;都是客户端向服务器端发送请求&#xff1a;1、给服务器端传递内容2、从服务器端获取数据 的方式 AJAX属于同源策略 JSONP属于非同源策略(跨域请求) -> 实现跨域请求的方式有很多种&#x…