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

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

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

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

(1)
江山如画的头像江山如画管理团队
JS实现开关效果,可单选和组选
上一篇 2018年7月29日 上午8:52
CSS制作上一页 下一页 页码显示样式
下一篇 2018年7月29日 下午12:30

99%的人还看了以下文章

  • 第1课:CSS是什么?

    CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

    2020年2月22日
    6.3K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    7.9K0
  • CSS border-radius 深入学习(含可视化生成工具)

    CSS border-radius 深入学习(含可视化生成工具)CSS border-radius 深入学习(含可视化生成工具)CSS border-radius 深入学习(含可视化生成工具)CSS border-radius 深入学习(含可视化生成工具)

    没有学过CSS border-radius 的同学,请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法: .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角,如下图: 只输入一个数值,所有角都会被四舍五入,若要固定值可以使用 …

    2019年10月17日 网页制作
    12.4K0
  • 最简单的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.3K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    5.4K0
  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    7.6K0

发表回复

登录后才能评论