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
(二)注释的写法:
  /* Footer */
  内容区
  /* End Footer */
(三)id的命名:
  (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

  (四)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.尽量不缩写,除非一看就明白的单词.
  主要的 master.css
  模块 module.css
  基本共用 base.css
  布局,版面 layout.css
  主题 themes.css
  专栏 columns.css
  文字 font.css
  表单 forms.css
  补丁 mend.css
  打印 print.css

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/119319.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • navicat激活码最新(JetBrains全家桶)

    (navicat激活码最新)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • 华为OJ:2041 放苹果

    华为OJ:2041 放苹果

  • 以太网用户侧接口(以太网协议转换方案)

    以太网接口示意图如下图1:以太网接口 如果您的职业生涯大部分时间都在从事PCB设计,并且您在计算机接口的布局和布线方面有经验,那么您就知道一件事是正确的:在器件应用说明中会有一些推荐的设计建议,并不是这些建议总是错误的,而是这些建议很容易断章取义。一位同事向我提出的一项建议是,在离散磁铁和连接器之间布线时,在RJ45连接器下方使用接地层。一些应用说明建议将系统接地覆盖RJ45连接器下方,一些应用说明建议将接地平面拆分为系统和机箱部分,以提供更强的隔离。应用说明中的一些建议指出,PHY、磁体和/或

  • 96 年美女胜出!那个有关“猪脸识别”的比赛决出冠军啦

    96 年美女胜出!那个有关“猪脸识别”的比赛决出冠军啦点击上方“程序员小灰”,选择“置顶公众号”有趣有内涵的文章第一时间送达!还记得前段时间风靡技术界的“猪脸识别”吗?据了解,在知乎上与此有关的仅仅一个问题的浏览量就超过了35万,”猪脸识别”是JDD-2017京东金融全球数据探索者大赛的四大赛题之一,自从京东金融JDD大赛启动,就掀起了好大一波关注。而最近,这个与“猪脸识别”有关的JDD—2017京东金融全球数据探索者大赛经过多轮

  • Ubuntu安装qt5_qt5安装教程

    Ubuntu安装qt5_qt5安装教程最近打算学一下QT应用程序开发,所以打算装一个QT桌面环境QtCreator,捣鼓了一阵,把电脑弄坏重装系统之后,终于安装好了,这里分享一下安装的过程

    2022年10月16日
  • GiD 自定义 简介

    GiD 自定义 简介目录BlogLinks一、前言二、GiD的程序架构六、参考文献BlogLinksDalNur|博客总目录GiD实用教程GiD前处理实例GiD自定义简介GiD后处理实例一、前言  随着计算机技术的发展,有限元法已成为非常强大的数值模拟工具,广泛应用于各个领域。目前,比较常用的大型商用有限元程序有ANSYS,ABAQUS,MARC,ADINA等,由于它们是通用有限元程序,在某些领域的特殊方面(如对于应力场、渗流场、温度场的耦合问

    2022年10月23日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号