整理了二个基本的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)
整理了二个基本的css库(高手请绕道)相关推荐
- 吐血整理一个月——终于把所有Python库整理齐了.....
大家好! 最近天天熬夜,头发都掉完了, 就为了把Python所有的库完全整理一遍, 希望对大家有所帮助! 一.数据处理 (https://jq.qq.com/?_wv=1027&k=2Q3YT ...
- 前端面试题整理——(第一弹 HTML和CSS)
文章目录 前端面试题整理--(第一弹 HTML和CSS) 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什 ...
- c语言编简单博弈小游戏,[2018年最新整理]实验二:利用α-β搜索过程的博弈树搜索算法编写一字棋游戏.doc...
[2018年最新整理]实验二:利用α-β搜索过程的博弈树搜索算法编写一字棋游戏 实验二:利用α-β搜索过程的博弈树搜索算法编写一字棋游戏 一.实验目的与要求 (1)了解极大极小算法的原理和使用方法,并 ...
- SpringBoot笔记整理(二)
SpringBoot笔记整理(一) SpringBoot笔记整理(二) SpringBoot笔记整理(三) SpringBoot笔记整理(四) Spring Boot与日志(日志框架.日志配置) 1. ...
- 推荐10个最好的Javascript和CSS库
1.localForage 用于提高Web应用程序在本地存储数据以便脱机使用的能力. 读写操作与localStorage类似,但是可以保存许多类型的数据,而不是只保存字符串. 2.AOS AOS是一个 ...
- 值得使用的CSS库添加图像悬停效果!
一个悬停效果简单来说可以定义为在颜色,产生的效果文字的大小或形状或任何其他形式的变化发生,当你把鼠标光标移动到图像.这可以通过CSS编码容易实现.这里我们介绍国外8个CSS库添加图像悬停效果,提高网站 ...
- Web 开发中 20 个很有用的 CSS 库
在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS 库,框架,应用这样的工具能够为开发者做 ...
- CoreData整理(二)——多线程方案
CoreData整理(二)--多线程方案 目录 为何使用多线程 如何使用多线程 多线程方案 为何使用多线程 到了这里你一定会问,增删改查功能已经实现了,用的好好的为什么要使用多线程呢?其实想一想,Co ...
- “非常有用”的JavaScript 和 CSS 库插件推荐
在前端开发过程中,高质量的网页设计需要直观和用户友好的界面,而且屏幕上的元素也起着非常重要的作用.Web 设计师不断地寻找优秀代码的集合,希望能提升工作效率.但找到合适的工具库并不总是那么容易的. 以 ...
最新文章
- Nginx-rtmp 直播媒体实时流实现
- [转]详细的mysql时间和日期函数
- 5G 信令流程 — 5GC 的业务请求(Service Request)
- hdu 1116 Play on Words(欧拉通路)
- Vue3导入Vue-router报错:Uncaught SyntaxError: The requested module does not provide
- linux 路由表设置 之 route 指令详解
- idea 个性化定制快捷键
- 华氏度和摄氏度的相互转化
- 2021认证杯 第二阶段 思路加代码
- 【泡泡机器人翻译专栏】LSD-SLAM : 基于直接法的大范围单目即时定位和地图构建方法
- 前端剑法第一式———砺锋
- JavaScript下雨效果
- java面试常见设计模式
- php怎么求最小公倍数,用PHP实现最小公倍数
- Windows下cmd命令—systeminfo
- 2022-7-8 Leetcode 904.水果成篮
- 乱七八糟的笔记(%)
- 中国古人记录的奇妙客星
- fpga挂一片ddr2_基于Cyclone III FPGA的DDR2接口设计分析
- 快速回顾 MySQL:联表查询