<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. 前端基础jQuery

    jQury jQuery 是一个 JavaScript 函数库,jQuery 极大地简化了 JavaScript 编程. jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS ...

  2. AngularJs调用NET MVC 控制器中的函数进行后台操作

    题目中提到的控制器指的是.NET  MVC的控制器,不是angularjs的控制器. 首先看主页面的代码: <!DOCTYPE html> <html> <head> ...

  3. redis持久化和分布式实现

    Redis是一种面向“key-value”类型数据的分布式NoSQL数据库系统,具有高性能.持久存储.适应高并发应用场景等优势. 本文使用的redis是3.2.1版本.下载后,文件如下 将文件解压到指 ...

  4. Java中的流(4)InputStream,InputStreamReader,BufferedReader关系

    InputStream是字节流,InputStreamReader将字节流转成字符流,BufferedReader将字符流转成字符缓冲,开始读字符. 1.InputStream.OutputStrea ...

  5. pandas 选择某几列

    转自:https://blog.csdn.net/aaa_aaa1sdf/article/details/77414387 col_n = ['名称','收盘价','日期'] a = pd.DataF ...

  6. 6 Specialzed layers 特殊层 第一部分 读书笔记

    6 Specialzed layers 特殊层  第一部分  读书笔记   Specialization is a feature of every complex organization. 专注是 ...

  7. 重构31-Replace conditional with Polymorphism（多态代替条件）

    多态(Polymorphism)是面向对象编程的基本概念之一.在这里,是指在进行类型检查和执行某些类型操作时,最好将算法封装在类中,并且使用多态来对代码中的调用进行抽象. public class O ...

  8. php从mysql数据库中取数据

    php从数据库中取数据  面向过程 <?php $server_name="localhost:3306"; //数据库服务器名称 $username="root& ...

  9. MFC程序最小化到系统托盘及其响应函数

    预备知识: Windows API函数: WINSHELLAPI BOOL WINAPI Shell_NotifyIcon( DWORD dwMessage, PNOTIFYICONDATA pnid ...

  10. Windows:32位程序运行在64位系统上注册表会重定向

    参考资料 微软注册表英文文档 StackOverflow社区回答 1.注册表位置 64bit系统(Windows Server 2008 R2只有64bit系统)的注册表分32 位注册表项和64位注册 ...