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

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

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

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

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日 • 网页制作
    13.6K0
  • html入门教程 网页制作

    第7课：HTML标签的属性

    许多元素都可以设置属性。 属性是什么？ HTML通过标签告诉浏览器如何展示网页（比如告诉浏览器显示一个换行）。你可以为某些元素附加一些信息，这些附加信息被称为属性（attribute）。例1： <h2 style=”background-color: #ff0000;”>上125jz.com学网页制作</h2> 属性应写在元素的首标签…

    江山如画的头像 江山如画
    2018年1月20日
    3.8K0
  • 如何单独设置打印网页的样式 网页制作

    如何单独设置打印网页的样式

    做项目，有些网页需要打印，很多时候，是导出WORD或EXCEL再打印。 现在需要页面直接打印，方便没有安装OFFICE的用户。 需求：页面在浏览器中浏览是一种样式，要打印这个页面，是另一种样式。 解决方法：用link标签中的media属性解决此问题。 <link href=”stylesheets/print.css” media=”print” re…

    江山如画的头像 江山如画
    2019年2月15日
    3.9K0
  • css布局基础-盒子模型 网页制作

    css布局基础-盒子模型

    网页设计的第一步就是设计版面布局，本文介绍了css布局基础-盒子模型，CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin（边界）、border（边框）、padding（填充）和content（内容）4部分组成。

    江山如画的头像 江山如画
    2022年7月14日
    12.0K0
  • HTML5网页中如何嵌入音频，视频？ 网页制作

    HTML5网页中如何嵌入音频，视频？

    《HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性，以及视频播放控制技术，如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。 本文主要介绍在HTML5 中如何嵌入音频，视频？ 在HTML5 中如何嵌入音频？ HTML5 支持 MP3、Wav 和 Ogg 格式的音频，代码示例： <audio controls>…

    江山如画的头像 江山如画
    2019年11月23日
    5.8K0
  • div+css制作上中下，中间两列的全屏自适应布局 网页制作

    div+css制作上中下，中间两列的全屏自适应布局

    制作自适应布局的网页对初学者是个难点，今天我们以最常见的上中下结构，中间又分为两列的全屏自适应布局为例，教大家如何制作自适应布局网页。 上中下结构，中间又分为两列的全屏自适应布局HTML代码： <div class=”g-hd”></div> <div class=”g-sd”></div> <div c…

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

发表回复

登录后才能评论