<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. greater()和less()的使用

    greater和less是头文件<xfunctional>中定义的两个结构.下面看它们 的定义,greater和less都重载了操作符(). // TEMPLATE STRUCT grea ...

  2. NSUserDefaults保存用户名和密码

    #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutl ...

  3. [转]linux之date命令MYSQL用户管理

    转自:http://www.cnblogs.com/hencehong/archive/2013/03/19/mysql_user.html 一.        用户登录 格式: mysql -h主机 ...

  4. python版本2和3使用range()函数方法

    python 2:可以直接使用range(5) 输入的列表结果和预期的一样 python 3:使用range(5) 得到列表结果却是这个,和预期的不一致,其原因是节省空间,防止过大的列表产生 如果想要 ...

  5. 快速体验openstack-用devstack安装openstack

    官网安装说明: --2014年11月15日14:14:21 安装环境:Ubuntu12.04,安装官网的说明遇到了小问题,记录在这里 --http://docs.openstack.org/devel ...

  6. Hadoop YARN学习监控JVM和实时监控Ganglia、Ambari（5）

    Hadoop YARN学习监控JVM和实时监控Ganglia.Ambari(5) 1.0 监控ResourceManager进程Java虚拟机中堆空间的特定部分. jstat工具,在JDK的bin目录 ...

  7. java 线程池第一篇 之 ThreadPoolExcutor

    一:什么是线程池? java 线程池是将大量的线程集中管理的类,包括对线程的创建,资源的管理,线程生命周期的管理.当系统中存在大量的异步任务的时候就考虑使用java线程池管理所有的线程.减少系统资源的 ...

  8. 迅为iMX6UL开发板低功耗高能效开发平台

    迅为i.MX 6UL开发板基于ARM Cortex-A7内核,主频高达528 MHz,内存:512MDDR3,存储:8G EMMC,支持2路CAN,2路百兆以太网,4路USB HOST,8路串口,以及 ...

  9. 迅为iTOP-4418嵌入式开发板初体验

    iTOP-4418开发板预装 Android4.4.4 系统, 支持9.7 寸.7 寸.4.3 寸屏幕. 参数:核心板参数 尺寸 50mm*60mm高度 核心板连接器为1.5mmCPU ARM Cor ...

  10. 十一，类型参数化--Scala

    类型参数化 在scala中,类型参数化(类似于泛型)使用方括号实现,如:Foo[A],同时,我们称Foo为高阶类型.如果一个高阶类型有2个类型参数,则在声明变量类型时可以使用中缀形式来表达,此时也称该 ...