I. Preface
This is not an introduction to css, css basic features, please refer to: http://baike.bkjia.com/index.php? Doc-view-1645
Another advantage of topology is its flexible layout control, which is not as troublesome as table layout. You only need simple code to implement flow layout and any layout.
Where are the disadvantages of css? Needless to say, like JavaScript compatibility, browsers such as ie and ff have different interpretations of some of these elements, in fact, ff browser and chrome browser follow international standards, while ie8 has improved a lot, but most users are still in ie6 stage. In this field, it is not easy to understand, the prompt "Please use ie8 or ff browser to browse this site" on the webpage is a great harm to users. We originally existed for users. If users need to adapt to us, that is unwise.
2. Absolutely centered, any layout?
Among all css problems, the biggest headache is the absolute center of the page, because all browsers have different interpretations of the position and left attributes, the page called in ff browser is severely deformed in ie6. The principle involves that ie6's block interpretation is different from that in other browsers. Here, I will not explain it in detail, but I will only explain the solution.
Directly add html. This is a pure html code that does not contain any layout elements. Standard html is written like this:
The following is a brief description of the features of these codes, so that they can be compatible with all browsers. They are absolutely centered and can be deployed freely.
<Style> body {text-align: center; margin: auto; font-family: ;} # head, # nag2, # content {position: relative;} # logo, # poster, # nag1, # flashshow, # hot {position: absolute ;}. bluetext {color: # 2D60ED;} # head {width: 1000px; height: 170px; background-color: # fbe73b;} # headsideline {width: 100%; height: 10px; background-color: # ff2d1d ;}# logo {width: 300px; height: 160px; background-color: # eee; left: 0px ;}# poster {left: pixel PX; top: 40px ;}# nag1 {padding: 5px; padding-left: 15px; padding-right: 15px; background-color: # eeeeee; left: 500px; top: 130px; color: # ff2d1d; font-size: 14px; border: 1px solid # ff2d1d;} # nag1 a {color: # ff2d1d;} # nag1 a: hover {color: #1EA082; font-size: 16px ;}# nag2 {background-color: # eee; width: 1000px; height: 30px; left: 0px; top: 5px; color: # ff2d1d; font-size: 12px; border: 1px solid # ff2d1d; text-align: left ;}# nag21 {padding-top: 7px; padding-left: 15px; padding-right: 15px ;}# content {top: 10px; left: 0px; width: 1000px ;}# flashshow {left: 0px; top: 0px ;}# hot {left: 645px ;} </style> <center> <body> <div id = "head"> <div id = "headsideline"> </div> <div id = "logo"> </ div> <div id = "poster"> </div> <div id = "nag1"> <a href =" http://www.bkjia.com/ "_ Fcksavedurl =" http://www.bkjia.com/ "> Webmaster Information </a> <a href =" http://bbs.bkjia.com/ "_ Fcksavedurl =" http://bbs.bkjia.com/ "> Website Communication Forum </a> <a href =" http://tool.bkjia.com/ "_ Fcksavedurl =" http://tool.bkjia.com/ "> Webmaster tools </a> <a href =" http://alexa.bkjia.com/ "_ Fcksavedurl =" http://alexa.bkjia.com/ "> ALEXA ranking </a> </div> <div id =" nag2 "> <div id =" nag21 "> Current position: <label class = "bluetext"> webmaster Information </label> </div> <div id = "content"> <div id = "flashshow"> </div> <div id = "hot"> <div id = "hottitle"> </div> </div> </body> </center> <br/> <center> more tutorials, visit: <a href = http://www.bkjia.com/ Target = _ blank _ fcksavedurl =" http://www.bkjia.com/ Target = _ blank "> http://www.bkjia.com/ </A> </center>
First, pay attention to escaping from the outside of the body tag.
Tag, Which is required and familiar to everyone. The special feature of this Code is # head, # nag2, # css attribute of the content Tag: position. Note: to layout any layer in another layer, an external layer with position as relative must be embedded. The html page contains three major parts: Header, navigation, and body, each part is independent, so an external layer is embedded, and the position is set to relative, so that the three layers will be automatically laid out in a flow manner, the layer inside can be freely arranged in their respective regions, and the position of the Free layout should be set to absolute, and then left and top attributes can be set to be randomly arranged, left and top refer to the position of the layer nested outside, rather than the position of the entire page.
At this point, all the problems have been solved. In the future, all the layers will be written in the nested layers outside. The html written in this way is not only clear, but also easy to layout. Then let's talk about a small problem:
Iii. Padding Problems
In ff and ie, there is also a difference in the interpretation of an attribute, that is, padding. In ff, padding indicates compressing the specified Pixel into the layer, in ie, the specified pixels are compressed outward, resulting in inconsistent layer performance. This is a very common attribute. How can this problem be solved, as I used in the nag2 layer, I nested a small layer in the nag2 layer, set the padding of this layer to 10 pixels, and then hide the display of this layer, after that, no matter whether the layer expands or shrinks, the total size of the layer will always increase. In the user's opinion, the final effect is to achieve the padding effect, which is a very clever method, to solve this problem, there is actually another method similar to hack, that is, if it is a single line of text, you can change the distance between the text and the layer boundary by setting line-height, to achieve the padding effect. at that time, this method was not suitable for multiple rows.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
