<!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. CSPS模拟 48

    ??? 分数越来越低??? T1 String Master 题目过于毒瘤,以至于我都不想改 T2 Tourist Attractions 稍微转化题意是求无向图的三角形个数 由于坚信bitset不是 ...

  2. OI 经典诗歌

    键盘行 学校机房夜送客,枫叶蒟蒻秋瑟瑟.主人下马客在船,代码欲写无键盘.夜不AC惨将别,别时茫茫屏幕亮. 忽闻楼上键盘声,主人忘归客不发.寻声暗问敲者谁,键盘声停欲语迟.上楼相近邀相见,添酒回灯重开宴 ...

  3. js中 对象名.属性名和对象名['属性名']的区别,.和[]的区别

    对象中的对象名[ ' 属性名 ' ] 和 对象名.属性名的区别 话不多少,上图分析,菜鸟刚学几个月,如有错误,欢迎大佬们指出 这里是很显而易见的! 然后我们用for in 对他进行遍历,他的区别就出来 ...

  4. 130道ASP.NET面试题（一）

    1 .简述 private,protected,public,internal修饰符的访问权限 答: private : 私有成员, 在类的内部才可以访问. protected : 保护成员,该类内部 ...

  5. Java nio 空轮询bug到底是什么

    编者注:Java nio 空轮询bug也就是Java nio在Linux系统下的epoll空轮询问题. epoll机制是Linux下一种高效的IO复用方式,相较于select和poll机制来说.其高效 ...

  6. Asp.net Core 系列之--4.事务、日志及错误处理

    ChuanGoing 2019-11-17 这篇原本时想把事务处理.日志处理.错误处理.授权于鉴权一并介绍完的,授权和鉴权我想结合自定义权限来介绍,全部放到这里篇幅可能太长,因此权限部分将会在下篇来介 ...

  7. ES6学习 let const

    1.前言 发现网易云笔记 单纯的记笔记没什么意思,所以今天来博客园写学习感受了,毕设做了休息时间就来写写新学的知识 哈哈哈 !! 2.ES6 就是JavaScript 语言的下一代标准,2015年6月 ...

  8. 【SpringBoot | Swagger】SpringBoot整合Swagger

    SpringBoot整合Swagger 1. 什么是Swagger Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.简单说就是项目跑起来了, ...

  9. 力扣（LeetCode）找不同 个人题解

    给定两个字符串 s 和 t,它们只包含小写字母. 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母. 请找出在 t 中被添加的字母. 示例: 输入: s = "abcd&quo ...

  10. sqlcipher的php扩展运行在fast-cgi:php-fpm下工作不正常

    今天发现了这样的问题,php-fpm运行sqlcipher时,有些数据库工作正常,有些却不正常. 不正常的,都在日志上报错,也就是php处理异常了. 这个报错发生在执行sql语句时,通常就是sqlci ...