<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. Sequence POJ - 2442

    Sequence POJ - 2442 口胡一个结论:就是前i行产生的最小的n个和,一定可以在"前i-1行产生的最小n个和,每一个加上这一行的任意一个数,产生的n2个数"中找到.( ...

  2. 为什么JAVA虚拟机分为线程共享和非线程共享?

    大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区) ,Heap(堆) , Program Counter Register(程序计数器) , VM Stack(虚拟 ...

  3. 针对谷歌默认最小字体12px的正确解决方案

    利用css3的缩放,其最终大小就是:12px * 0.9(缩放比例) = 10.8px; 居然行得通.但回头一想,这么写的话,IE7 IE8会不会不兼容,还是12px呢?不出所料,果然不兼容.此时,又 ...

  4. php socket通信演示以及socket操作类

    准备做Java的课程设计,一个通讯录.采用C/S架构.客户端用java FX和Java,服务器端用php,采用socket通信. 下面来讲一讲php的socket通信: 讲之前,得先讲一下TCP/IP ...

  5. vue全局loading组件

    本组件作用在页面加载完成前进行loader提示,提升用户体验,只需要在app.vue中引用一次,整个项目中路由切换时就可以自动进行提示(vuex版): 1. 添加vuex值和方法: import Vu ...

  6. Vue.js——打包之后资源路径产生问题

    https://blog.csdn.net/qq_30632003/article/details/79353035 https://www.cnblogs.com/diantao/p/7776523 ...

  7. vba根据部门分别汇总不同部门下的人员不同培训内容的时长总计,多条件求和

    Option Explicit Sub yy() Dim d, arr, s$, i&, m&, w$ Set d = CreateObject("Scripting.Dic ...

  8. iTOP-4412开发板网盘资料介绍

    iTOP-4412开发板网盘视频资料内容如下: 01-烧写.编译以及基础知识视频 02-嵌入式Linux 视频 03-iTOP-4412 开发板硬件设计指导视频 04-Android 应用程序视频 0 ...

  9. 面试必备【含答案】Java面试题系列(二

    1.写clone()方法时,通常都有一行代码,是什么?答:super.clone(),他负责产生正确大小的空间,并逐位复制. 2.GC 是什么? 为什么要有GC?答:GC 是垃圾收集的意思(Gabag ...

  10. zabbix4.2学习笔记--zabbix安装

    环境 系统信息 发行版 版本 ip 关系 主机名 centos 7.5 192.168.181.135 服务端 server centos 7.5 192.168.181.136 客户端 client ...