<!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. 手把手教你定制标准Spring Boot starter，真的很清晰

    写在前面 我们每次构建一个 Spring 应用程序时,我们都不希望从头开始实现具有「横切关注点」的内容:相反,我们希望一次性实现这些功能,并根据需要将它们包含到任何我们要构建的应用程序中 横切关注点 ...

  2. NOIP 模拟29 B 侥幸

    这次考得好纯属是侥幸,我T3打表试数试了两个小时,没有想打T2的正解(其实是打不出来)所以这个T3A掉纯属是侥幸,以后还是要打正解 (以下博客最好按全选观看,鬼知道为啥这个样子!) 在这里也口胡一下我 ...

  3. Python实现王者荣耀小助手（二）

    接下来我们获取英雄和武器信息,详细代码KingGlory.py如下(代码中有详细注解): # -*- coding: utf-8 -*- #!/usr/bin/env python # @Time : ...

  4. PHP防止客户端多次点击

    PHP防止客户端多次点击 第一种用ip判断 第二种就是用 用户名第三种就是cookie仅限 H5第四种 用swoole 用swoole id

  5. windsServer2008设置定时重启

    点击“开始”——“管理工具”——“任务计划程序”. 右键“任务计划程序库”——“创建任务”. 输入计划名称.描述和安全选项(如下图). 点击触发器,点击“新建…”,输入计划周期和时间(如下图):无误后 ...

  6. Non-local Neural Networks 原理详解及自注意力机制思考

    Paper:https://arxiv.org/abs/1711.07971v1 Author:Xiaolong Wang, Ross Girshick, Abhinav Gupta, Kaiming ...

  7. 浅谈Node中的模块化

    关于这篇文章早在去年年初的时候我就想写一片关于模块化的文章,但是推到现在才来完成也有很多好处,巩固之前对Node的理解.毕竟在我目前的项目中还没有一款项目是用到了Node开发,所以导致我对Node的一 ...

  8. ENS中文文档系列之一 [ ENS介绍 ]

    前言 ENS中文文档是由我照ENS英文官方文档翻译而来,其中的一些内容和细节得到了ENS官方团队的指导.文档中包含 “LBB译注” 的地方是译者为了便于读者理解而进行的注释. 未来一段时间,我会在该博 ...

  9. JavaWeb02-Servlet

    Servlet概述 生命周期方法: l  void init(ServletConfig):出生之后(1次): l  void service(ServletRequest request, Serv ...

  10. convert svn repo to git

    https://john.albin.net/git/convert-subversion-to-git 1. 抓取Log 在linux 上做的,其余是在win上做的. 2. svn co svn:/ ...