步骤如下：

　　　　1、版心盒子设置相对定位relative　　　　

　　　　2、banner图设置绝对定位，设置block，清除默认的间距

　　　　3、banner图的left设置：left：50%；  margin-left：-banner图宽度一半；

超宽banner图在版心居中的更多相关文章

  1. 做一个常规的banner图——负边距的使用、banner图的拼法

    在这之前,首先要了解如何设置块级元素在块级元素水平居中 方法: 设置子容器为定位元素 水平居中 left:50%:margin-left:-width/2: 垂直居中 top:50%:margin-t ...

  2. jquery自定义banner图滚动插件---（解决最后一张图片倒回第一张图片的bug）

    banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...

  3. 原生态JS实现banner图的常用所有功能

    虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...

  4. JS 实现banner图的滚动和选择效果

    CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...

  5. 使用CSS3中的input标签与lable标签组合实现banner图的切换

    在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...

  6. 这是假的JS——利用CSS Animation实现banner图非交互循环播放

    话不多说,先来张html和css代码截图~ 注意事项: 1.如果想在每张图前进行停顿,可以在keyframes中的每一步前加上一小段与下一张相同的代码: 2.如果想要在实现无违和感的最后一张与第一张的 ...

  7. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  8. 最简单实用的JQuery实现banner图中的text打字动画效果！！！

    下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...

  9. Banner图二三事

      前  言 JRedu 作为一个准前端学员,banner图可是很重要的呢.本人,小白一只,给大家分享几个刚刚学习的基础banner图事件.~~~ 1. 小广告图滚动播放 1.1HTML代码 首先,创 ...

随机推荐

  1. Eclipse for Tricore 的安装方法

    1.安装JDK32位版 2.安装Eclipse for Tricore 32位版(应该也只有32位的) 3.OK(如果打开Tricore提示找不到JDK的话,在网上搜索如何配置JDK,修改环境变量) ...

  2. JavaScript的DOM对象和jQuery对象的对比

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. luogu P4981 父子

    题目背景 上演在各大学男生寝室的日常 :: A :A: "我没带纸,快来厕所救我!" B :B: "叫爸爸." A :A: "爸爸!" .. ...

  4. HashMap踩坑实录——谁动了我的奶酪

    说到HashMap,hashCode 和 equals ,想必绝大多数人都不会陌生,然而你真的了解这它们的机制么?本文将通过一个简单的Demo还原我自己前不久在 HashMap 上导致的线上问题,看看 ...

  5. [TimLinux] Django 信号

    1. 信号定义 django包含有一个“信号分发器”,在框架内任何时候,在任何地方,有动作发生时,用来帮助解耦应用之间获取通知.简言之,信号允许特定的发送者通知一系列接收者某一特定动作已经发生了.特别 ...

  6. hdu3791二叉搜索树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3791 题意:给定一个n(多组,n为0时结束),给一个串和n个串,分别判断n个串按序列构建的二叉搜索树和 ...

  7. unity3d 随机添加树木

    开放世界随机地图才是最重要的.. 随机生成树木 Terrain.terrainData //获取地形设置 terrainData.treePrototypes {get;set;} //获取或设置树木 ...

  8. 基于CC1606 FPGA评估板移植iCamera程序小结

    iCamera作为柴草电子经典的摄像头开发工具,其强大的摄像头调试功能,深受广大网友喜爱,支持市面上各种摄像头. 目前现有的应用板卡支持:CC1601(CP601A). CC1602(CP601B) ...

  9. 【面试】386- JavaScript 面试 20 个核心考点

    点击上方"前端自习课"关注,学习起来~ 引言 Javascript是前端面试的重点,本文重点梳理下 Javascript 中的常考基础知识点,然后就一些容易出现的题目进行解析.限于 ...

  10. 选择排序 C&&C++

    选择排序 选择排序即在每一步中选取最小值重新排列,从而达到排序的目的   流程: (1)先从原始数组选择一个最小数据和第一个位置交换 (2)剩下的n-1个数据选择最小的和第二个位置交换 (3)不断重复 ...