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%的人还看了以下文章

  • 3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

    表格隔行显示不同背景颜色,表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

    2018年9月5日
    6.0K0
  • 第9课:盒状模型

    CSS中的盒状模型(box model)用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距(margin)、边框(border)、内边距(padding)和内容的具体操作。下图显示了盒状模型的结构: CSS中的盒状模型 上面的图示看上去可能感觉有点理论化,好吧,让我们试着用一个实例来解释盒状模型。在我们的例子中,有一个标题和一些文本…

    2020年2月25日
    8.1K0
  • jquery动态新增元素节点.click点击事件失效的2个解决方法

    问题: ajax读取留言列表,每条留言后面有个回复按钮,class为“reply”,用$(“.reply”).click(function(){ //do something… }),后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。 解决方法: 最简单的方法就是直接在标签中写onclick=”&#8…

    2019年2月16日
    17.3K0
  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    14.1K0
  • jQuery获取URL传递的参数

    URL传递参数是程序开发中经常用到的,中国网页设计给大家分享使用jQuery如何获取URL传递的参数。 例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下: //获取URL参数a和b funct…

    2018年9月30日
    9.2K0
  • 图片的title和alt属性区别

    图片的title和alt属性是初学者容易混淆的。125网页设计给大家介绍下title和alt属性的用法及区别

    网页制作 2020年2月23日
    9.7K0

发表回复

登录后才能评论