LinHuijuan's Blog

css架构

# css架构

[TOC]

参考文献：张鑫旭·鑫空间·鑫生活 (opens new window)

# 1.简短的css reset

# 2.通用css样式库

# 3.网站css样式库

网站通用的元素（按钮，导航，选项卡的）的样式千万不能分离作为网站的CSS样式库。

  1. 网站常见颜色
    1. 链接色
  2. 网站常见背景色
    1. .bgf7{background:#f7f7f7;}
  3. 网站常见边框色
  4. 网站遗留的单margin属性
    1. 某一div留白较大，有个单独的margin-top:35px的属性
      1. .mt35{margin-top:35px;}
  5. 网站遗留的单padding属性
    1. 双栏自适应布局时，无论是浮动自适应，还是绝对定位自适应，都需要使用padding-left值
  6. 网站已有的width属性
    1. 在流体布局思想下，宽度是有限的
  7. 网站常用的一些height属性

# 4.网站所有css sprite合并项

  1. 一般合并样式部分样式为{background:url(xx.png) no-repeat;}
    1. 分离部分的样式是{background-position:x, y;}

# 5.网站通用小图标样式

  1. 使用一个不常用的标签作为网站的小图标专用标签
    1. s标签，或是u标签
  2. 将小图标单独为一个小图标Sprite，每个图标放在20*20像素的格子
    1. 依次命名为：u00,u01,u02…u019,u10,u11,…u119…
      1. 标注的u113代表u(1,13)

# 6.网站通用导航样式

  1. “独立元素”的通用样式
    1. 导航
    2. 菜单
    3. 按钮
    4. 选项卡
    5. 文本框装饰
    6. 图片装饰
    7. 圆角处理

# 7.网站通用按钮样式

# 8.网站通用选项卡样式

# 9.网站通用文本框等控件样式

# 10.网站分页样式及其他通用样式

# 11.网站公共结构样式

公共结构仅仅定宽定高，设置浮动属性，切不可在结构样式上添加margin或是padding属性，这会使网站的公共结构的重用性大大降低！

  1. 最外框div的样式
  2. 分栏布局样式
    1. 主体样式
      1. left_part
      2. right_part
  3. 头部的一些公用结构
  4. 底部的样式结构

# 12.单页面的一些精细架构与样式

css语法