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

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

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

<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

网页制作

纯CSS制作热门文章排行，且前3名背景不同

要制作文章排行前10、或评论排行榜1、2、3、4…，还要给前三名加上不同的背景，可以用纯css实现（用Ol，li），但通常网页制作中使用ul的比较多，因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示，容易引起浏览器兼容问题，所以遇到这样的有序排版布局，最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。 htm…

江山如画
2018年7月14日
4.3K00
网页制作

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

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

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

第12课：页面布局（CSS）

如何为页面实现理想的布局？你可以使用级联样式表（Cascading Style Sheets，简称CSS）为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识，可以使用我们提供的CSS教程。因此，请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中，它们发挥不同的作用：HTML负责网页的具体内容（结构），而CSS则修饰网…

江山如画
2018年1月19日
11.0K01
PS图片转页面CSS+HTML的步骤

标准的网页制作流程是：拿到网站美工制作的psd效果图后，网页设计师再把PS制作的图片转html页面。

江山如画
网页制作 2020年2月12日
9.6K00
网页制作

jQuery屏蔽页面右键，禁止复制，文本选择代码

屏蔽页面右键，禁止复制，文本选择功能，用jQuery实现非常简单。 125建站网分享两种方法。方法一： //禁用右键、文本选择、复制 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“selectstart”,function(){return fals…

江山如画
2019年10月16日
4.3K00
网页制作

Flex布局“弹性盒子”

一．概念 flex布局： Flex Box 的缩写，意味“灵活的盒子”或“弹性盒子”，所以flex布局又称“弹性布局”。 flex容器采用flex布局的元素，成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员，称为flex项目。 <div style=“ display:flex;”> &l…

江山如画
2020年4月12日
5.7K00

发表回复

登录后才能评论