I sorted out two basic CSS libraries (Please bypass the experts)

A while ago, the only front-end developer of the company went away, and no one was on top in a short period of time. Therefore, we had to cut pages/JS jobs by ourselves. It took me a long time to drum up CSS, I sorted out two basic CSS libraries to cut pages and paste them here for backup.

Note:
P.css ---public.css, used to define some common public styles
L.css ---layout.css, used to define the common layout of the Grid System (it is unclear that the system of the grid system should first go here to scan the Literacy Program)

The directory structure of the compressed package is as follows:

D :.
│ Ifrm.html
│ Layout.htm
│ Pub.htm
│
─ ── C
│ L.css
│ P.css
│
─ ── Package
L.css
P.css

P.css is very simple. If you don't want to talk about it, go down and check it for yourself.

Pub.htmis the page for testing p.css.

L.css is the layout style. The naming rules are described as follows:

. G-c2-s5-sm --- G indicates that this is divided by grid (the default is 24*40, that is, 40px is a grid, 960 of the page is divided into 24 cells), C2 indicates that column is 2 (that is, the second column main, sub), S5 indicates that the sub column is 5 cells (5*40 = 200px, and the final width is pixel PX considering the 10px interval), SM indicates the layout Order (that is, sub-Main, sub column on the left and main column on the right)

. G-c2-s5-ms --- others same as above, the final SM represents main-sub, that is, main is on the left, sub column on the right

. G-c3-s5e6-sme --- C3 represents the three-column layout (main, sub, extra), S5 -- that is, sub occupies 5 cells, E6 -- that is, extra occupies 6 cells, SME is sub-Main-sub, indicates that sub is on the left, main is in the middle, and extra is on the right.

And so on...

Features:
1. comply with the so-called "progressive enhancement" semantics, that is, in HTMLSource codeIt is always in the order of main, sub, and extra to ensure that the main (main content-text area) is always read first during search engine analysis, and the other is sub (subtopic, usually the sidebar), and finally extra (additional sidebar, relatively least important, usually side advertising spaces)

2. In the HTML sourceCodeDo not make too much changes, if you want to change the layout structure, as long as the outermost class name can be modified, such as the layout of the g-c2-s5-sm, want to switch the main, sub location, just replace Class = "g-c2-s5-sm" with class = "g-c2-s5-ms ".

Compression version of the worker

Source File Download: http://files.cnblogs.com/yjmyzz/csslib_v0.1.rar
You are welcome to make some improvements. If there are any updates, please remember to notify me (Mail: yjmyzz # 126.com, MSN: yjmyzy # hotmail.com)