DIV命名规范

 DIV命名规范

    • 企业

      DIV
      使用频率高的命名方法

    • 网页内容类

      ---

      • 注释的写法: 

        /* Footer */ 
        内容区
        /* End Footer */

      • 摘要: 

        summary

      • 箭头: 

        arrow

      • 商标: 

        label

      • 网站标志: 

        logo

      • 转角/圆角:

         corner

      • 横幅广告: 

        banner

      • 子菜单: 

        subMenu

      • 搜索: 

        search

      • 搜索框: 

        searchBox

      • 登录: 

        login

      • 登录条:

        loginbar

      • 工具条: 

        toolbar

      • 下拉: 

        drop

      • 标签页: 

        tab

      • 当前的: 

        current

      • 列表: 

        list

      • 滚动: 

        scroll

      • 服务: 

        service

      • 提示信息: 

        msg

      • 热点:

        hot

      • 新闻: 

        news

      • 小技巧: 

        tips

      • 下载: 

        download

      • 栏目标题: 

        title

      • 热点: 

        hot

      • 加入:

         joinus

      • 注册: 

        regsiter

      • 指南: 

        guide

      • 友情链接: 

        friendlink

      • 状态: 

        status

      • 版权: 

        copyright

      • 按钮: 

        btn

      • 合作伙伴: 

        partner

      • 投票: 

        vote

      • 左右中:

        left
         
        right
         
        center

      • 标题: 

        title

    • id的命名:

      ---

      • 导航:

        nav

      • 主导航:

        mainbav

      • 子导航:

        subnav

      • 顶导航:

        topnav

      • 边导航:

        sidebar

      • 左导航:

        leftsidebar

      • 右导航:

        rightsidebar

      • 菜单:

        menu

      • 子菜单:

        submenu

      • 标题: 

        title

      • 摘要: 

        summary

      • 容器: 

        container

      • 页头:

        header

      • 内容:

        content
        /
        container

      • 页面主体:

        main

      • 页尾:

        footer

      • 导航:

        nav

      • 侧栏:

        sidebar

      • 栏目:

        column

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

        wrapper

      • 左右中:

        left
         
        right
         
        center

      • 页面结构

        ---

      • 导航


      • 标志:

        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
        的命名:

        • .barnews { }

        • .barproduct { }

        • .left { float:left; }

        • .bottom { float:bottom; }

        • .font12px { font-size: 12px; }

        • .font9px {font-size: 9pt; }

        • .red { color: red; }

        • .f60 { color: #f60; }

        • .ff8600 { color: #ff8600; }

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

        • 字体大小,直接使用"font 字体大小"作为名称,如

        • 对齐样式,使用对齐目标的英文名称,如

        • 标题栏样式,使用"类别 功能"的方式命名,如

---

      • 注意事项::

        • 一律小写;

        • 尽量用英文;

        • 不加中杠和下划线;

        • 尽量不缩写,除非一看就明白的单词.

---

  • 推荐的 

    CSS
     书写顺序:

    • color

    • font

    • text-decoration

    • text-align

    • vertical-align

    • white-space

    • other text

    • content

    • width

    • height

    • margin

    • padding

    • border

    • background

    • display

    • list-style

    • position

    • float

    • clear

    • 显示属性

    • 自身属性

    • 文本属性

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值