zoukankan      html  css  js  c++  java
  • 整理了二个基本的css库(高手请绕道)

    前一阵公司唯一的前端开发人员走掉了,短期内也没人顶上来,所以切页面/js这种活儿只能咱自个儿揽过来了,花了大半天捣鼓了下css,整理了二个基本的css库,方便以后切页面,贴在这里备份

    说明:
    p.css ---即public.css,用来定义一些常见的公用样式
    l.css ---即layout.css,用来定义栅格系统的常用布局(不清楚栅格系统的统子们,先到这里扫扫盲http://www.cnblogs.com/yjmyzz/archive/2009/08/20/1550653.html-学习网页栅格系统的几篇好文)

    压缩包目录结构如下:

    D:.
    │  ifrm.html
    │  layout.htm
    │  pub.htm

    └─c
        │  l.css
        │  p.css
        │
        └─package
                l.css
                p.css

    p.css很简单,不多说了,down回去自己看

    pub.htm是针对p.css的测试页面

    l.css即布局样式,命名规则解释如下:

    .g-c2-s5-sm ---g表示这是按栅格划分的(默认是24*40,即40px为一格,960的页面分为24格),c2表示column为2(即二栏main,sub),s5表示sub栏为5格(即5*40=200px,再考虑到10px的间隔,最终宽度为190px),sm表示布局顺序(即sub-main,sub栏在左,main栏在右)

    .g-c2-s5-ms ---其它同上,最后的sm表示main-sub,即main在左,sub栏在右

    .g-c3-s5e6-sme ---c3表示三栏布局(main,sub,extra),s5--即sub占5格,e6--即extra占6格,sme即sub-main-sub,代表sub在左,main在中间,extra在右边

    其它类推...

    特点:
    1.符合所谓的"渐进增强"语义,即在html源代码上,始终是main,sub,extra的顺序,保证搜索引擎分析时,main(主要内容-正文区)总是最先被读到,其它是sub(子栏目,通常是侧边栏),最后是extra(附加栏,相对最不重要,通常是侧边广告位之类)


    2.在html源代码不做太大改动的情况下,如果要改动布局结构,只要把最外面的class名修改即可,如g-c2-s5-sm的布局,想交换main,sub的位置,只要把class="g-c2-s5-sm"换成class="g-c2-s5-ms"即可

    layout.htm为l.css的测试(基本上在IE6,IE7,IE8,FF3.5,Opera10,Safari,Chorme2上都是兼容的,而且也没用到任何hack),最后package目录下为l.css与p.css的压缩版本

    源文件下载:https://files.cnblogs.com/yjmyzz/csslib_v0.1.rar
    欢迎大家补充完善,如有更新,请记得通知我(mail:yjmyzz#126.com,msn:yjmyzy#hotmail.com)

    作者:菩提树下的杨过
    出处:http://yjmyzz.cnblogs.com
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    css之position
    js之循环语句
    js之条件判断
    js之字典操作
    js之获取html标签的值
    5.15 牛客挑战赛40 C 小V和字符串 数位dp 计数问题
    5.21 省选模拟赛 luogu P4297 [NOI2006]网络收费 树形dp
    luogu P4525 自适应辛普森法1
    luogu P1784 数独 dfs 舞蹈链 DXL
    5.21 省选模拟赛 luogu P4207 [NOI2005]月下柠檬树 解析几何 自适应辛普森积分法
  • 原文地址:https://www.cnblogs.com/yjmyzz/p/1587856.html
Copyright © 2011-2022 走看看