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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/465832.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日一题(43)—— 数组越界

下面这个程序执行后会有什么错误或者效果: #define  MAX  255 int main() {unsigned char A[MAX],i;for (i0;i<MAX;i){A[i]i;} }解答&#xff1a;死循环加数组越界访问&#xff08;C/C不进行数组越界检查&#xff09; MAX255 数组A的下标范围为:0..MAX-1,这是其一.. 其…

P1133 教主的花园 (动态规划)

题目描述 教主有着一个环形的花园&#xff0c;他想在花园周围均匀地种上n棵树&#xff0c;但是教主花园的土壤很特别&#xff0c;每个位置适合种的树都不一样&#xff0c;一些树可能会因为不适合这个位置的土壤而损失观赏价值。 教主最喜欢 3种树&#xff0c;这3种树的高度分别…

如何快速构建嵌入式全栈知识体系?

嵌入式是一门交叉学科。一个嵌入式电子产品&#xff08;比如手机&#xff09;从底层到上层&#xff0c;一般会涉及半导体芯片、电子电路、计算机、操作系统、多媒体等不同专业领域的知识。很多从事嵌入式开发的朋友&#xff0c;通常来自不同的专业&#xff08;电子、电气、计算…

台湾高僧称游戏中杀人是罪业死后要下地狱

台湾著名高僧净空法师的一段谈因果报应的视频&#xff0c;近来被上传到网络上&#xff0c;引发网友特别是游戏玩家的极大反应。净空法师在这段视频中说&#xff0c;在电子游戏中杀人所造下 的罪业和杀真人是相同的&#xff0c;死后肯定会下阿鼻地狱&#xff0c;出来后也还要慢慢…

SpringBoot 封装返回类以及session 添加获取

1、创建返回类Result public class Result<T>{/*错误码*/private Integer code;/*提示信息 */private String msg;/*具体内容*/private T data;public Integer getCode() {return code;}public void setCode(Integer code) {this.code code;}public String getMsg() {r…

每日一题(44)—— 请列举一个软件中时间换空间或者空间换时间的例子

请列举一个软件中时间换空间或者空间换时间的例子&#xff1a; --->时优 void swap(int a,int b) {int c;ca;ab;bc; } --->空优 void swap(int a,int b) {aab;ba-b;aa-b; }

迅雷的声音:摆脱视频产业的经济化困境

两个视频版权联盟之间的交锋日前到了白热化阶段&#xff0c;居然在深圳发生了两个发布会唱对台的戏剧化场面。迅雷发表声明“承诺推动视频市场正版化”&#xff0c;迅雷CEO甚至表示要去公证处跟对手“比谁的版权多”。在我看来&#xff0c;虽然去公证处大可不必&#xff0c;但至…

嵌入式系统开发者需要掌握什么技术?

大家好&#xff0c;我是小嵌&#xff0c;在知乎上看到这个问题&#xff0c;其中有一个答主的答案很经典&#xff0c;特此分享给大家。说实话&#xff0c;问题中嵌入式开发这个话题有点庞大&#xff0c;毕竟它涵盖的领域和范围很宽泛。作为一个在嵌入式软件开发方面工作了十多年…

做决定要趁早

之前接触的一个读者朋友&#xff0c;几个月前跟我咨询了问题&#xff0c;那时候因为有个决定困扰他&#xff0c;已经快抑郁了&#xff0c;不过到现在为止&#xff0c;还没有做决定。做决定这个事情&#xff0c;我希望不要拖太久&#xff0c;不要咨询太多无关的人&#xff0c;做…

2009第二届C++技术大会即将在上海隆重召开

2009第二届C技术大会即将在上海隆重召开 作为软件开发语言的翘楚&#xff0c;C对于现代软件的发展功不可没&#xff0c;特别是在系统软件开发领域&#xff0c;C扮演着关键的角色。中国作为全球软件产业最具潜力的市场&#xff0c;越来越多的企业认识到了C及相关系统软件技术在软…

大数据开发你需要知道的十个技术

前言 “当你不创造东西时&#xff0c;你只会根据自己的感觉而不是能力去看待问题。” – WhyTheLuckyStiff 汇总一些自己在大数据路上走过的弯路&#xff0c;愿大家不再掉坑… 1.分布式存储 传统化集中式存储存在已有一段时间。但大数据并非真的适合集中式存储架构。Hadoop设计…

每日一题(45)—— 字符数组找错

void test2() {char str1[10], str2[10];int i;for(i0; i<10; i)str1[i] a;strcpy( str2, str1 ); }这段代码有什么问题&#xff1f; 解答&#xff1a;如果面试者指出字符数组str1不能在数组内结束可以给3分&#xff1b;如果面试者指出strcpy(str2, str1)调用使得从str1复制…

华为这个事,是不是刷KPI?

最近闹的比较热闹的事情是&#xff0c;华为有人提交到Linux 上的代码被审核员点名批评刷KPI&#xff0c;并且&#xff0c;这个邮件还上了头条。提交的代码修改如下From: Zhen Lei <thunder.leizhenhuawei.com> To: Kees Cook <keescookchromium.org>,Anton Voronts…

前端小demo——全选和全不选

模拟购物车&#xff0c;实现全选或者全不选&#xff0c;或者其中任意一件单品单选的效果。 点击顶部复选框实现全选 列表中任意一项未选中&#xff0c;顶部复选框就是未选中的状态 <!DOCTYPE html> <html><head lang"en"><meta charset"UT…

PHP函数库06:PHP统计字符串里单词出现次数

<?functionfull_count_words($str) { //返回完整数组&#xff0c;包含字符串里每个单词 $wordsstr_word_count($str,1); $resultarray(); foreach($wordsas$w) { $lwstrtolower($w); //判断单词是否是第一次出现&#xff0c;是则设置为1&#…

每日一题(46)—— volatile

1.一个变量可以既是const 还是volatile吗&#xff1f;解释为什么&#xff1f; 可以&#xff0c;例如状态寄存器。它首先应该是volatile 因为它可以出乎意料的修改&#xff0c;而且应该是const&#xff0c;这个寄存器程序不应该去修改。 2.一个指针可以说volatile的吗&#xf…

毕业2年,我的工作小结

文章转自我的读者朋友&#xff0c;他毕业后从事的是BSP开发工作&#xff0c;主要做LCD模块&#xff0c;我们算是认识比较久&#xff0c;刚毕业那会聊的也挺多&#xff0c;时间过得很快&#xff0c;想不到他已经毕业两年了。最近几天公司&#xff0c;公司的小鲜肉多了起来。我偶…

[Luogu 1351] NOIP2014 联合权值

[Luogu 1351] NOIP2014 联合权值 存图&#xff0c;对于每一个点 \(u\)&#xff0c;遍历它的所有邻接点。以 \(u\) 为中转点的点对中&#xff0c;\((x,y)\) 的联合权值 \(w_x \cdot w_y\) 最大&#xff0c;当且仅当 \(x\) 与 \(y\) 的点权在 \(u\) 的所有邻接点中是前两大的。 成…

Something about WinCE6.0 R3

Windows Embedded家族 Windows Embedded CE概览 WinCE6.0 R3新增组件 R3的发布让WinCE6.0如虎添翼 嵌入式系统的Silverlight 引入Silverlight后UI新的体系结构 触摸手势的支持将彻底改变用户体验

我现在都在这里买元器件了!

记得上大学那会做单片机项目需要买元件&#xff0c;我们就需要跑到市中心去买&#xff0c;绕过大大小小的街道&#xff0c;可以看到坐在柜台的老板&#xff0c;然后跟老板拉扯几句&#xff0c;然后进入大包小包的买卖中。做一个最小系统板至少也要花个小100块钱&#xff0c;大学…