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

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

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

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

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

  • js 网页制作

    注册表单验证常用js代码：用户名、密码、邮箱等字段验证

    <script language=”javascript”>   //验证是否为数字   function IsDigit(cCheck)       {       return ((‘0′<=cCheck) && (cCheck<=’9’));       }      //验证是否为英文字母        fun…

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

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

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

    江山如画的头像 江山如画
    2018年2月8日
    7.4K0
  • html入门教程 网页制作

    第6课：学习更多HTML元素

    到现在，你有没有独立完成过一个网页？你可以的，看看下面的例子： <html> <head><title>125建站网|www.125jz.com</title></head> <body> <h1>一级标题</h1><p>一些文字。。。</p&g…

    江山如画的头像 江山如画
    2018年1月20日
    10.9K0

  • HTML5- Canvas入门（二）画线并设置颜色

    HTML5- Canvas入门（二）画线并设置颜色HTML5- Canvas入门（二）画线并设置颜色HTML5- Canvas入门（二）画线并设置颜色HTML5- Canvas入门（二）画线并设置颜色

    HTML5- Canvas入门（一）画线 上一节课我们学会了 Canvas画线，绘制了一条黑色的直线，但如果我们想要绘制一条红色的或者其它颜色的线段，该怎么做呢？ 答案很简单，使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧： <canvas id=”myCanvas” width=”200″ height=”200″ s…

    江山如画的头像 江山如画
    2022年7月10日 • 网页制作
    12.3K0
  • jquery实现全选、反选、取消全选功能代码 网页制作

    jquery实现全选、反选、取消全选功能代码

    管理系统后台，商品管理、信息管理等，需要删除，为方便操作应该提供全选、反选、取消全选功能。 今天中文网页设计分享jquery实现全选、反选、取消全选功能代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; chars…

    江山如画的头像 江山如画
    2018年10月17日
    11.7K0
  • 太赞了！推荐2个多彩渐变配色网站 网页制作

    太赞了！推荐2个多彩渐变配色网站

    1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的，但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来，其中有的渐变色甚至拥有极为复杂的情绪，而你需要做的，就是输入你想传递的情绪，然后就能搜到相关的情绪和色彩，包括渐变的 CSS …

    江山如画的头像 江山如画
    2023年1月18日
    7.6K0

发表回复

登录后才能评论