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

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

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

<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

网页制作

第11课：边框（border）

边框（border）可以有多种用途，比如作为装饰元素或者作为划分两物的分界线。在设置边框方面，CSS为你提供了无尽选择。border-widthborder-colorborder-style 边框宽度[border-width] 边框宽度由CSS属性border-width定义，其值可以是“thin”（薄）、“medium”（普通）或“thick”（厚）等…

江山如画
2020年2月25日
6.6K00
页面编码为UTF-8的项目中servlet中文显示乱码的解决方法

servlet中文显示乱码：
1、servlet中输出中文字符
2、servlet接收表单传值并显示，表单字段含中文。

江山如画
网页制作 2020年2月23日
9.1K00
网页制作

最简单的wmv视频网页播放代码

如何在网页上播放wmv格式视频？ 1、将以下代码复制到html网页的<body>中：如 <embed src=”wangyesheji1.wmv” width=”460″ height=”414″ autostart=”1″ filename=”mms:/wangyesheji1.wmv” showcontrols=”1″ showstat…

江山如画
2021年4月5日
15.9K02
网页制作

网页中的框架（详解）

所谓框架便是网页画面分成几个框窗，同时取得多个 URL。一、制作框架页面的步骤： 1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接，在子框架中设定链接。注意：框架页面是不含标签的二、基本语法 <frameset> <frame src=”url”> <noframes&g…

江山如画
2020年4月11日
16.0K02
网页制作

css布局基础：行内元素、块级元素练习

主要知识点： 1、理解什么是行内元素？什么是块级元素？ 2、知道块级元素能够设置宽高，行内元素不可设置宽高（替换元素可以）。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。扩展： 1、nth-child()选择器选择其父元素的第n个子元素。效果图：参考： <nav> <ul> <li><…

孙萍
2020年4月4日
14.1K01
网页制作

如何给网页中的表格table添加滚动条

最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了，就想到了给table加滚动条，接下来125建站网为大家介绍HTML给table添加滚动条的方法，有需要的小伙伴可以参考一下： 1、方法分析：要给table添加滚动条其实很简单，我们首先把table放到一个div里面，然后再设置div显示滚动条即可。 2、html代码： <div…

江山如画
2023年3月9日
3.5K00

发表回复

登录后才能评论