常见的类名id名命名参考规范

2023-05-16

web前端命名规范

下面是常见的命名参考规范:

❤ 主体

头部:header

内容:content/container

尾部:footer

导航:nav

侧栏:sidebar

栏目:column

整体布局:wrapper

左右中:left / right / center

登录条:loginbar

标志:logo

广告:banner

页面主体:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:join

指南:guild

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

推荐(HTML进阶教程)

❤ id的命名规范

(1)页面结构

容器: container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

(2)导航

导航:nav

主导航:mainnav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题: title

摘要: summary

(3)功能

标志:logo

广告:banner

登陆:login

登录条:loginbar

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的: current

小技巧:tips

图标: icon

注释:note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

版权:copyright

❤ class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如:


.red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }  

(2)字体大小,直接使用“font+字体大小”作为名称,如:


.font12px { font-size: 12px; } .font9pt {font-size: 9pt; }  

(3)对齐样式,使用对齐目标的英文名称,如:


.left { float:left; } .bottom { float:bottom; }  

(4)标题栏样式,使用“类别+功能”的方式命名,如:


.barnews { } .barproduct { }  

❤!注意事项:

1.一律小写;

2.尽量用英文;

3.尽量不加中杠和下划线;

4.尽量不缩写,除非一看就明白的单词,如:wrapper可以写成wrap。

5.css文件命名规范:

主要的 master.css;

模块 module.css;

基本共用 base.css;

布局,版面layout.css;

主题 themes.css;

专栏 columns.css;

文字 font.css;

表单 forms.css;

补丁 mend.css;

打印print.css

更多web开发知识,请查阅 HTML中文网 !!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

常见的类名id名命名参考规范 的相关文章

  • 手机中的功耗设计介绍(一)

    最近在找新工作 xff0c 对某大厂的功耗工程师的职位比较感兴趣 于是整理一下网络上查到的和之前基带工作中与功耗相关的知识 不同的公司可能会有不同的责任划分 xff0c 上份工作 xff0c 硬件部分的功耗是由基带负责 主要接触到的是整机的
  • 树莓派原生系统安装ROS(含网络代理,ROS编译安装以及ROS小车制作过程)

    本文将自主搭建树莓派ROS自主导航小车 目前已经完成的有 xff1a 1 树莓派初始化配置 2 树莓派局域网网络代理 3 树莓派ros安装 4 hector slam安装 5 自制阿克曼底盘控制 python 以下为全文链接 xff1a 树
  • 阿里云服务器修改主机名即ID(登陆时root@后显示名)【图文】详细

    首先你得在你电脑安装Xshell这一类的终端模拟软件去登陆你的远程阿里云服务器 我用的是Xshell xff0c 觉得界面超级清爽好看 xff0c 免费下载安装地址 https blog csdn net qq 43012792 artic
  • 虚拟机VMware和Ubuntu的安装与配置教程(超详细,实验可行)

    网上各类教程很多 xff0c 但总有缺漏的地方 在这里我参考了一个比较详细的教程 xff0c 并针对我第一次安装时遇到的问题 xff0c 对该教程进行补充 xff08 主要在安装源的部分及其他细节 xff09 文章目录 一 安装虚拟机和Ub
  • 【Pytorch图像分类】搭建卷积神经网络(CNN)和使用迁移学习(Transfer Learning)实现图片识别

    1 摘要 图像分类 xff0c 也可以称作图像识别 xff0c 顾名思义 xff0c 就是辨别图像中的物体属于什么类别 核心是从给定的分类集合中给图像分配一个标签的任务 实际上 xff0c 这意味着我们的任务是分析一个输入图像并返回一个将图
  • 基于STM32F407四旋翼无人机(一)

    第一次写博客 xff0c 可能有很多地方写的不好 xff0c 请大家见谅 xff0c 这次想分享一下毕业做的一个毕业设计 基于STM32F407四旋翼无人机控制系统 的一些过程 我会最开始的模块程序编写来较为详细的讲解 刚开始先说一下飞控都
  • 关于线性卡尔曼滤波详细讲解(二)--GPS融合IMU数据

    上次我们说了卡尔曼最核心的五个公式 xff0c 还有一些上次没有说的东西 xff0c 这次也补全 xff0c 其实在我们实际需求中 xff0c 只知道这五个公式 xff0c 却不知道怎么去根据自己的需求去初始化各种状态转移矩阵之类的 xff
  • 基于STM32F407四旋翼无人机---MS5611气压计(三)

    基于STM32F407四旋翼无人机 MS5611气压计 xff08 三 xff09 1 关于MS5611的基本介绍2 通过IIC获取气压计数据3 转化为相对高度 1 关于MS5611的基本介绍 2 通过IIC获取气压计数据 3 转化为相对高
  • mavlink协议从入门到放弃(一)

    mavlink协议从入门到放弃 xff08 一 xff09 什么是MAVLINK协议网站和参考资料MAVLINK简介 MAVLINK协议包结构协议结构mavlink协议解析 最近比较忙 xff0c 搞了个项目用到了mavlink协议 xff
  • VSCode如何上传代码到git

    VSCode新建分支方式 先看一下结构 这里是一个改动后上传git时的目录 xff1a 修改代码放入暂更改区 结果如下图 此时 xff1a 更改 下面修改的内容已经移到了 暂存的更改 下面 代码Commit 代码推送到远程分支 注意 xff
  • C++中运算符重载需要遵循的规则

    一 C 43 43 中运算符重载需要遵循的规则 1 并不是所有的运算符都可以重载 能够重载的运算符包括 xff1a 43 amp 61 lt gt 43 61 61 61 61 61 61 amp 61 61 lt lt gt gt lt
  • novnc+vncserver访问docker容器桌面

    https blog csdn net u012829611 article details 72576493 utm medium 61 distribute pc relevant t0 none task blog BlogComme
  • Apache阶段二-

    一 Apache 主要配置文件注释 Apache的主配置文件 xff1a etc httpd conf httpd conf 默认站点主目录 xff1a var www html Apache服务器的配置信息全部存储在主配置文件 etc h
  • FreeRTOS基本教程零:STM32 FReeRTOS 移植流程

    一 资料准备 FreeRTOS源码下载地址 xff1a https github com FreeRTOS FreeRTOS https github com FreeRTOS FreeRTOS 我移植的是FreeRTOSv9 0 0 st
  • ROS自学实践(4):使用GAZEBO进行物理仿真

    rviz中的仿真只是视觉上的仿真 xff0c 不能称得上物理仿真 xff0c gazebo是真正意义上的三维物理仿真平台 xff0c 可以在里面创建环境等相关信息 xff0c 方便以后的建模和导航 1 向xacro模型文件中添加惯性矩阵和碰
  • ROS自学实践(5):GAZEBO建模及添加相机和激光雷达传感器并进行仿真

    在搭建完机器人小车的模型之后 xff0c 需要向其添加传感器 xff0c 以便提取传感器的数据 xff0c 进行后续的工作 一 相机 1 添加camera gazebo xacro文件 同添加机器人模型一样 xff0c 添加一个相机也需要进
  • 使用CSS禁用链接

    想要使用CSS禁用链接 xff0c 可以使用pointer events属性 xff0c 该属性设置在单击元素时页面中的元素是否必须响应 下面本篇文章就来给大家介绍一下pointer events属性 xff0c 希望对大家有所帮助 CSS
  • 使用CSS将文字显示在水平线中间

    如何使用CSS将文字显示在水平线中间 xff1f 下面本篇文章就来给大家介绍使用CSS实现文字显示在水平线中间效果的方法 xff0c 希望对大家有所帮助 CSS提供了在网页中间制作包含文字或图像的水平线以使其具有吸引力的功能 xff0c 这
  • 使用CSS使文本输入不可编辑

    在HTML中可以使用readonly属性创建不可编辑的文本输入 而在CSS的情况下 xff0c 可以使用pointer events属性使文本输入不可编辑 下面本篇文章就来给大家介绍一下 xff0c 希望对大家有所帮助 CSS pointe
  • 将数组转换为JSON数据

    如何将数组转换为JSON数据 xff1f 下面本篇就来给大家介绍一下将数组转换为JSON对象的方法 xff0c 希望对大家有所帮助 方法一 xff1a 使用Object assign Object assign 方法将枚举的所有属性的值从源

随机推荐

  • CSS设置链接的样式

    链接是从一个网页到另一个网页的连接 xff0c CSS可通过不同属性以各种不同方式来设置链接的样式 下面本篇文章就来给大家介绍一下CSS设置链接的样式的方法 xff0c 希望对大家有所帮助 在讨论CSS属性之前 xff0c 先了解链接的状态
  • 任务切换

    任务切换的方法 第一个方法就是借助中断来进行任务切换 xff0c 这是现代抢占式多任务的基础 在实模式下 xff0c 内存最低端1KB是中断向量表 xff0c 保存着256个中断处理过程的段地址和偏移地址 在保护模式下 xff0c 处理器不
  • 操作无法完成,因为该文件已在system中打开

    一 操作无法完成 xff0c 因为该文件已在system中打开 1 同时按下键盘上的Ctrl 43 Shift 43 ESC组合键 xff0c 打开 任务管理器 xff0c 2 切换到 性能 选项卡下 xff0c 并点击 资源管理器 xff
  • Ai智能时代即将到来,替代程序员还是相辅相成,我们拭目以待

    AI是否会替代前端程序员 xff1f 这是一个让很多人感到担忧的问题 随着AI技术的发展 xff0c 越来越多的工作被自动化 前端开发是否也会面临被取代的危机呢 xff1f 前端开发是指使用HTML CSS JavaScript等技术 xf
  • HTML使用onmouseover属性更改背景颜色

    HTML如何使用onmouseover属性更改背景颜色 xff1f 下面本篇文章就来给大家介绍一下在HTML中使用onmouseover属性更改背景颜色的方法 xff0c 希望对大家有所帮助 HTML的onmouseover属性在鼠标指针移
  • 使用CSS更改PNG图像的颜色

    给定一个图像 xff0c 如何使用CSS更改PNG图像的颜色 xff1f 下面本篇文章就来给大家使用CSS更改PNG图像颜色的方法 xff0c 希望对大家有所帮助 在CSS中使用Filter属性 xff0c 利用滤镜功能来更改png图像颜色
  • 使用CSS更改hr标签的厚度

    下面本篇文章就来给大家介绍一下使用CSS更改hr标签的厚度的方法 xff0c 希望对大家有所帮助 HTML lt hr gt 标签在 HTML 页面中创建一条水平线 xff1b 水平分隔线 xff08 horizontal rule xff
  • 使用CSS设置文本或图像的透明度

    如何使用CSS设置文本或图像的透明度 xff1f 下面本篇文章就来给大家介绍一下使用CSS设置文本或图像的透明度的方法 xff0c 希望对大家有所帮助 想要使用CSS设置文本或图像的透明度 xff0c 可以使用opacity属性来设置 op
  • 使用CSS垂直居中文本

    CSS的常见任务是垂直居中文本或图像 xff1b 虽然CSS2不支持垂直对齐 xff0c 但我们可以通过组合一些属性来垂直居中块 下面本篇文章就来给大家介绍一下使用CSS垂直居中文本的方法 xff0c 希望对大家有所帮助 方法一 xff1a
  • CSS删除内联块元素之间空格的方法

    如何删除内联块元素之间的空格 xff1f 下面本篇文章就来给大家介绍一下使用CSS删除内联块元素之间的空格 xff0c 希望对大家有所帮助 要想删除内联块元素之间的空格 xff0c 可以使用margin right属性 xff1b 此属性用
  • 使用CSS在元素后面添加空格

    在CSS中 xff0c 可以使用 after选择器在元素后面添加空格 xff08 34 34 xff09 after选择器用于在其他元素的内容之后多次添加相同的内容 xff1b 它在每个选定元素的内容后面插入一些内容 下面本篇文章就来给大家
  • CSS在页面加载时创建淡入效果

    下面本篇文章就来给大家介绍一下使用CSS在页面加载时创建淡入效果的方法 xff0c 希望对大家有所帮助 想要使用CSS在页面加载上创建淡入效果 xff0c 可以使用css的animation属性或transition属性在页面加载时创建淡入
  • CSS设置文本和边框(图像)阴影

    在CSS中可以使用阴影效果属性在HTML文档中添加文本和边框 xff08 图像 xff09 阴影 下面本篇文章就来给大家介绍一下CSS的阴影效果属性 xff0c CSS添加阴影效果的方法 xff0c 希望对大家有所帮助 1 添加文本阴影 在
  • 使用JavaScript清除div的内容

    JavaScript提供清除div内容的功能 xff0c 想要执行此功能有两种方法 xff1a 一种是使用innerHTML属性 xff0c 另一种是使用firstChild属性和removeChild 方法 下面本篇文章就来给大家介绍一下
  • 大话pixhawk运行Ardu:Copter启动过程

    1 xff1a 了解启动过程有什么帮助 xff1f 2 xff1a 硬件连接 3 xff1a 启动过程 amp 分析 rgbled on I2C bus 2 at 0x55 bus 100 KHz max 100 KHz init look
  • JavaScript将Set(集合)转换为Array数组

    在JavaScript中 xff0c 想要将Set xff08 集合 xff09 转换为Array数组 xff0c 可以通过以下方式实现 方法1 xff1a 使用Array from 方法 Array from 方法从对象或可迭代对象 xf
  • 使用CSS将图像进行模糊处理

    给定一个图像 xff0c 如何使用CSS将图像进行模糊处理 xff0c 转换为模糊图像 xff1f 下面本篇文章就来给大家介绍一下使用CSS模糊处理图像的方法 xff0c 希望对大家有所帮助 在CSS中 xff0c 可以使用filter属性
  • CSS设置占位符文本的对齐方式

    HTML的placeholder属性指定一个简短提示 xff0c 用于描述input字段或文本区域 xff08 textarea xff09 的预期值 xff0c 即占位符文本 短提示在用户输入值之前显示在字段中 在大多数浏览器中 xff0
  • 谈谈HTML的短语标签及其作用

    在HTML中 xff0c 短语标签是专用标签 xff0c 用于指示文本块具有结构意义 xff0c 执行与文本格式标签类似的特定操作 例如 xff0c abbr标签表示该短语包含缩写词 短语标签的一些例子有 xff1a abbr strong
  • 常见的类名id名命名参考规范

    web前端命名规范 下面是常见的命名参考规范 xff1a 主体 头部 xff1a header 内容 xff1a content container 尾部 xff1a footer 导航 xff1a nav 侧栏 xff1a sidebar