投稿
  1. 125jz首页
  2. 教程
  3. 网页制作

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

江山如画 • • 网页制作 • 阅读 7448

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

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)
江山如画的头像江山如画管理团队
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
JS实现开关效果，可单选和组选
上一篇 2018年7月29日 上午8:52
CSS制作上一页 下一页 页码显示样式
下一篇 2018年7月29日 下午12:30

99%的人还看了以下文章

  • 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.7K0
  • js 网页制作

    JavaScript 向数组的开头或末尾添加元素：unshift() 、push()方法详解

    unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 unshift() 实例： <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>uns…

    江山如画的头像 江山如画
    2018年9月5日
    15.7K0
  • 第12课：高度和宽度 网页制作

    第12课：高度和宽度

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

    江山如画的头像 江山如画
    2020年2月25日
    7.0K0
  • html5专题 网页制作

    跟永哥学HTML5（4）：正确使用HTML5的header、hgroup和section

    在上一章HTML5新增语义化元素的使用中我们讲解了HTML新增的标签，并举例给出如何使用。但真正从HTML4转变到HTML5编程，并不是那么简单的事情，很多初学者没有真正了解这些标签，或错误使用HTML5的标签。这节课就给大家讲解常见的HTML5标签错误使用写法，帮助大家学会正确使用HTML5的header、hgroup和section。 1、只在需要的时候…

    江山如画的头像 江山如画
    2018年2月3日
    7.4K0
  • 手把手教你做响应式网页，响应式布局实例入门 网页制作

    手把手教你做响应式网页，响应式布局实例入门（精）

    刚接触响应式布局的童鞋会感觉响应式布局很高大上，很难，但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例，手把手教你如何制作响应式网页。 响应式布局（Responsive Layout） 响应式布局分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…

    江山如画的头像 江山如画
    2018年7月28日
    12.1K0
  • 导航特效：jquery实现当前（活动）菜单样式变化 网页制作

    导航特效：jquery实现当前（活动）菜单样式变化

    用户点击导航或菜单上不同的栏目，被选中的导航栏目会变换样式，出现图片或背景颜色的变化，用于标识是否是当前栏目或活动选项。 本教程使用jquery实现导航菜单当前（活动）菜单样式变化，导航菜单模式用的是背景颜色，你可以换成背景图片以符合建站需要。 当前（活动）菜单样式变化实现原理 在html代码中给首页（默认选中）加上class名cur <a href=…

    江山如画的头像 江山如画
    2018年2月8日
    7.3K0

发表回复

登录后才能评论