<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <style>
    *{
        margin: 0;
        padding: 0;
    }
        /*相同的样式我们可以使用并集选择器*/
    .top,
    .banner,
    .main,
    .footer {
        width: 960px;
        margin: 0 auto;
        margin-bottom: 10px;
        text-align: center;
    }
        .top{
            height: 80px;
            background-color: pink;
        }
        .banner{
            height: 120px;
            background-color: #0a2ffe;
        }
        .main{
            height: 500px;
            background-color: hotpink;
        }
        .footer{

            height: 150px;
            background-color:black;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">main</div>
<div class="footer">footer</div>

</body>
</html>

css3学习——一列固定宽度且居中的更多相关文章

  1. css3学习笔记之多列

    CSS3 创建多列 column-count 属性指定了需要分割的列数. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!D ...

  2. css3学习文档

    什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...

  3. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  4. CSS3学习

    1.CSS3边框 border-radius:创建圆角边框 border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ box-shad ...

  5. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  6. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  7. css和css3学习

    css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...

  8. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  9. CSS3之多列布局columns详解

    CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...

随机推荐

  1. FastJson稍微使用不当就会导致StackOverflow

    GitHub 9.4k Star 的Java工程师成神之路 ,不来了解一下吗? GitHub 9.4k Star 的Java工程师成神之路 ,真的不来了解一下吗? GitHub 9.4k Star 的 ...

  2. 从V神到以太坊——以太坊发展简史

    以太坊的出现,让人们的认识从比特币飞跃到了区块链本身.使得区块链技术在非金融领域的普遍应用成为可能,同时,也被认为是区块链2.0时代的标志,是区块链技术发展史上重要的里程碑. 以太坊的故事,要从比特币 ...

  3. coco-stuff and thing

    Defining things and stuff. The literature provides definitions for several aspects of stuff and thin ...

  4. mysql select自增变量(包括读取当前第几行)

    mysql select自增变量(包括读取当前第几行) SET @rownum =0;select id,@rownum := @rownum +1 as i from ceshi order by ...

  5. mpvue+小程序云开发，纯前端实现婚礼邀请函（相册小程序）

    请勿使用本文章及源码作为商业用途! 前言 当初做这个小程序是为了婚礼前的需要,结婚之后,希望这个小程序能够留存下来,特地花了一些空闲时间将小程序转化成为“相册类小程序” 体验码 准备工作 mpvue框 ...

  6. java中的线程安全

    在Java中,线程的安全实际上指的是内存的安全,这是由操作系统决定的. 目前主流的操作系统都是多任务的,即多个进程同时运行.为了保证安全,每个进程只能访问分配给自己的内存空间,而不能访问别的.分配给别 ...

  7. webpack 打包优化的四种方法（多进程打包，多进程压缩，资源 CDN，动态 polyfill）

    如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack ...

  8. springboot返回统一接口与统一异常处理

    springboot返回统一接口与统一异常处理 编写人员:yls 编写时间:2019-9-19 0001-springboot返回统一接口与统一异常处理 简介 创建统一的返回格式 Result 封装统 ...

  9. Git II: 操作远程Repository基础

    很久之前写过一篇Git: Setup a remote Git repository,留意到有前同事谈论到Git的一些操作,就把Git值得留意的操作补补全吧.这次,主要讲述Git远程Repositor ...

  10. 在小程序中使用md5

    使用md5.js的首先你要有md5.js这个文件https://github.com/emn178/js-md5 您也可以使用Bower安装js-md5. bower install md5 对于no ...