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

    • 显示属性

    • 自身属性

    • 文本属性

DIV命名规范的更多相关文章

  1. html中css、div命名规范

    html中css.div命名规范 1.类class的命名规范示例 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column ...

  2. div 命名规范! (野路子出来的好好看看)

    DIV命名规范   DIV命名规范 企业DIV使用频率高的命名方法 网页内容类 --- 注释的写法: /* Footer */ 内容区/* End Footer */ 摘要: summary 箭头:  ...

  3. DIV+CSS命名规范-转载2

    一.CSS文件及样式命名1.CSS文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.c ...

  4. DIV+CSS 规范命名集合

    一: 命名规范说明: 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="d ...

  5. [html] 有利于seo优化的div+css命名规范

    搜索引擎优化(seo)对命名规范有很多要求,下面是我收集的一些当下主流的命名(还是比较常用的): CSS样式命名 说明 网页公共命名 #wrapper 页面外围控制整体布局宽度 #container或 ...

  6. CSS命名规范

    DIV+CSS规范命名大全集合 前端人员必看CSS命名规范 整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值 ...

  7. html页面的CSS、DIV命名规则

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  8. html,css命名规范 (转)

    HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁 方式: <meta charset="utf-8"> 1. ...

  9. css 命名规范

    网站头部:    head/header(头部) top(顶部)    导航:   nanv 导航具体区分:topnav(顶部导航).mainnav(主导航).mininav(迷你导航).textna ...

随机推荐

  1. POJ1057 FILE MAPPING

    题目来源:http://poj.org/problem?id=1057 题目大意:计算机的用户通常希望能够看到计算机存储的文件的层次结构的图形化表示.Microsoft Windows的 " ...

  2. 树莓派使用 HLS 实现视频流直播

    说明 这次介绍一下基于上一篇文章"树莓派编译安装 FFmpeg "的应用,即 HLS 视频流直播.原理是 FFmpeg 将 USB 摄像头的原始视频流压缩为 H.264 视频流,然 ...

  3. hdu6223 Infinite Fraction Path 2017沈阳区域赛G题 bfs加剪枝(好题)

    题目传送门 题目大意:给出n座城市,每个城市都有一个0到9的val,城市的编号是从0到n-1,从i位置出发,只能走到(i*i+1)%n这个位置,从任意起点开始,每走一步都会得到一个数字,走n-1步,会 ...

  4. 1040 有几个PAT (25 分

    字符串 APPAPT 中包含了两个单词 PAT,其中第一个 PAT 是第 2 位(P),第 4 位(A),第 6 位(T):第二个 PAT 是第 3 位(P),第 4 位(A),第 6 位(T). 现 ...

  5. RequestContextHolder与RequestContextUtils

    org.springframework.web.servlet.support.RequestContextUtils 在spring-webmvc中, 主要用来获取WebApplicationCon ...

  6. /etc目录下重要的目录和文件

    牢记: 1.*/etc/sysconfig/network-scripts/ifcfg-eth0  网卡的配置信息 重启网卡:1)/etc/init.d/network restart(所有网卡)   ...

  7. 9-----BBS论坛

    BBS论坛(九) 9.1.权限和角色模型定义 (1)cms/models class CMSPermission(object): ALL_PERMISSION = 0b11111111 # 1.访问 ...

  8. 使用nrm解决npm下载包慢的问题!

    nrm的安装使用 作用:提供了一些最常用的NPM包镜像地址,能够让我们快速的切换安装包时候的服务器地址: 什么是镜像:原来包刚一开始是只存在于国外的NPM服务器,但是由于网络原因,经常访问不到,这时候 ...

  9. The Falling Leaves UVA - 699

    题目链接:https://vjudge.net/problem/UVA-699 题目大意:给一颗二叉树,每个结点都有一个水平位置 :左子节点在它左边的1个单位,右子结点在它右边1个单位.从左向右输出每 ...

  10. [转]jQuery调用ASPX返回json

    本文转自:http://www.cnblogs.com/fire-phoenix/archive/2009/11/13/1614146.html 本文介绍如何在ASP.NET(ASP.NET/AJAX ...