• CCS样式命名


    命名规则

    1. 所有的命名最好都小写
    2. 属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
    3. 每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
    4. 空元素要有结束的tag或于开始的tag后加上"/"
    5. 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
    6. <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
    7. 给每一个表格和表单加上一个唯一的、结构标记id
    8. 给图片加上alt标签
    9. 尽量使用英文命名原则
    10. 尽量不缩写,除非一看就明白的单词

    tips:

    1.尽量考虑为元素命名其本身的作用或”用意”,达到语义化。不要使用表面形式的命名.
    如:red/left/big等。

    2.组合命名规则:
    [元素类型]-[元素作用/内容]
    如:搜索按钮: btn-search
    登录表单:form-login
    新闻列表:list-news

    3.涉及到交互行为的元素命名:
    凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:
    鼠标悬停::hover   点击:click   已浏览:visited
    如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

    常用命名

    页面结构命名:

    容器:container    页头:header    内容:content/container

    页面主题:main    页尾:footer     导航:nav

    侧边栏:sidebar    栏目:column    页面外围控制整体宽度:wrapper

    导航:

    主导航:mainnav    子导航:subnav    顶导航:topnav

    边导航:sidebar    左导航:leftsidebar    右导航:rightsidebar

    菜单:menu     子菜单:submenu    标题: title    摘要: summary

    功能:

    标志: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.不加中杠和下划线;
  • 相关阅读:
    C/C++——二维数组与指针、指针数组、数组指针(行指针)、二级指针的用法
    C/C++——C语言数组名与指针
    C/C++——C语言跳出多重循环方法
    知识储备——国际象棋术语中英文对照
    C/C++——C语言库函数大全
    C/C++——C语言常用库函数
    C/C++——[05] 函数
    C/C++——[04] 语句
    C/C++——[03] 注释
    C/C++——[02] 运算符和表达式
  • 原文地址:https://www.cnblogs.com/GP-233/p/7143160.html
Copyright © 2020-2023  润新知