Recently, ESET add my domain name to the black-list of their database. You can’t open my site and been warned my site is not safe if your PC is running the ESS or EAV. Why Eset block my site？The answer is obvious. That is reason that you come here. I promise that my site is pure, no virus, no spyware, no Trojan, no pop ads. You can test my word through intalling Kaspersky or other Antivirus Software. If you want open my site and take latest escalation ID & Activation Code, close your ESET software(disable antivirus and antispyware protection function temporarily) or by proxy or virtual machinor. You can also feed the RSS source http://feed.loserblog.cn.
Home > Programm > The CLASS combination is applied

The CLASS combination is applied

April 30th, 2008 Loser Leave a comment Go to comments

I is so to do DIV layout a code of.do not know to say of know not and clearly, gather together and see
My viewpoint is a future ability so:Assemble web page DIV layout with the way of standard piece

I is divided into 2 kinds of classes, layout class, style class, the layout class is a framework and the style class is clothes
Raise an example:
For example set up a medium left column
First it of the attribute have:BE a left column, width, background color, form of written color etc.

1.will define a class first, for example:.Layout, mainly use to control a page whole of size
.layout{width:98%;margin:0 auto;text-align:left;}

2.then will define 3 basic layout Classes(l, m, r)
.l{float:left}
.m{width:auto}
.r{float:right}
I 2 column the layout also is categorize in 3 columns layout, because in 3 column layouts, the width of or so column distinguishes to 0 times and 3 columns became 2 columns.
We write the time of basic layout code, had better write into 3 column formats.

3.define the style Class of demand towards should set up Class, , for example width, height, background color etc. these all belong to a style chemical element
.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;}

Set up the class onlies have 1 set and the style class can define a lot.
For example win the inside of the column is do one small of 2 column layout
Can define one more style class
.mid_l{background:#ff0;margin-right: -100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}

4.Put together the layout class moderate breezes space class knot, quote from so in the code
<Div class="the l class ＿ l"></div>
<div class="l mid_l"></div>
Quote from 2 class all and in the center partitions with the blank space, front of is to set up class, behind of is a style class, the behind can also continue blank space adduction, if need again special definition, you can give this div take an id to define.

A little bit other in common use style classes can also write in general use of, for example implicit can define for
.hide{display:none}
Then the time need, class="xxx hide" quote from, very convenient.


Code:
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html; Charset=gb 2312"/><title>combine CLASS</title><style> body, html{background:#fff; color: #000; font-size:12px; margin:0;line-height:150%;padding:0px; text-align:center; }/*The big frame of layout, use to control whole page size, the size is control by oneself*/#layout{width:98%;margin:0 autos;text-align:left;}/*the page be left, medium, right layout*/.l{float:left} .r{float:right}.M{width:auto}/*the page be left, medium, the class of right layout*/.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> </head><body> <div id="layout"> <div class="l lclass">Left<br /><br /><br /><br /><br /><br/><br /><br /><br /><br /><br /><br/> </div> <div class="r rclass"> <div class="ll2">Here</div> <div class="m m2">There</div> Right<br /><br /><br /><br /><br /><br/><br /><br /><br /><br /><br /></div> <div class="m mclass"> Middle <div class="ll1">Here1</div> <div class="m m1">There1</div><br /><br /><br /><br /><br /><br/><br /><br /><br /><br /> </div></div> </body> </html>

Categories: Programm Tags:
  1. No comments yet.
  1. No trackbacks yet.

  • Partner links