整理了二个基本的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的压缩版本

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

时间: 2024-12-03 05:55:17

整理了二个基本的css库(高手请绕道)的相关文章

css2.1中的属性选择器(css高手请绕道)

早上看了司徒先生的js版属性选择器(http://www.cnblogs.com/rubylouvre/archive/2009/10/27/1590102.html),也激发了我深入了解css选择器的学习欲望, 整理于此以便日后备查 *:匹配任何元素. 例如: *{margin:0} E:匹配任何E元素. 例如: div{color:red} E F:匹配E的所有后代F元素. E > F:匹配E的所有子F元素.这个选择器与上一个选择器的区别是:E F会匹配E标签里面嵌套的所有F标签,而E >

Web 开发中 20 个很有用的 CSS 库

在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS 库,框架,应用这样的工具能够为开发者做很多事,而且可以使开发者创造出创新立异的WEB应用. 在这篇文件章中我们找到了一系列对开发者有用的CSS库,它们能帮助开发者在一定的期限内取得有创造性和创新性的成果.我们希望这个列表能有助于您的开发并为您提供方便.尽情享受吧! 1. Kite Kite是一个灵活的布局助手CSS库.Kite使用inl

libqrencode 3.3.0发布 二维符号的数据编码库

libqrencode 是一个用于QR条形码的二维符号的数据编码库,采用C语言编写.可以通过手持终端进行扫描,如CCD手机扫描.QR码可容纳7000个数字或4000个字符. libqrencode 3.3.0该版本添加EPS.ANSI和ASCII文本输出的支持.添加QRcode_APIVersion()和QRcode_APIVersionString(). 软件信息:http://fukuchi.org/works/qrencode/ 下载地址: http://fukuchi.org/works

本月推荐:15 个有用的 JavaScript 和 CSS 库

高质量的网页设计需要直观和用户友好的界面,而且屏幕上的元素也起着非常重要的作用.Web 设计师不断地寻找优秀代码的集合,希望能提升工作效率.但找到合适的工具库并不总是那么容易的.网络上有太多的资源可以使用,而且也是免费的,因此很难判断哪些资源比较好.这就是精心搜索并编写这个最好的库列表的原因. 无论是希望创建一个视觉上吸引人和功能强大的布局,还是需要在表单和其他区域添加屏幕上的规则和验证,你都会喜欢这个集合.这里列出的库是由具有丰富网页设计经验的专家创建的,这些库不仅是经验丰富的设计师的优秀工具

css百度分享-请高手帮改一个CSS代码 让百度分享和文章链接并排

问题描述 请高手帮改一个CSS代码 让百度分享和文章链接并排 .Article-Tool{ border:1px solid #c3d4e7; position:relative; top:-1px; text-align:right; padding:8px; vertical-align:middle; height:15px; background-color:#f4f8fd} .Article-Tool a{width:16px;height:16px;line-height:16px;

gcc-GCC编译时 链接阶段未指定正确的库文件 请大神帮忙看下

问题描述 GCC编译时 链接阶段未指定正确的库文件 请大神帮忙看下 解决方案 头文件有正确包含么?函数名拼写正确么?没找到这个函数. 解决方案二: 你的函数库文件没有link,你需要编译的时候通过-L来指定对应的lib 解决方案三: 我在做linphone 然后就出现问题了

十五个有趣的JavaScript与CSS库

在十一月份的前端技术列表中,我们整合了一些令人感到惊叹的 GitHub 项目,其中包含了新的 CSS 框架.node.js包管理器,以及用于实现图标.加载效果.工具提示的纯 CSS 解决方案. 那么,让我们一起来看看吧.Have Fun ! 1. Wing Wing 是一个微型(压缩后仅有4KB)响应式的 CSS 框架,它提供了一个 12 列响应式网格以及基础的样式组件集,可为你的建站工作打下坚实的基础.当然,这个项目最酷的地方在于,它绝大多数的 HTML 元素都是自动样式化的,而不需要任何额外

整理的9个实用的PHP库简介和下载

1. ReCAPTCHA The reCAPTCHA 库让你可以为网站创建高级的 CAPTCHA 系统,这个系统其实是用来生成验证信息的,甚至包括语音验证.当然还有 reCAPTCHA 服务可以使用,其提供易用的免费 API,值得在你的网站试试. 下载 ReCAPTCHA 获得 API Key 文档 2. Akismet Akismet 是个供小站点使用的免费服务,用来修改规范将加入数据库的评论(防止恶意评论).这个库一直在改善. 详细参考 Akismet 介绍 3. Services_JSON

s3c2410上搭建QT/Embedded4.8.5开发环境(二)--安装arm平台qt库qt-everywhere-opensource-src-4.8.5

[目标板]s3c-2410 [虚拟机]CentOS6.4 kernel-2.6.32 [编译器]gcc-4.4.6 [交叉编译器]arm-linux-gcc 4.3.2 安装并配置交叉编译器arm-linux-gcc4.3.2 ①下载交叉编译包, 大家也可以选择自己编译并搭建arm-linux-gcc, 但是那样很麻烦,我们不如直接用网络上已经编译好的 arm-linux-gcc-4.3.2.tgz---http://www.arm9.net/download-arm-linux-gcc-4.3