<html>

	<head>

		<title>一列布局</title>

		<style type="text/css">

			body{margin:0;padding:0;text-align:center}

			/*一列的布局样式*/

				/*margin:0 auto使div居中*/

			.top{width:800px;height:50px;background:#00f;margin:0 auto}

			.main{width:800px;height:250px;background:#ccc;margin:0 auto}

			.foot{width:800px;height:50px;background:#f00;margin:0 auto}

		</style>

	</head>

	<body>

	<!--/*一列的布局样式*/-->

	一列的布局样式<br/>

	<div class="top">一列布局01</div>

	<div class="main">一列布局02</div>

	<div class="foot">一列布局03</div>

	 <br/>

	 <br/>

	</body>

</html>

效果如下：

关键知识点：margin:0 auto使div居中

 


 

慕课笔记利用css进行布局【一列布局】的更多相关文章

  1. 慕课笔记利用css进行布局【三列布局】

    三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...

  2. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

  3. 慕课笔记利用css进行布局【混合布局练习】

    通过学习div的布局,以一个简单的内容管理网站的布局为例子,用div+css进行简单的网页布局,加深学印象: <html> <head> <title>CSS+di ...

  4. 慕课笔记利用css进行布局【混合布局】

    <html> <head> <title>混合布局学习</title> <style type="text/css"> ...

  5. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  6. CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？

    使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...

  7. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  8. 简单的CSS网页布局--一二列布局

    1.一列布局 (一)一列自适应 自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html> <html> <head lang=& ...

  9. 简单的CSS网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

随机推荐

  1. _bzoj1087 [SCOI2005]互不侵犯King【dp】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1087 令f(i, j, k)表示前i列,二进制状态为j,已经用了k个国王的方案数,则 f(i ...

  2. [POJ1741] Tree【树分治 点分治】

    传送门:http://poj.org/problem?id=1741 写的第一道树分治题,撒花纪念~ 对于每一对点对(i, j),它有三种情况: ① 其中一个是根节点.这种情况比较简单,直接加上就好了 ...

  3. POJ 3683 Priest John's Busiest Day

    看这个题目之前可以先看POJ2186复习一下强联通分量的分解 题意:给出N个开始时间和结束时间和持续时间三元组,持续时间可以在开始后或者结束前,问如何分配可以没有冲突. -----–我是分割线---- ...

  4. 暴力 ZOJ 1403 Safecracker

    题目传送门 /* 暴力:纯暴力,在家水水 */ #include <cstdio> #include <cstring> #include <algorithm> ...

  5. 阿里maven仓库地址

    在国内访问Maven仓库,连接速度太慢.下面是将中央仓库替换成阿里云的中央仓库的方法. 第一种,统一修改仓库地址 可以直接修改Mavenconf文件夹中的setting.xml文件,或者在.m2文件夹 ...

  6. 点击后打开QQ临时会话

    1.QQ官方提供的代码.如果没有加好友需要加好友才能聊天,也可以到这里http://shang.qq.com/v3/index.html 开通一个服务,同样可以实现临时会话. <a href=& ...

  7. 程序猿工具——svn

    一个项目的产生,都需要团队中的开发人员互相协作.它的简单,方便深深吸引了我. svn的使用,有2部分组成--svn服务器.svn客户端.svn服务器一般团队之间只要有一个安装就可以了. 在学习安装sv ...

  8. JDK11源码分析之集合类（一)----HashMap

    一,首先需要拉取JDK11源码: 方便起见我给出芋道源码作者已经拉取好的openJDK11的GitHub地址只需要fork一下克隆到本地导入IDEA中就可以对源码分析了: https://github ...

  9. hihocoder offer收割编程练习赛12 D 寻找最大值

    思路: 可能数据太水了,随便乱搞就过了. 实现: #include <iostream> #include <cstdio> #include <algorithm> ...

  10. Spring && 实验IOC

    一.Spring作用 1.生态体系庞大,全能型选手![springmvc是其一个子模块,jdbcTemplate能直接操作数据库!]    2.将其他组件粘合在一起    3.IOC容器和AOP[As ...