zoukankan      html  css  js  c++  java
  • css规范总结

    1、通用规则
    • 采用utf-8作为编码
    • 连接线“-”作为连接符号,同JS挂钩的采用J_HeadHd命名方式
    • 选择器采用:大模块id 小模块class 起名字: 内容优先,表现为辅,例如side比left好
    • 标签中属性双引号、属性名小写(JS中单引号)
    • 每个栏目之间<!--栏目名 #START--><!--栏目名 #END-->空一行
    • css书写规范
    • 多行时分行定义
    • z-index约定:普通1-99;悬浮菜单:1000 - 4999 模态窗口:5000 - 9999
    • IE中采用“-”连接线做hack
    2、css布局(参考KISSY)
    reset.css
    /** 清除内外边距 **/
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
    dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
    pre, /* text formatting elements 文本格式元素 */
    form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
    th, td /* table elements 表格元素 */ {
        margin: 0;
        padding: 0;
    }

    /** 设置默认字体 **/
    body,
    button, input, select, textarea /* for ie */ {
        font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 { font-size: 100%; }
    address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
    code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
    small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */

    /** 重置列表元素 **/
    ul, ol { list-style: none; }

    /** 重置文本格式元素 **/
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }

    sup { vertical-align: text-top; } /* 重置,减少对行高的影响 */
    sub { vertical-align: text-bottom; }

    /** 重置表单元素 **/
    legend { color: #000; } /* for ie6 */
    fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
    button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
    /* 注:optgroup 无法扶正 */

    /** 重置表格元素 **/
    table { border-collapse: collapse; border-spacing: 0; }
     
    双飞翼布局
    layout.css
    • 利用负外边距
    • 浮动
    • 相对定位
    常用布局
    两栏:
     
    3、模块化
     
    4、语义化标签
     
     
    参考





  • 相关阅读:
    SAR图像处理 MSTAR数据库利用问题
    python 获取系统环境变量 os.environ and os.putenv
    python 模块中的 __init__.py __main__.py
    pylint python2.7 安装记录
    Python--字典
    哈希表
    AC自动机模板
    平衡树(Splay)模板
    矩阵快速幂 模板
    非递归线段树
  • 原文地址:https://www.cnblogs.com/sidmeng/p/2203704.html
Copyright © 2011-2022 走看看