在这之前，首先要了解如何设置块级元素在块级元素水平居中

方法：

设置子容器为定位元素

水平居中

left：50%；margin-left：-width/2；

垂直居中

top：50%；margin-top：-width/2；

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .div1{

                width: 200px;

                height: 200px;

                /*background-image: url(img/002.png);*/

                background-color: green;

                border:10px dotted red;

                background-clip: padding-box;

                position: relative;

                overflow: hidden;

            }

            .div2{

                width: 100px;

                height: 100px;

                background-color: palevioletred;

                position: absolute;

                left: 50%;

                margin-left: -50px;

                top: 50%;

                margin-top: -50px;

            }

        </style>

    </head>

    <body>

        <!---->

        <div class="div1">

            <div class="div2"></div>

        </div>

    </body>

</html>

效果图：

掌握了上边的方法，我们就可以做个比较标准的banner图了。

下边是一个没有被切的banner 图的做法：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #zb_banner{

    width: 100%;

    height:345px;

    position: relative;

    /*background-position: -260px 0px;*/

    overflow: hidden;

}

#zb_banner .c_ban{

    width: 1920px;

    height: 345px;

    background-image: url(../img/a01d20c11e264df890bd3e629e2420b0.jpg);

    background-repeat: no-repeat;

    position: absolute;

    left: 50%;

    margin-left: -960px;

}

        </style>

    </head>

    <body>

        <section id="zb_banner">

            <div class="c_ban">

            </div>

        </section>

    </body>

</html>

效果图如下：

最大化下的状态：

缩小窗口后的效果：

因为现在主流最大的显示屏是1920的，所以banner图一般也做成1920的，被切开的话，放到一个宽度1920的div里边就可以了，不用调整图的大小。只有这么设置才会不会因为浏览器窗口大小的变化而影响banner图的居中位置，也可以使被切开的banner图能够完整的拼起来，不会变形。

做一个常规的banner图——负边距的使用、banner图的拼法的更多相关文章

  1. css负边距之详解

    自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...

  2. css负边距之详解(子绝父相)

    来源 | http://segmentfault.com 原文 |  The Definitive Guide to Using Negative Margins   自从1998年CSS2作为推荐以 ...

  3. 【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

  4. 做一个会PS切图的前端开发

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

  5. 使用ArcMap做一个1:5000标准分幅图并编号

    实现这个project,十进制度.渔网工具.Excel if/Text函数.挂接Excel表.空间连接.投影这些知识是必须的.看懂本篇博文也就意味着大概掌握了以上知识. 坐标数据设置与编号标准依据&l ...

  6. 做一个vue轮播图组件

    根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组, ...

  7. (Android+IOS)正在做一个新闻App,做的差不多了,听听大家的建议 (图)

    (Android+IOS)正在做一个新闻App,做的差不多了,听听大家的建议! 新闻采集器做好了,前端展示APP界面感觉还不是很好,还需要改进改进,希望发布(Android和IOS版本)前听听大家的建 ...

  8. 做一个 App 前需要考虑的几件事

    做一个 App 前需要考虑的几件事  来源:limboy的博客   随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 ...

  9. 做一个App前需要考虑的几件事

    本文转载于文章原文链接,版本归原作者所有! 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 App 有了一定规模后, ...

随机推荐

  1. Android Socket 遇到的Soure Not Find 错误

    参考: http://blog.csdn.net/brokge/article/details/8543145 http://blog.csdn.net/mad1989/article/details ...

  2. Python中的元祖Tuple

    Python中的元祖和list基本上一样 tuple = () # 表示一个空的元祖 tuple = (50, ) # 元组中只有一个元素的时候,必须在后面加上逗号 无关闭分隔符 任意无符号的对象,以 ...

  3. 移动端高清、多屏适配方案——rem

    背景: 开发移动端H5页面 一套设计图 不同尺寸的手机 不同分辨率的手机 方案:使用rem作为单位解决一套设计图适应不同分辨率,不同尺寸的手机. 概念: REM(font size of the ro ...

  4. [原创]ASM动态修改JAVA函数之函数字节码初探

    ASM是非常强大的JAVA字节码生成和修改工具,具有性能优异.文档齐全.比较易用等优点.官方网站:http://asm.ow2.org/ 要想熟练的使用ASM,需要对java字节码有一定的了解,本文重 ...

  5. cuda学习笔记——deviceQuery

    main(int argc, char **argv):argc是参数个数,**argv具体的参数,第0个是程序全名 cudaError_t类型:记录cuda错误,值为cudaSuccess则正确执行 ...

  6. iOS开发之单例模式

    1.概述 单例模式是一种常用的软件设计模式,通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源. 如果希望系统中某个类的对象只能存在一个,单例模 ...

  7. Tcl与Design Compiler （七）——环境、设计规则和面积约束

    本文属于原创手打(有参考文献),如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/  ,作者:IC_learner 本文的主要内容是讲解( ...

  8. 高并发场景之RabbitMQ篇

    上次我们介绍了在单机.集群下高并发场景可以选择的一些方案,传送门:高并发场景之一般解决方案 但是也发现了一些问题,比如集群下使用ConcurrentQueue或加锁都不能解决问题,后来采用Redis队 ...

  9. 使用EPPlus读写xlsx文件

    朋友有个需求,想对N张excel表做过滤和合并的处理,拜托我写个小程序.因为用户的背景是非专业用户,因此最好的选择是写个GUI程序,再加上读写excel的需求,所以我的首选就是C#的WinForm了. ...

  10. Html5-测试Canvas

      // 浏览器不支持Html5 Canvas"; var theCanvas=document.getElementById("canvas_one"); if(!th ...