动态网站制作指南
[  QQ表情  ]
[ 投票调查 ]
[ 企业邮箱 ]
[ 网站空间 ]
网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
ASP源码 | .Net源码 | PHP源码 | JSP源码 | JAVA源码 | CGI源码 | VB源码 | C++源码 | Delphi源码 | PB源码 | VF源码 | 汇编 | 服务器
电脑书籍下载:程序设计书籍 | 数据库教程书籍 | 平面与多媒体书籍 | 网络通讯书籍 | 系统管理书籍 | 网络安全书籍 | 认证考试书籍
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
文章搜索服务
邮件订阅
输入你的邮件地址,
你将不会错过任何关于:
[ CSS教程 ]的信息

本月文章推荐
.网页(WEB)字体,CSS如何控制?.
.revealTrans滤镜制作超弦图片的播.
.简单的CSS改进网站设计的三个技巧.
.精通 CSS 滤镜(四).
.XHTML+CSS制作样式风格切换的WEB.
.用CSS实现的固定表头的HTML表格.
.网页设计之css+div PK table+css.
.CSS初级入门:样式的多次声明.
.浏览器Firefox与IE在CSS样式表中.
.CSS教程:CSS文件应该保持整洁和统.
.用CSS制作具有亲和力的表格.
.导航上用CSS标志当前页效果的实现.
.用CSS做滑动效果的图片画廊.
.用CSS设计高体验的表单显示效果示.
.第五章 文字性质的CSS .
.CSS解决图片下面有空隙的简单方法.
.详解CSS的定位语法应用.
.利用CSS,不通过replace替换标引.
.CSS布局实例:上中下三行,中间自适.
.巧妙运用CSS样式表立刻改变鼠标的.

不用float实现模块居中布局

文章类别:CSS教程 | 发表日期:2006-3-26 |


最常见实用的布局形式:上、中左、中右、底四个模块,宽度760px,整体页面居中。

结构代码,top left right foot 四个模块全部独立、互不嵌套。

<div id="top">head</div>

<div id="left">
  <div id="left_module">left</div>
</div>

<div id="right">
  <div id="right_module">right</div>
</div>

<div id="foot" >foot</div>

顶部属于常规定义。

#top { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}

方法A: 外层left定义为760px宽并居中;内层left_module定义为实际的左侧宽度280px,且绝对定位,top值等于顶部定义的高度。
这种方法的好处是:left right 两个模块代码片断可以互换调整显示优先级。

#left { width:760px; margin:auto;}
  #left_module { width:280px; position:absolute; top:100px; padding:10px;}

方法B: 外层left定义为760px宽并居中,相对浮动于top;内层left_module定义为实际的左侧宽度280px,且绝对定位。
这种方法的好处是:顶部的高度可以自由延伸。

#left { width:760px; margin:auto; position:relative;}
  #left_module { width:280px; position:absolute; padding:10px;}

外层right定义为760px宽并居中,内层right_module定义为实际的右侧宽度440px,使用margin语法居左。right_module定义的背景色是实际右侧的背景色,定义的高度就是实际中间模块的高度;right的背景色就是实际左侧的背景色。

#right { width:760px; margin:auto; background:#E8E8E8;}
  #right_module { width:440px; background:#F0F0F0; height:360px; margin:0 0 0 auto; padding:10px;}

底部也属于常规定义。

#foot { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}

测试环境IE6.0和FF1.5,都是最俗的语法,非常简单,实用有限,可做技术参考。


上一篇:锦囊妙计 CSS实现样式布局22招 人气:10289
下一篇:超强,用CSS构建iframe效果 人气:12847
点击此处浏览全部CSS的内容 Dreamweaver插件下载 常用网页广告代码全集
  最新网站源码 最新软件下载
2008-5-16 乘风多用户PHP统计系统 v3.4
2008-5-16 轩溪下载系统 v3.78 build 0515
2008-5-16 普沙B2B 浙江省商贸网 v2.0
2008-5-16 asp抓蜘蛛的小程序 v1.0
2008-5-16 齐齐乐网私服发布站 仿haosf新版
2008-5-16 IssTech信息反馈系统 v1.0
2008-5-16 自由领域大头贴(js接口版) 修正版
2008-5-16 医院网站系统
2008-5-16 智拓-分类信息管理系统 v5.0
2008-5-7 Windows XP SP3 官方英文版
2008-5-7 Windows XP SP3 官方香港中文版
2008-5-7 Windows XP SP3 官方繁体中文版
2008-5-7 Windows XP SP3 官方简体中文版
2008-4-30 Multiple Unzip Wizard 1.02
2008-4-30 Multiple Unrar Wizard 1.0.0
2008-4-30 WinZip Install/Try/Uninstall a
2008-4-30 ZIP压缩文件修复器WzipFix 2.0
2008-4-30 Pentazip 6.01 Build 189 For Wi
  发表评论
姓 名: 验证码: [ 全部贴吧 ] [ 浏览评论 ]
内 容:
[ 汉字翻译拼音 ] [ 广告代码 ] [ 符号对照表 ] [ 进制转换 ] [ 经典小工具 ] [ 个税计算 ] [ 汉字简繁转换 ] [ 普通单位换算 ] [ 公制单位换算 ]
[ 生辰老黄历 ] [ 国内电话区号 ] [ 国家代码与域名缩写 ] [ 文字加密解密 ] [ 健康查询 ] [ 万年历 ] [ 手机号码查询 ] [ ip搜索 ] [ Google PR查询 ]
业务联系 | 广告刊登 | 频道合作 | 投稿荐稿 | 联系方式 | 加入收藏 | RSS订阅
Copyright © 2000-2008 www.knowsky.com All rights reserved | 网络实名:动态网站制作指南 | 沪ICP备05001343号
ホームページ制作 不動産検索システム 求人情報