Group class to complete the page layout style _css/html

Source: Internet
Author: User
That's how I do div layout code. I don't know what I mean, I'm not sure.
My idea is to be able to do this in the future: Assemble the page div layout with standard parts

I divide class into 2 kinds, layout class, Style class, layout class is skeleton, style class is clothes
As an example:
Like the left column in the layout.
First of all, its properties are: The left column, width, background color, font color, etc.

1. First, you define a class, such as:. Layout, mainly used to control the size of the page
. layout{width:98%;margin:0 Auto;text-align:left;}

2. Then 3 basic layout Classes (L,M,R) are defined
. L{float:left}
. M{width:auto}
. R{float:right}
I have 2 column layout also categorized in the 3 column layout, because the 3 column layout, the left and right column width is 0, 3 columns into 2 columns.
When we write basic layout code, it's best to be written in the 3 column format.

3. corresponding to the layout class, define the style class you need, such as width, height, background color, etc. these are all style elements
. Class_l{background: #ff0; margin-right: -150px;width:150px;}
. Class_m{background: #f00; margin:0 140px 0 150px;}
. Class_r{background: #00f; Margin-left: -140px;width:140px;}

The layout class has only one set, and style class can be defined a lot.
For example, to make a small 2-column layout inside the column
You can then define a style class
. Mid_l{background: #ff0; margin-right: -100px;width:100px;}
. Mid_m{background: #f00; margin:0 0 0 100px;}

4. Combine layout class and style class to reference in code
<div class= "L class_l" ></div>
<div class= "L mid_l" ></div>
2 classes are referenced, the middle with a space, the front is the layout class, followed by style class, you can continue to follow the space reference, if you need a special definition, you can give this div take an ID to define.

Some of the other common style classes can also be written in general, such as implicitly can be defined as
. Hide{display:none}
Then when needed, class= "xxx hide" to quote, very convenient.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> combination class</title> <style> body, HTML {background: #fff; Color: #000; font-size:12px; margin:0; line-height:150%;p adding:0px; Text-align:center; }/* Layout of the large frame, used to control the overall page size, size by their own control/#layout {width:98%;margin:0 auto;text-align:left;} /* page left, middle, right layout/* L{float:left}. R{float:right}. M{width:auto}/* page left, middle, right layout class*/. Lclass{background: #ff0; Margin-right: -150px;width:150px;} . Mclass{background: #f00; margin:0 140px 0 150px;} . Rclass{background: #00f; Margin-left: -140px;width:140px;} . L1{background: #dd0; margin-right: -200px;width:200px;} . M1{background: #ee0; margin:0 0 0 200px;} . L2{background: #dd0; margin-right: -50px;width:50px;} . M2{background: #ee0; margin:0 0 0 50px;} </style> </pead> <body> <div id= "Layout" > <div class= "L Lclass" > Left & Lt;/div> <div class= "R rclass" > <div class= "L L2" >Here</div> <div class= "M m2" >there&lt ;/div> right </div> <div class= "M mclass" > Middle <div class= "L L1" >here1&lt ;/div> <div class= "M M1" >There1</div> </div> </div> </body> </ Html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.