CSS制作三行二列居中布局，高度自适应

江山如画 • 2018年7月29日下午12:05 • 网页制作 • 阅读 7050

本实例要制作三行二列网页布局，这是网页制作中最常见的布局方式，如何使整个页面内容居中，如何使高度适应内容自动伸缩，是本实例中的难点。

<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;} </style> </head> <body> <div id="header">header</div> <div id="contain"> <div id="mainbg"> <div id="right"> <p>right</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="left"> <p>left </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </div> <div id="footer">footer</div> </body> </html>

Tips:You can change the code before run.

代码解释：

#header,#contain,#footer{
	margin-right: auto;
	margin-left: auto;
}

是让网页整体居中。为了使中间两列#right和#left也居中，我们在它们外面嵌套一个层#contain，并对contain设置margin:auto;，这样#right和#left就居中了。
注意中间两列定义的顺序，我们首先定义#right，通过float: right;让它浮在#contain层的最右边。然后再定义#left，通过float: left;让它浮动在#right层的左面。
后是定义底部的#footer层。这个定义的关键是：clear:both;，作用是取消#footer层的浮动继承。否则的话，你会看到#footer着#header显示，而不是在#right的下面。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2307.html

CSS 网页布局

赞 (1)

江山如画管理团队

微信扫一扫

微信扫一扫

支付宝扫一扫

支付宝扫一扫

JS实现开关效果，可单选和组选

JS实现开关效果，可单选和组选

上一篇 2018年7月29日上午8:52

CSS制作上一页下一页页码显示样式

CSS制作上一页下一页页码显示样式

下一篇 2018年7月29日下午12:30

网页制作

label文字与textarea、input垂直居中、顶部对齐的方法

在网站表单制作时label标签里的文字与Iput、textarea标签的默认对齐方式不美观，如下图。姓名：留言：中国网页设计给大家分享label文字与input、textarea垂直居中对齐和顶部对齐的简单方法。 label文字与textarea、input垂直居中的方法在input标签样式中加入css标签vertical-align: middle…

江山如画
2018年3月18日
11.6K01
网页制作

第5课：到目前为止学到了些什么？

上一课我们已经学习了这些： <html> <head><title></title></head> <body> </body> </html> 网页标题（title）写在head（头部）里：<title>网页标题写在这里</title>。…

江山如画
2018年1月20日
7.4K03
网页制作

跟永哥学HTML5（3）：HTML5新增语义化元素的使用

上节课我们讲了html5与html4的区别，Html5对语法进行了简化，一个htm5文档结构代码如下： <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…

江山如画
2018年1月26日
16.2K10
网页制作

CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大

CSS3的transform:scale()可以实现按比例放大或者缩小功能，transform呈现的是一种变形结果。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡，transition呈现的是一种过渡，是一种动画转换过程，如渐显、渐弱、动画快慢等。 transiton:过渡属性过渡所需要时间过渡动画函数过渡延迟时间； t…

江山如画
2018年8月1日
12.5K00
网页制作

javascript-快速掌握DOM技术

Javascript的组成： 1. js的语法（核心)。 2. DOM(文本对象模型) ：用于操作HTML文档的应用编程接口。 DOM的出现使得动态HTML（DHTML）得以实现，可以不用重新加载页面而改变网页的外观和内容。 DOM的级别(版本)：DOM1，DOM2，DOM3 3. BOM(浏览器模型) BOM是Browser Object Model的…

江山如画
2018年7月17日
4.6K00
网页制作

第12课：高度和宽度

到目前为止，我们还没有在元素尺寸方面给予关注。在这一课，我们将看到为元素定义高度和宽度是十分简单的。设定宽度[width] 设定高度[height] 设定宽度[width] 你可以通过width属性来设定一个元素的宽度，即在水平方向上的尺寸。下面是一个简单的例子，它为我们提供了一个可以容纳文本的盒子： div.box {width: 200px;bord…

江山如画
2020年2月25日
6.5K00

发表回复

登录后才能评论