论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

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

文章类别:div+css布局 | 发表日期:2008-10-5 15:32:15

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]
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058