<!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. 三分钟学会Redis在.NET Core中做缓存中间件

    大家好,今天给大家说明如何在.NET Core中使用Redis,我们在想要辩论程序的好与坏,都想需要一个可视化工具,我经常使用的是一位国内大牛开发的免费工具,其Github地址为: https://g ...

  2. 【gradle使用—gradle介绍】

    Gradle基本组件  Gradle是一个框架,定义了一套自己的规则,所以要搞清楚Gradle,必须要遵守它设计的原则,下面我们要先搞清楚一些Gradle的概念: Gradle中,每一个待编译的工程是 ...

  3. Ubuntu16.04安装Nginx+PHP5.6+MySQL5.6

    安装Nginx 1.首先添加nginx_signing.key(必须,否则出错) $ wget http://nginx.org/keys/nginx_signing.key $ sudo apt-k ...

  4. 模块参数，系统调用，字符设备编程重要数据结构，设备号的申请与注册，关于cdev的API

    1.模块参数  应用编程:      int main(int argc, char *argv[])      {               }      ./a.out xxx yyy zzz  ...

  5. Comparable接口的实现和使用

    1.什么是Comparable接口 此接口强行对实现它的每个类的对象进行整体排序.此排序被称为该类的自然排序 ,类的 compareTo 方法被称为它的自然比较方法 .实现此接口的对象列表(和数组)可 ...

  6. 深入理解计算机系统 第二章 信息的表示和处理 part1

    欣哥划的重点: 第二章比较难,建议至少掌握下面几个知识点: 1. 字节顺序 : 大端和小端 2. 运行 图2-24, 图2-25程序 show-bytes.c 观察结果,看看有什么问题 3. 理解布尔 ...

  7. WordPress 添加title中的logo

    WordPress 添加title中的logo <!--网页标题左侧显示--> <link rel="icon" href="/favicon.png& ...

  8. Spring boot 加入shiro支持

    在项目添加依赖 <!-- shiro spring. --> <dependency> <groupId>org.apache.shiro</groupId& ...

  9. CSS RESET —— 浏览器样式重置

    CSS Reset 1. CSS Reset为什么存在? 只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CS ...

  10. linux内核的tiny rcu, tree rcu

    kernel中有两个rcu的实现,一个是tiny rcu,另一个是tree rcu.这两种rcu的前身都是classic rcu.如果要阅读classic rcu的实现代码,必须找kernel 2.6 ...