DIV CSS布局实例:各种2栏3栏布局实例(附下载)

2008-02-23 08:33:26来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

Two Column Flexible

Browsers: ' ' ' ' (5 ) Description: Probably the easiest page to make. Contains two layout divs, the main content div is just floated to the left. Very simple! Actions: View | Image Preview | Download [ 5k] [ZIP]


Two Column Flexible With Header

Browsers: ' ' ' ' (5 ) Description: 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. Actions: View | Image Preview | Download [ 3k] [ZIP]


Two Column, Left Column Static

Browsers: ' ' ' ' (5 ) Description: 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. Actions: View | Image Preview | Download [ 6k] [ZIP]


Two Column, Left Column Static, with Header Bar

Browsers: ' ' ' ' (5 ) Description: 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.. Actions: View | Image Preview | Download [ 6k] [ZIP]


Two Column Fixed Width with Header & Footer

Browsers: ' ' ' ' (5 ) Description: A fixed width centered page with a header, footer, left navigation column and right content column. One of my favourites. Actions: View | Image Preview | Download [ 6k] [ZIP]

Three Column, Left & Right Columns Static

Browsers: ' ' ' ' (5 ) Description: 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. Actions: View | Image Preview | Download [ 6k] [ZIP]


Three Column 'Pixel-Perfect'

Browsers: ' ' ' ' (6) Description: Sometimes this is called the "Holy Grail". It's a three column template which fits together "pixel perfect". Actions: View | Image Preview | Download [ 6k] [ZIP]


Three Column 'Pixel-Perfect' with Header

Browsers: ' ' ' ' (6) Description: The same as the "Holy Grail" above but with a header div. Also expands to fit the whole screen. Actions: View | Image Preview | Download [ 3k] [ZIP]


Three Column Pixel-Perfect with Header & Footer

Browsers: ' ' ' ' (5 ) Description: My most complete template. It has three columns, a header and footer and will resize with the browser window. Actions: View | Image Preview | Download [ 6k] [ZIP]

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:经典 用CSS实现form表单布局

下一篇:添加到收藏夹的Javascript脚本-适合IE和Firefox