Layout gala-40 CSS layout s

This layout template comes from HTML. It, with a total of 40, covering various common layout formats such as fluid, fixed width, two columns, and three columns. The 40 templates use a completely consistent HTML structure (based on the same markup ), and strictly follows the "important content first loading" principle (content section of the page). Both HTML and CSS sections can pass W3C verification. At the same time, in IE/win 5.0 +, opera 8.5 +, both Firefox 1.5 + and Safari 2 + have excellent compatibility. It usesHtmlAs follows:

<div id="container">  <div id="header">Header</div>  <div id="wrapper">    <div id="content">Content</div>  </div>  <div id="navigation">Navigation</div>  <div id="extra">Extra stuff</div>  <div id="footer">Footer</div></div>  

Taking the three-column flow layout as an example, itsCSSThe Code is as follows:

div#header{position:relative}div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;background: #EEE;color: #79B30B}div#header a{position:absolute;right:0;top:23px}div#content p{line-height:1.4}div#navigation{background:#B9CAFF}div#extra{background:#FF8539}div#footer{background: #333;color: #FFF}div#footer p{margin:0;padding:5px 10px}div#footer a{display:inline;padding:0;color: #C6D5FD}div#wrapper{float:left;width:100%}div#content{margin-right: 50%}div#navigation{float:left;width:25%;margin-left:-50%}div#extra{float:left;width:25%;margin-left:-25%}div#footer{clear:left;width:100%}

In this example, the floating plus negative margin method is used. This method is used in this template. The structure is clear, the code is concise, and there are many areas worth learning and reference. If you are interested, click the following link or download the zip package of the full template.

Package and download layoutgala