精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站设计>网页布局>正文

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


来源: 时间:06-09-11 点击: 点击这里收藏本文

Two Column Flexible

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(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: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(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: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(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: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(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 Recommended !

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(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: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(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: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(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: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(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 Recommended !

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(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]

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.