How to implement percentage adaptive frame web page template by html
This article mainly introduces html how to achieve a percentage adaptive framework web page template, the article is very detailed, has a certain reference value, interested friends must read it!
The width of the outermost DIV takes a percentage value to complete the structural center and adapt for a long time.
The agency adapts to the results of the web page template in the middle.
1. Broken HTML CSS template code:
Adaptive percentage HTML layout framework CSS5body {font: 100% Arial, neo-Arial; bac kilogram round: # 666666; margin: 0; padding: 0 auto;: center;color: # 000000;} # container {width: 80%; / * this will create a container that will capture 80% of the hunter width * / background: # FFFFFF;margin: 0 auto; / * passive margins (along with the width) will center the page * / border: 1px solid # 000000 Text-align: left; / * this will override "text-align: center" on the body element. * /} # mainContent {padding: 020px; / * Please remember that adding is the space outside the div box, and the margin is the space outside the div box * /} adaptive percentage mechanism
1, the outermost layout DIV width is set to the percentage value, no detailed px or em is set, the organization page width will adapt to the width according to the reader width. 2. The width of the outermost DIV is 80%, and the layout is centered. Set the 1px border to see the central achievement of the structure. 3. # mainContent set padding around 20px format, so that the form is isolated from the outermost DIV. There is a 20px distance between the left and the right of the outermost 20px.
H2 level additional title problem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,justo convallis luctus rutrum, erat nulla fermentum diam, at nonu sister y quam ante ac quam.Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.Quisque ornare risus quis ligula. Phasellus tristique purus an augue condimentum adipiscing. Aenean sagittis.Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.
The above is all the content of the article "how to achieve percentage adaptive framework web page template in html". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
