设为首页  
联系我们  
加入收藏  
网页制作 冲浪宝典 图形图像 操作系统 软件教学 编程开发 认证考试 安全技术 站长专区 文学驿站 娱乐天地 游戏天地 办公软件
文章搜索
您的位置: 首页 >> 文章首页 >> 网页制作 >> XHTML >> 典型的三行二列居中高度自适应布局
精品推荐
XHTML点击TOP10
·CSSVault推荐的130个CSS布局站点[1-3月]
·初学必知:XHTML网页中加入CSS的五种方式
·采访Eric Meyer的10个问题
·XHTML学习 - 第9天:第一个CSS布局实例
·CSSVault推荐的128个CSS布局站点[4-6月]
·你应该关注web标准的真正原因
·通向web标准之路
·shtml精简教程
·理解表现和结构相分离
·XHTML学习 - 第10天:自适应高度
网页制作点击TOP10
·菜鸟架设动网论坛全教程
·网页模板的使用方法 (教程)
·网页对联广告代码效果大全
·初学者入门:如何学习网页制作?
·用JavaScript实现文件图片滚动效果
·常用CSS大全
·网页自动转向代码
·图片循环滚动完美解决
·JS表格排序新法
·DIV CSS网页布局实例解析:实现表格形式
精选专题

典型的三行二列居中高度自适应布局

作者: 来源:网络文章 时间:2005-12-11 23:20:04

典型的三行二列居中高度自适应布局(1)

如何使整个页面内容居中,如何使高度适应内容自动伸缩。这是学习CSS技巧">CSS布局最常见的问题。下面就给出一个实际的例子,并详细解释。(本文的经验和是蓝色理想论坛XPoint、guoshuang共同讨论得出的。)

首先先按这里看实际运行效果,这个页面在mozilla、opera和IE浏览器中均可以实现居中和高度自适应。我们来分析代码:

完整代码

<html>
<head>
<style type="text/css">
body{
background:#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
text-align:left;
} #contain{
margin-right: auto;
margin-left: auto;
width: 776px;
} #mainbg{
width:776px;
padding: 0px;
background: #60A179;
float: left;
}
#right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 574px;
background: #ccd2de;
text-align:left;
}
#left{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align:left;
}
#footer{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div
class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
</div>
<div id="left">
共2页 9 7 [1] [28 :>

典型的三行二列居中高度自适应布局 相关文章:
典型的三行二列居中高度自适应布局 相关软件:
特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
转载请注明来源:http://www.xgdown.com