CSS design rules for Alibaba Chinese site)

One idea can only be mainstream when many people use it. A set of solutions can be implemented only after everyone's approval. I hope that friends at the front of the Chinese site can roughly read the style content and give valuable comments. Modular styles are being added gradually. We sincerely accept more modularized page style suggestions.

• One of the key points of thinking: do not consider using table, and replace TD with Div or Li with float in horizontal layout. Use ul Li with caution. UL Li can be used when there are duplicate units. If there are no duplicate units, use ul instead.CodeLooks untidy.

• Key Point 2: maximize the advantages of UL Li. Using ul Li can reduce the number of class = "" statements. When you put a set of repeated units into Li, it is enough to define a class = "in ul. Of course, the price will be paid. UL's compatibility problem is more than doubled than Div.

• Key Aspect 3: fill all blank spaces with margin and try not to use padding. To ask the reason, I can only say that padding can be replaced by margin. Otherwise, only margin can be used. When dealing with compatibility problems, you can focus only on margin without considering padding.

• Key Aspect 4: do not define the height value for any non-image background container, so that the container can adapt to the content height. The advantage is a huge basket, and the disadvantage is a big flaw. Let's talk about the disadvantages, when the two containers are aligned with the height, they must be repeated for a high volume. In addition, they must be filled with appropriate margin-top values in different browsers.

• Five key points of thinking: If we can solve the problem with one layer, we will never use two layers. We should try to reduce nesting as much as possible. We will strictly prohibit ul Li from setting another ul Li. We will be at your own risk, so far, I have not tried ul Li nesting ul Li. The practice of this method is blank. Theoretically, this method will bring a lot of bugs.

• Key Aspect 6: CSS style classification is very detailed, and multiple class declarations are required. For example, class = "Left BD orange" is ranked in no particular order.

• Seven Key Points of thinking: be familiar with the differences in style interpretation of various browsers, take work notes carefully, prepare four browsers, debug compatibility, and open another photoshop for measurement at any time. The perfect goal is to be accurate to 1px compatibility.

 

Style priority

Before that, explain the meaning of special symbols-'+ ''_''! Important ', which is identified by different browsers. For example, if a parent claims a child from a kindergarten and sees the "+" symbol on his head, this is a child of the IE family. Firefox and opear do not recognize it, of course, there are more than three symbols, but these three can meet most of the needs.

'+' The style with this symbol can only be claimed by IE

'_': The style with this symbol can only be claimed by IE6, but not by IE7.

'! Important 'in the same style definition, that is, in braces {}, Firefox and opera are preferentially claimed. If IE does not recognize it, it is ignored '! Important. '! The important style is preferred for all browsers. Internet says IE does not recognize '! Important.

Example: <style type = "text/CSS">. def {Background: yellow; + Background: Blue; _ Background: Red ;}</style> <Div class = "def"> DD </div> result: IE6 is red, IE7 is blue, and Firefox and opera are yellow. For example: <style type = "text/CSS">. def2 {Background: Black! Important ;}. def1 {Background: yellow; + Background: Blue; _ Background: Red ;}</style> <Div class = "def1 def2"> DD </div> result: black color for all browsers

• Principle 1:The text appears from top to bottom, and the style appears later takes precedence over the same style that appears earlier.

  Example:

  <Style type = "text/CSS">

  . Def1 {Background: black ;}

  . Def2 {Background: yellow ;}

  </Style>

  <Div class = "def2 def1"> DD </div>

  Result: All browsers are yellow. Note: they are irrelevant to the order in the class = "quotation marks. def1 and. the order in which def2 is declared ,. the weight declared after def2 is high.

• Principle 2:Id Declaration (that is, the style starting with #)> class declaration (that is, the style starting with.)> label Declaration (that is, similar to the style starting with Div)

  The preceding three statements are in different magnitude. In terms of weight, the start of a div is equivalent to 1 gram of weight, and the start of a. Statement is equivalent to 1 kilogram of weight. # The start is equivalent to 1 ton of weight.

  Example:

  <Style type = "text/CSS">

  # BB {Background: pink}

  . Def {Background: black ;}

  Div {Background: yellow ;}

  </Style>

  <Div id = "BB" class = "def"> DD </div>

  Result: All browsers are pink-colored. Note: although priority-based principle 1 is used, the weight displayed later is high, but it is only compared under the same heavyweight, the priority principle 2 varies by weight level.

• Priority Principle 3:The number wins. If the same style declaration is a braces {} consisting of multiple #. Or Div, the weight increases by the magnitude of the symbol

  For example:# BB # TT # dd {Background: Red}The weight is equal to 3 tons.

  # BB. tt ul. dd Li {Background: Red}The weight is equal to 1 ton, 2 kg, and 2 grams. For this precise weight, you do not need to give an example.

  Note: priority principle 1 applies only to situations where two style statements are equally heavy

• Priority Principle 4:'! Important '. It is equivalent to infinite weight. It has been explained before. Note that in IE, the same style declaration is shown in braces! Important will be washed out by the subsequent style with the same name.

  <Style type = "text/CSS">

  . Def1 {Background: yellow! Important; Background: red ;}

  . Def2 {Background: green ;}

  </Style>

  <Div class = "def1 def2"> DD </div>

  Result: Green, Background: yellow under IE! Important is flushed by the background: Red, while the background: Red and Background: Green are under the priority principle.

• Principle 5:Near the water tower. <Div style = "Background: Black"> </div> the style written directly in the element body has the highest priority! (Second only! Important) is described by weight, which can be set to millions of tons.

  <Style type = "text/CSS">

  . Def1 {Background: red ;}

  </Style>

  <Div class = "def1" style = "Background: Black"> DD </div>

  Result: black.

  <Style type = "text/CSS">

  . Def1 {Background: red! Important ;}

  </Style>

  <Div class = "def1" style = "Background: Black"> DD </div>

  Result: Red.

  <Style type = "text/CSS">

  . Def1 {Background: red! Important ;}

  </Style>

  <Div class = "def1" style = "Background: Black! Important "> DD </div>

  Result: black.

  Note:! Important's infinite weight cannot be too good. As you know, two infinite numbers cannot be compared. If two style definitions are added! Important, cannot be compared?

  No, so please! Important's unlimited heavyweight can be understood as 10 million tons.

The provided styles can be divided into the following types:

• A> tag optimization indicates tag optimization.

  optimizes the body, TD, select, input, form, UL, Li, IMG, H3, and P, to be expanded. It mainly optimizes margin, padding, and font-size

  and emphasizes several important issues.

  FORM {margin: 0px;} Sometimes blank appears on the page, most of the time, it is because the form's margin

  IMG {border: 0px} is ignored. If there is no border: 0px, when is set to , the image will have an ugly border color

  input {font-size: 12px;} which is very important, the password box without the font-size limit will display a large dot and support a large input box

  body, if the font-family: attribute is not defined, under font-size: 12px, the text in IE actually occupies 14px while that in FF is 15px, of course, even if it is added, the text occupies a different height in opera, so you must not forget line-height or height in any text.

  H1 {font-size: 14px; margin: 7px 0px ;}

  H2 {font-size: 14px; margin: 7px 0px; text-align: Left}

  H3 {font-size: 14px; margin: 7px 0px; text-align: center}

  H1-H3 recommends that all page bold content replace Custom font-weight with a H1-H3, Seo teaches us to use h to improve search efficiency.

• B>Link.You can modify or add the link style you like.
  Note. lk_l A {text-Decoration: underline! Important} And. lk_n A {text-Decoration: none! Use of important}

• C>For testingHence the name. This can be used when you need to perform a test. For example, if you want to see the border of a DIV, you only need to input two letters 'bd 'to the class'

  . Lb usage example: <ul class = "LB"> <li> </LI> </ul>. In this way, all the Li borders under UL are displayed.

• D>Common.It is important to explain in detail.
  . CLR {clear: both}In order to retain the previous habits, do a downward compatibility. Note that the clear layer style is in

  . C {clear: Both; overflow: hidden; + overflow: visible}The new style has been redefined, please try to use the new style, and remember that the new style can only be used in a separate clear Layer

  -- What is a separate clear layer? <Div class = "C"> </div> indicates that there is no classname except for the. C style, and the <DIV/> is empty.

  Why do we need to redefine it? For compatibility with opera, it was only recently compatible with opera. It was also because of the Recommendation of colleagues on opera. (If it is too troublesome, you don't have to go into it. Just use it)

  . L {float: Left; display: inline}The most common attribute. However, note that display: inline is added to the new definition. In the current architecture, the margin layout is mostly used, while the float element has a famous double margin bug in IE6, the solution is to add display: inline to the float element. Of course, adding this attribute to all float elements is not completely okay, and UL will be slightly faulty, there will be style solutions for this type of problem later, which is much easier than solving the double margin problem for the global float element.

  . F {width: 100%}The role of this attribute is self-evident. Set the width of this layer to the width of the upper layer. It should be emphasized that this attribute should be used with padding, border, margin-left, and margin-Right. These attributes will increase the actual width of the element, in ie, the excess width will support the upper-layer elements, while in ff and opera, there will be no larger support.

  . Z {ZOOM: 1}A very important style is used to solve multiple bugs on layout, a block-level element in IE6.

  . H {width: 50%; + width: 49.99%}Keep up with the above, and set the width of this layer to half of the width of the upper layer. I don't want to think about why 49.99%. IE6 won't let 50% pass. Below is the test code (global global.css Style File Reference)

  <Div class = "BD">

  <Div class = "l h BG H17"> </div>

  <Div class = "R h BG H17"> </div>

  </Div>

  . B. S. M. gNot to mention, control the text size and bold.

  . Pa {position: absolute}The definition layer is an absolute position. After the float element is defined as. Pa, the float attribute is invalid. Since the left and top attributes of the absolute layer are indispensable, or the meaning of the absolute layer is lost, do not forget to set left and top. In the upper layer of the absolute layer, remember to set the relative layer position: relative. Otherwise, the objects referenced by the left and top attributes of the absolute layer will be the window of the outermost layer, which is out of the body, no one wants the defined elements to go outside the body. The Absolute layer in the relative layer can be located at will. In combination with the Z-index attribute, HTML code can be used to simulate Photoshop painting. ^ _ ^ is a joke.

  . PR {position: relative}Given the left and top values is relative to the original position. Generally used in combination with. Pa.

  . DL {display: inline}

  . DB {display: block}

  . DN {display: none! Important}

  The three above are important, practical, and practical. <Div class = "bd dn"> </div> you only need to knock two letters, and this layer is gone.

  . In {float: Left; display: inline; margin-left: 4px; margin-top: 4px; width: 16px; Height: 10px; overflow: hidden;

  Background: URL (http://img.china.alibaba.com/images/cn/home/070214/new_l.gif) No-repeat}

  "New" icon

  . Ih {float: Left; display: inline; margin-left: 4px; margin-top: 4px; width: 16px; Height: 10px; overflow: hidden;

  Background: URL (http://img.china.alibaba.com/images/cn/home/070214/hot_l.gif) No-repeat}

  "Hot" icon

  Easy to use! However, the above element float is required. Remember to adjust the position with the margin attribute. Example:

  <Div class = "BD l23">

  <Div class = "L"> ddddddddddddddddddd </div> <Div class = "Ml7 mt5 in"> </div>

  <Div class = "C"> </div>

  </Div>

  . Oh {overflow: hidden}Hide excess content

  . TC {text-align: Center}Text Center

  . BN {border: none! Important}Eliminate border, yes! Important weighting.

  . B _1 {border: 1px solid # b8b8b8}

  . Bt_1 {border-top: 1px solid # ff7300}

  . Bt_2 {border-top: 1px dashed # CCC}

  . Bt_3 {border-top: 1px dashed # ffb980}

  . Bl_1 {border-left: 1px dashed # CCC}

  . Bg_1 {background-color: # fff1e6}

  . Bg_2 {background-color: # f0f0f0}

  . Bg_3 {background-color: #9acd68}

  Border and background will not be mentioned.

  . O_1 {opacity:. 7; filter: alpha (opacity = 70 )}

  . O2 {opacity:. 9; filter: alpha (opacity = 90 )}

  Two transparent attributes are used for transparent layers.

  . L17 {Line-Height: 17px ;}

  . L20 {Line-Height: 20px}

  . L23 {Line-Height: 23px}

  . L15p {Line-Height: 150%}

  It should be emphasized that line-height is one of the most common attributes. For compatibility, all text on the page should have the line-height attribute (this attribute can be inherited by quilt elements, so don't worry about wasting ink ). As for whether to use PX or %, it is recommended to use PX. The height of the text displayed in different browsers is different. Only % can be used to enlarge the difference and PX can be used to eliminate the difference. % Is it unnecessary? Of course it is useful, regardless of the height difference, likeArticleWe recommend that you use % to increase the size of the selected font.

  In this way,CommonPartIt's over.

• E>LayoutLayout

  . Ma {margin-left: auto; margin-Right: auto}

  Div Center style. This attribute allows block-level elements to center themselves, rather than centered content.

  . W778 {width: 778px; margin-left: auto; margin-Right: auto}

  . W952 {width: 952px; margin-left: auto; margin-Right: auto}

  Two la s are used. w952 is used for custom la。 s in. w778 for narrow la S.

• F>List ul LiDedicated Style

  It can be said that this is the top priority. Most of the content on the homepage is in the unordered list. Its large scale requires complete style support.

  Ul. lzb, ul. lzl {ZOOM: 1} these two styles include the following two applications of zoom in UL

  Ul. lzb Li {ZOOM: 1; + margin-bottom:-4px}For the bug of margin-bottom: 4px of UL Li element in IE (bug condition: Float element in Li), the style of Li can contain float left and float right div, and Li can be compatible with multiple line structures. This is the style ul. ll20 Li cannot be implemented. (For specific cases, see the XLS document)

  Ul. lzl Li {ZOOM: 1; + margin-left:-16px}The appearance of this style is mandatory. Remember to avoid the double margin bug in IE6, we have added display; inline to all float elements, this leads to unexpected indentation of the float attribute ul in IE. This style can only be added to solve this problem.

  Ul. ll20 Li {Line-Height: 20px; Height: 20px; + margin-bottom:-4px}

  Ul. ll23 Li {Line-Height: 23px; Height: 23px; + margin-bottom:-4px}

  The above two styles apply to a fixed height single line Li. What is a single line Li? The text in Li does not contain line breaks.

  Line-height equivalent to height indicates vertical center of the text in Li. Li with this style can contain float left and right div, which is a better way to solve the compatibility of single line Li.

  Ul. li20 Li {Background: URL (http://img.china.alibaba.com/images/cn/home/070215/d_ico.gif) 5px 7px no-Repeat;

  Padding-left: 15px}

  Ul. li23 Li {Background: URL (http://img.china.alibaba.com/images/cn/home/070215/d_ico.gif) 5px 10px no-Repeat;

  Padding-left: 15px}

  There is nothing to say about these two styles. They are aimed at the Li background style with a height of 20 PX and 23px respectively. The background is actually a square point with no repeat.

  Ul. ll Li {float: Left; display: inline}

  Ul. lr Li {float: Right; display: inline}

  Do I want to connect Li as a train first? Use the above two styles to make all Li float.

  Ul. LDL Li {display: inline}I don't like this style very much. It can also make Li connect first like a train, but it is too costly. All Li changes to inline, and many CSS styles do not work for inline elements, including the basic width, height, and margin-top

  Ul. LBT Li {border-top: 1px dashed # CCC}

  Ul. lbl_1 Li {border-left: 1px solid #000}

  The two styles that add borders to Li give Li better separation effects.

  In this way, the UL Li special style section is over.

• G>StyleMargin Control

  . H1p {Height: 1%}

  . H1 {Height: 1px; overflow: hidden}

  . H16 {Height: 16px}

  . H17 {Height: 17px}

  . M1 {margin: 1px}

  . M7 {margin: 7px}

  . M14 {margin: 14px}

  . Ml3 {margin-left: 3px}

  . Ml5 {margin-left: 5px}

  . Ml7 {margin-left: 7px}

  . Ml9 {margin-left: 9px}

  . Ml14 {margin-left: 14px}

  . Ml18 {margin-left: 18px}

  . Ml21 {margin-left: 21px}

  . MR3 {margin-left: 3px}

  . Mr5 {margin-left: 5px}

  . Mr7 {margin-Right: 7px}

  . Mr9 {margin-Right: 9px}

  . Mr14 {margin-Right: 14px}

  . Mr18 {margin-Right: 18px}

  . Mr21 {margin-Right: 21px}

  . MT1 {margin-top: 1px}

  . Mt3 {margin-top: 3px}

  . Mt5 {margin-top: 5px}

  . Mt7 {margin-top: 7px}

  . Mt9 {margin-top: 9px}

  . Mt11 {margin-top: 11px}

  . Mt14 {margin-top: 14px}

  . Mt21 {margin-top: 21px}

  . Mt28 {margin-top: 27px}

  . P7 {padding: 7px}

  . P14 {padding: 14px}

  . PT7 {padding-top: 7px}

  . Pt14 {padding-top: 14px}

  All the above styles are reserved for white. The combination of height and margin can realize the vertical orientation of 1px-31px to retain the continuous values (except for the unlucky number 13 ), in more cases, we will use margin separately. Pay attention to the values that can be used by margin.

  The last few padding styles need to be explained. Remember to say that we replaced padding with margin. Here we have to break down the text. For a bowl-shaped Loader with three border, that is, border-top; if you use margin-top for the first sub-layer in the bowl, it does not seem to be able to achieve your desired effect. Use padding-top for the bowl. the padding of this layer is equivalent to the margin of the sub-layer.

• H>Combination Style

  /* Vertical align middleVertical center Style

  Ex:

  <Div class = "VM"> <Div class = "VMA"> <Div class = "vmb">

  # Content #

  </Div>

  -Please set the height attribute in addition before using it. Height: 100px for example. Reset the height value in. VM,. vmb {Height: 100px} before use.

  */

  . VM,. vmb {Height: 100px}

  . VM {position: relative}

  . VMA {position: absolute; Border: none! Important; top: 0px; + TOP: 50%; display: Table}

  . Vmb {+ position: relative; + TOP:-50%; display: Table-cell; Vertical-align: middle; + Height: Auto! Important}

  There is nothing to say. To see the effect, open border.

  /* Picture LinkText Link combination

  Ex:

  <A class = "PL" href = "#" mce_href = "#"> <div> # Picture notation # </Div> </a> <a class = "PL" href = "#" mce_href = "#"> <div> # Picture notation # </div> </a> <Div class = "C"> </div>

  -Don't forget <Div class = "C"> </div> at the end. PL has float attribute do not forget to add the clear floating layer at the end, because. the PL layer has floating attributes.

  */

  . Pl {float: Left; text-align: center; padding-bottom: 4px; Background: # FFF; Border: 1px solid # CCC}

  . Pl IMG {display: block; margin: 7px; Border: 1px solid # CCC}

  HTML>/**/body. pl {margin-bottom:-1px}

  @ Media all and (min-width: 0px) {. pl {margin-bottom: 0px! Important ;}}

  There is nothing to say, just test the code. practical things are generally very simple. The last two lines are worth noting. The last and last lines are identifiable by Firefox and opera. The last line is only recognized by opera.

  /* ShadowBlock-level element shadow effect

  Ex:

  <Div class = "Sh R">

  <Div class = "Sha" style = "width: 400px; Height: 600px; Border: 1px solid green">

  # Content #

  </Div>

  <Div class = "SHB"> </div>

  <Div class = "SHC"> </div>

  </Div>

  -You shoshould move the float attribute from. Sha to. Sh class. The float attribute on SHA needs to be transferred to class. Sh.

  */

  . Sh {position: relative; Background: # acacac ;}

  . Sh. Sha {margin: 0px 2px 2px 0px; Background: # FFF ;}

  . Sh. SHB {position: absolute; top: 0px; Right: 0px; width: 2px; Height: 2px; overflow: hidden; Background: # FFF ;}

  . Sh. SHC {position: absolute; bottom: 0px; left: 0px; width: 2px; Height: 2px; overflow: hidden; Background: # fff}

  In this example, there is no shadow effect layer. The Code is as follows and may have the float attribute. For details, see "R" in the class"

  <Div class = "Sha R" style = "width: 400px; Height: 600px; Border: 1px solid green">

  # Content #

  </Div>

  To add a shadow to it, we need to set another layer outside it and add two peer layers.

  <Div class = "Sh R">

  <Div class = "Sha" style = "width: 400px; Height: 600px; Border: 1px solid green">

  # Content #

  </Div>

  <Div class = "SHB"> </div>

  <Div class = "SHC"> </div>

  </Div>

  At the same time, the float attribute of the original layer should be transferred to the outer layer of the new set.

  /* TitleTitle bar style

  Ex:

  <Div class = "TT">

  <Div class = "TTL"> </div>

  <Div class = "TTC"> title words </div>

  <Div class = "TTR"> </div>

  </Div>

  */

  . Tt {position: relative; Height: 37px; line-Height: 37px; Background: URL (http://img.china.alibaba.com/images/cn/blog/home/070807/ttsty_tt_01.gif) Repeat-x}

  . TTC {float: Left; display: inline; font-size: 14px; font-weight: bold ;}

  . TTL {float: Left; width: 2px; Height: 100%; Background: URL (http://img.china.alibaba.com/images/cn/blog/home/070807/ttsty_lt_01.gif) No-repeat}

  . TTR {float: Right; width: 2px; Height: 100%; Background: URL (http://img.china.alibaba.com/images/cn/blog/home/070807/ttsty_rt_01.gif) No-repeat}

  It should be said that this style is not universal, because not all titles are the same, this title style is for the title of the left-right structure, adaptive width, to change the background, you need to reset the following style.

  . Tt {Height:; line-Height:; Background :;}

  . TTL {width:; Background :;}

  . TTR {width:; Background :;}

  Therefore, this style is not universal. In actual use, almost all styles should be rewritten. Here we just want to provide a model, which is also convenient.