常用的 css 命名规则实例分享

本文主要和大家分享一些篇常用的 css 命名规则(推荐)。希望本文能帮助到大家,让大家更好的学习和掌握使用css。

常用的 css 命名规则(推荐)

头: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

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

 

(1)页面结构

容器: container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

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

左右中:left right center

(2)导航

导航:nav

主导航:mainbav

子导航: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

 

主要的 master.css

模块 module.css

基本共用 base.css

布局,版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

也许大家觉得命名很简单,但是有一个好的命名规范,会让你的开发更顺利,是一个好习惯,关于本篇 css 命名规则希望能帮助到大家。

相关推荐:

HTML里的命名规则

HTML里的命名规则

HTML里的命名规则

以上就是常用的 css 命名规则实例分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2900939.html

(0)
上一篇 2025年3月11日 00:04:42
下一篇 2025年3月1日 03:54:06

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 最全的CSS中background标签汇总

    在css开发中我们经常会用到background,本文主要为大家带来一篇css background全部汇总。小编觉得挺不错的,现在就分享给大家,也给大家做个参考,希望能帮助到大家。 所有背景属性都不能继承。 1. background-c…

    编程技术 2025年3月11日
    000
  • CSS滤镜实现火焰效果实例讲解

    上次我们了解了一些css滤镜的基础知识,css滤镜 filter属性,本文主要介绍了通过css的滤镜实现火焰效果的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 这次我们就来用css的滤…

    2025年3月11日 编程技术
    200
  • 实例讲解CSS3 mask的具体使用方法

    css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。本文主要介绍了css3 mask 遮罩的具体使用方法,详细的介绍了css3 mask 遮罩的具体使用,具有一定的参考价值,有兴…

    2025年3月11日
    200
  • 浅谈容易被忽略CSS特性分享

    css初学感觉很简单,但随着学习的深入才感觉css的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑本文主要介绍了浅谈容易被忽略css特性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 …

    2025年3月11日 编程技术
    200
  • 实例讲解CSS3实现无限循环的无缝滚动

    有时候在页面的某个模块中,需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)?本文主要介绍了用css3实现无限循环的无缝滚动的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个…

    编程技术 2025年3月11日
    200
  • 纯CSS3实现网页中常见的小箭头实例

    本文主要介绍了用纯css3实现网页中常见的小箭头的相关资料,需要的朋友可以参考下,希望能帮助到大家。 /* css3三角形(向上 ▲) */p.arrow-up { width:0px; height:0px;border-left:5px…

    编程技术 2025年3月11日
    200
  • css3实现气球样式的代码

    本文主要介绍了用css3写出气球样式的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 气球效果图: html: 登录后复制 css: .balloon{         width:…

    2025年3月11日
    200
  • 6种解决CSS图片下面有间隙的方法

    在进行页面的p+css排版时,遇到ie6(当然有时firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」,根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片…

    编程技术 2025年3月11日
    200
  • 详谈css3的动画特效之动画序列

    大家都知道animation是css的属性,本文主要介绍了css3的动画特效之动画序列(animation) 的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 首先复习一下anima…

    2025年3月11日 编程技术
    200
  • CSS 怪异盒模型和标准盒模型实例详解

    在html文档中,每个渲染在页面中的标签都是一个个盒子模型,本文主要介绍了详解css 怪异盒模型和标准盒模型,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 盒子模型又分为 : W3C标准的盒…

    2025年3月11日 编程技术
    200

发表回复

登录后才能评论