DIV+CSS 布局实例:各种2栏,3栏布局实例下载

sunlei · 发表于 2006 年 2 月 5 日 18:18:28

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？注册

×

<div style="padding: 8px; background: rgb(255, 255, 255) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><br/><h2 class="sub-hdr">Two
Column Flexible</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">
Probably the easiest page to make. Contains two
layout divs, the main content div is just floated to the left.
Very simple!
</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh">
<a href="http://www.ssi-developer.net/main/templates/temps/2c-flex.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp2colflex()" title="Opens a pop-up window preview">Image
Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/2c-flex.zip" title="Download template">Download</a> <small class="fsize">[ 5k]
[ZIP]</small></span>
</div>
<br/>
<br/><br/>
<h2 class="sub-hdr">Two
Column Flexible With Header</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">Basically the same template as above but with the
addition of a header div for page title, your logo or banners
etc. Again very simple to set up.</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/2c-hd-flex.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp2colflexwhdr()" title="Opens a pop-up window preview">Image
Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/2c-hd-flex.zip" title="Download template">Download</a> <small class="fsize">[ 3k]
[ZIP]</small></span></div>
<br/>
<br/>
<br/>
<h2 class="sub-hdr">Two
Column, Left Column Static</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">Two columns, the left
column is absolutely positioned on the left and is a fixed width. The right
content column is sized and positioned by using margins and will
resize with the browser window.</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/2c-lc-static.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp2colstatic()" title="Opens a pop-up window preview">Image
Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/2c-lc-static.zip" title="Download template">Download</a> <small class="fsize">[ 6k]
[ZIP]</small></span></div>
<br/>
<br/>
<br/>
<h2 class="sub-hdr">Two
Column, Left Column Static, with Header Bar</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">This is the same template as above but with the
addition of a simple header bar which can be used for links,
search box etc..</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/2c-hd-lc-static.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp2colstaticwhdr()" title="Opens a pop-up window preview">Image
Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/2c-hd-lc-static.zip" title="Download template">Download</a> <small class="fsize">[ 6k]
[ZIP]</small></span></div>
<br/>
<br/>
<br/>
<h2 class="sub-hdr">Two
Column Fixed Width with Header & Footer <img width="5" height="7" alt="Recommended !" src="http://www.ssi-developer.net/main/images/red-arrow.gif"/></h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">A fixed width centered page with a header,
footer, left navigation column and right content column. One of
my favourites.</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/2c-hd-ft-fixed.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp2colfixedwhdrwftr()" title="Opens a pop-up window preview">Image
Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/2c-hd-ft-fixed.zip" title="Download template">Download</a> <small class="fsize">[ 6k]
[ZIP]<br/><br/></small></span><h2 class="sub-hdr">Three
Column, Left & Right Columns Static</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">This is much the same as 'Two Col Left Col
Static' but now with the addition of a right hand column which is absolutely
positioned.</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/3c-lcrc-static.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp3colstatic()" title="Opens a pop-up window preview">Image
Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/3c-lcrc-static.zip" title="Download template">Download</a> <small class="fsize">[ 6k]
[ZIP]</small></span></div>
<br/>
<br/>
<br/>
<h2 class="sub-hdr">Three
Column 'Pixel-Perfect'</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(6)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">Sometimes this is called the "Holy Grail".
It's a three column template which fits together "pixel perfect".</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/3c-lcrc-static-pp.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp3colstaticpixelperfect()" title="Opens a pop-up window preview">Image Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/3c-lcrc-static-pp.zip" title="Download template">Download</a> <small class="fsize">[ 6k]
[ZIP]</small></span></div>
<br/>
<br/>
<br/>
<h2 class="sub-hdr">Three
Column 'Pixel-Perfect' with Header</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(6)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">The same as the "Holy Grail" above but with
a header div. Also expands to fit the whole screen.</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/3c-hd-lcrc-static-pp.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp3colstaticpixelperfectwhdr()" title="Opens a pop-up window preview">Image Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/3c-hd-lcrc-static-pp.zip" title="Download template">Download</a> <small class="fsize">[ 3k]
[ZIP]</small></span></div>
<br/>
<br/>
<br/>
<h2 class="sub-hdr">Three
Column Pixel-Perfect with Header & Footer <img width="5" height="7" alt="Recommended !" src="http://www.ssi-developer.net/main/images/red-arrow.gif"/></h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">My most complete template. It has three columns, a header and footer
and will resize with the browser window.</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/3c-hd-ft-flex.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp3colpixelperfectwhdrwftr()" title="Opens a pop-up window preview">Image Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/3c-hd-ft-flex.zip" title="Download template">Download</a> <small class="fsize">[ 6k]
[ZIP]</small></span></div><br/></div>
</div>

sunlei · 发表于 2006 年 2 月 5 日 18:19:19

想学习DIV+CSS的,自己去下载回来看好了
http://www.ssi-developer.net/main/templates/

sunlei · 发表于 2006 年 2 月 5 日 18:18:28

<div style="padding: 8px; background: rgb(255, 255, 255) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><br/><h2 class="sub-hdr">Two
Column Flexible</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">
Probably the easiest page to make. Contains two
layout divs, the main content div is just floated to the left.
Very simple!
</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh">
<a href="http://www.ssi-developer.net/main/templates/temps/2c-flex.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp2colflex()" title="Opens a pop-up window preview">Image
Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/2c-flex.zip" title="Download template">Download</a> <small class="fsize">[ 5k]
[ZIP]</small></span>
</div>
<br/>
<br/><br/>
<h2 class="sub-hdr">Two
Column Flexible With Header</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">Basically the same template as above but with the
addition of a header div for page title, your logo or banners
etc. Again very simple to set up.</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/2c-hd-flex.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp2colflexwhdr()" title="Opens a pop-up window preview">Image
Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/2c-hd-flex.zip" title="Download template">Download</a> <small class="fsize">[ 3k]
[ZIP]</small></span></div>
<br/>
<br/>
<br/>
<h2 class="sub-hdr">Two
Column, Left Column Static</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">Two columns, the left
column is absolutely positioned on the left and is a fixed width. The right
content column is sized and positioned by using margins and will
resize with the browser window.</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/2c-lc-static.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp2colstatic()" title="Opens a pop-up window preview">Image
Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/2c-lc-static.zip" title="Download template">Download</a> <small class="fsize">[ 6k]
[ZIP]</small></span></div>
<br/>
<br/>
<br/>
<h2 class="sub-hdr">Two
Column, Left Column Static, with Header Bar</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">This is the same template as above but with the
addition of a simple header bar which can be used for links,
search box etc..</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/2c-hd-lc-static.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp2colstaticwhdr()" title="Opens a pop-up window preview">Image
Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/2c-hd-lc-static.zip" title="Download template">Download</a> <small class="fsize">[ 6k]
[ZIP]</small></span></div>
<br/>
<br/>
<br/>
<h2 class="sub-hdr">Two
Column Fixed Width with Header & Footer <img width="5" height="7" alt="Recommended !" src="http://www.ssi-developer.net/main/images/red-arrow.gif"/></h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">A fixed width centered page with a header,
footer, left navigation column and right content column. One of
my favourites.</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/2c-hd-ft-fixed.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp2colfixedwhdrwftr()" title="Opens a pop-up window preview">Image
Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/2c-hd-ft-fixed.zip" title="Download template">Download</a> <small class="fsize">[ 6k]
[ZIP]<br/><br/></small></span><h2 class="sub-hdr">Three
Column, Left & Right Columns Static</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">This is much the same as 'Two Col Left Col
Static' but now with the addition of a right hand column which is absolutely
positioned.</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/3c-lcrc-static.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp3colstatic()" title="Opens a pop-up window preview">Image
Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/3c-lcrc-static.zip" title="Download template">Download</a> <small class="fsize">[ 6k]
[ZIP]</small></span></div>
<br/>
<br/>
<br/>
<h2 class="sub-hdr">Three
Column 'Pixel-Perfect'</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(6)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">Sometimes this is called the "Holy Grail".
It's a three column template which fits together "pixel perfect".</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/3c-lcrc-static-pp.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp3colstaticpixelperfect()" title="Opens a pop-up window preview">Image Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/3c-lcrc-static-pp.zip" title="Download template">Download</a> <small class="fsize">[ 6k]
[ZIP]</small></span></div>
<br/>
<br/>
<br/>
<h2 class="sub-hdr">Three
Column 'Pixel-Perfect' with Header</h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(6)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">The same as the "Holy Grail" above but with
a header div. Also expands to fit the whole screen.</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/3c-hd-lcrc-static-pp.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp3colstaticpixelperfectwhdr()" title="Opens a pop-up window preview">Image Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/3c-hd-lcrc-static-pp.zip" title="Download template">Download</a> <small class="fsize">[ 3k]
[ZIP]</small></span></div>
<br/>
<br/>
<br/>
<h2 class="sub-hdr">Three
Column Pixel-Perfect with Header & Footer <img width="5" height="7" alt="Recommended !" src="http://www.ssi-developer.net/main/images/red-arrow.gif"/></h2>
<div class="cont">
<span class="temp-lh">Browsers:</span>
<span class="temp-rh">
<img src="http://www.ssi-developer.net/main/images/moz_sm.gif" alt="Mozilla Icon" title="Tested and passed in Mozilla 1.5 beta"/> '
<img src="http://www.ssi-developer.net/main/images/ff_sm.gif" alt="Firebird Icon" title="Tested and passed in Mozilla Firefox 0.8"/> '
<img src="http://www.ssi-developer.net/main/images/ns_sm.gif" alt="Netscape Icon" title="Tested and passed in Netscape 7.1"/> '
<img src="http://www.ssi-developer.net/main/images/op_sm.gif" alt="Opera Icon" title="Tested and passed in Opera 7.11"/> '
<img src="http://www.ssi-developer.net/main/images/ie_sm.gif" alt="IE6 Icon" title="Tested and passed in Internet Explorer 6"/><sup>(5+)</sup>
</span>
</div>
<div class="cont">
<span class="temp-lh">Description:</span>
<span class="temp-rh">My most complete template. It has three columns, a header and footer
and will resize with the browser window.</span>
</div>
<div class="cont">
<span class="temp-lh">Actions:</span>
<span class="temp-rh"><a href="http://www.ssi-developer.net/main/templates/temps/3c-hd-ft-flex.htm" target="_blank" title="View Template">View</a> | <a href="java script:void(0)" onclick="temp3colpixelperfectwhdrwftr()" title="Opens a pop-up window preview">Image Preview</a> | <a href="http://www.ssi-developer.net/main/templates/temps/zips/3c-hd-ft-flex.zip" title="Download template">Download</a> <small class="fsize">[ 6k]
[ZIP]</small></span></div><br/></div>
</div>

账号		自动登录	找回密码
密码			注册