<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. Poj 3264 Balanced Lineup RMQ模板

    题目链接: Poj 3264 Balanced Lineup 题目描述: 给出一个n个数的序列,有q个查询,每次查询区间[l, r]内的最大值与最小值的绝对值. 解题思路: 很模板的RMQ模板题,在这 ...

  2. HDU 6096 树套树

    思路: 网上的题解有AC自动机的,有trie树的,还有(乱搞?)的 首先把输入的那n个串按照字典序排序, 把n个串翻转以后再按照字典序排序 这样我们发现, 查的前缀在字典序排序后是一段区间, 查的后缀 ...

  3. linux自动连接校园网设置

    不知道有没有人用linux的时候碰到过校园网连接后,跳不出登录界面,即使手动输入也没有作用.写一个可能可行的方法: - 首先打开控制面板 选择网络代理 将代理中的选项设置为 估计现在就能自动弹出登录页 ...

  4. for循环的阶乘

    方法一: long sum=0; long num=1; for (long i = 1; i <=20; i++) { for(long j=i;j>0;j--){ num=num*j; ...

  5. Volley的初步了解

    Volley的介绍 Volley是什么? 2013年Google I/O大会上推出的网络请求和图片加载框架 其优点是api简单,性能优秀 非常适合数据量不大但是通信频繁的网络请求,而对于大数据量的操作 ...

  6. ASP.NET MVC+Bootstrap个人博客之修复UEditor编辑时Bug（四）

    我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好).但总算找到了解决方法,在此记录下来. 遇到的问题: 正常来讲,进入文章修改页,只需将U ...

  7. Java多线程——线程的优先级和生命周期

    Java多线程——线程的优先级和生命周期 摘要:本文主要介绍了线程的优先级以及线程有哪些生命周期. 部分内容来自以下博客: https://www.cnblogs.com/sunddenly/p/41 ...

  8. Linux下Eclipse连接小米手机真机调试

    以前用Ubuntu 12.04可以真机调试,连上手机就可以了,上次看pear os 好看于是下了个玩玩(界面风格像mac 买不起,仿得起),这次想开发安卓发现真机调试不了了...于是乎各种找资料,各种 ...

  9. Sql Server 2012 事务复制遇到的问题及解决方式

    1.订阅服务器提示:作业失败.无法确定所有者 WIN-01Q6JB46CHV\Administrator(拥有作业XXX)是否有服务器访问权限(原因:无法获取有关 Windows NT 组/用户'WI ...

  10. greenplum4.3.8.2安装

    GREENPLUM总体结构:   数据库由Master Severs和Segment Severs通过Interconnect互联组成. Master主机负责:建立与客户端的连接和管理:SQL的解析并 ...