<!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. Tornado 异步socketTCP通信

    Tornado 有 TCPClient 和 TCPServer 两个类,可用于实现 tcp 的客户端和服务端.事实上,这两个类都是对iostream的简单包装. 真正重要的是 iostream ios ...

  2. 手写Spring框架，加深对Spring工作机制的理解！

    在我们的日常工作中,经常会用到Spring.Spring Boot.Spring Cloud.Struts.Mybatis.Hibernate等开源框架,有了这些框架的诞生,平时的开发工作量也是变得越 ...

  3. 为什么我加了索引，SQL执行还是这么慢（二）？

    接上文 在MySQL中,有一些语句即使逻辑相同,执行起来的性能差异确实极大的. 还记得我们上文中的结论吗:如果想使用索引树搜索功能,就不能使用数据库函数来处理索引字段值,而是在不改变索引字段值的同时, ...

  4. php [poolwww] seemsbusy (youmayneedto increasepm.start_servers, or pm.min/max_spare_servers)错误解决方法

    php [poolwww] seemsbusy (youmayneedto increasepm.start_servers, or pm.min/max_spare_servers)错误解决方法修改 ...

  5. 红帽7.4(RHCE7.4)磁盘扩容详细步骤

    参照博文VMware虚拟机CentOS 7 磁盘扩容:https://www.linuxidc.com/Linux/2019-04/158346.htm 01.虚拟机扩容磁盘.如下图 02.使用roo ...

  6. Thinkphp5与QueryList，也可以实现采集(爬虫)页面功能

    QueryList 是什么 QueryList是一套用于内容采集的PHP工具,它使用更加现代化的开发思想,语法简洁.优雅,可扩展性强.相比传统的使用晦涩的正则表达式来做采集,QueryList使用了更 ...

  7. 易语言 史诗级Json处理 烁_Json模块！！！！

    大家好,我是键盘上的魔手 * “************************”* “** 欢迎使用烁Json模块 **”* “** 作者:键盘上的魔手 **”* “**  微信号:codervip ...

  8. 【SQL】安装后设置 sa账号登录

    1.windows身份验证登录管理员账户   2.找到sa账号双击  3.设置密码,启用 4.右键 属性 安全性   5.重启服务,sa账号登录   本地服务用  .     6.登录成功:

  9. Spring-boot构建多模块依赖工程时，maven打包异常：程序包xxx不存在

    在qizhi项目改版的时候, 所有代码都迁移好了, 但是compile的时候报程序包*****不存在, 具体到某一个类就是: 找不到符号. 下面这篇文章是正解 http://hbxflihua.ite ...

  10. Redis单节点数据同步到Redis集群

    一:Redis集群环境准备 1:需要先安装好Redis集群环境并配置好集群 192.168.0.113 7001-7003 192.168.0.162 7004-7006 2:检查redis集群 [r ...