<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="css/common.css"/>

    <style>

        .slider{

            width: 520px;

            height: 280px;

            overflow: hidden;

            position: relative;

        }

        .slider .img-list{

            width: 4000px;

        }

        .slider .img-list li{

            float: left;

        }

        .slider .img-list li img{

            width: 520px;

            height: 280px;

        }

        .slider .dots{

            position: absolute;

            bottom: 20px;

            width: 100%;/*父级宽度*/

            text-align: center;/*内容居中*/

        }

        .slider .dots .dot{

            width: 10px;

            height: 10px;

            background-color: #F00;

            border-radius: 50%;

            margin:0 2px;

            -webkit-box-shadow: 1px 2px 10px #000000;

            -moz-box-shadow: 1px 2px 10px #000000;

            box-shadow: 1px 2px 10px #000000;

            display: inline-block;/*转换为内联块级元素*/

            *dispaly:inline;

            *zoom:1;

            /*dipplay:inline-blok不兼容ie6，*内容兼容ie6*/

        }

        .slider .dots .dot.active{

            background-color: #ae0000;

        }

        .slider .arrow{

            display: inline-block;

            width: 20px;

            height: 40px;

            line-height: 40px;

            background: rgba(0,0,0,0.5);

            position: absolute;

            top: 50%;

            margin-top: -20px;

            text-decoration: none;

            color: #ffffff;

            text-align: center;

        }

        .slider .arrow:hover{

            background: rgba(0,0,0,0.8);

        }

        .slider .arrow.right{

            position: absolute;

            right: 0;

        }

    </style>

</head>

<body>

    <div class="slider">

        <ul class="img-list cf">

            <li><img src="https://img.alicdn.com/tfs/TB1ILwrQFXXXXXtXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt=""/></li>

            <li><img src="https://img.alicdn.com/simba/img/TB1F_ZYQFXXXXcSXpXXSutbFXXX.jpg" alt=""/></li>

            <li><img src="https://img.alicdn.com/simba/img/TB1WWZEQFXXXXXoXpXXSutbFXXX.jpg" alt=""/></li>

            <li><img src="https://img.alicdn.com/tfs/TB102DLQFXXXXaFXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt=""/></li>

        </ul>

        <div class="dots">

            <a href="#none" class="dot"></a>

            <a href="#none" class="dot active"></a>

            <a href="#none" class="dot"></a>

            <a href="#none" class="dot"></a>

        </div>

        <a class="arrow" href="#none"><</a>

        <a class="arrow right" href="#none">></a>

    </div>

</body>

</html>

display:inline-block居中方式的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. 2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  3. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  4. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

  5. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  6. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  7. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  8. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  9. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  10. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. (转)Python - 字符串对齐

    https://zhuanlan.zhihu.com/p/33923344-----------Python小知识:用format格式化输出字符串 版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  2. Mapreduce部署与第三方依赖包管理

    Mapreduce部署是总会涉及到第三方包依赖问题,这些第三方包配置的方式不同,会对mapreduce的部署便捷性有一些影响,有时候还会导致脚本出错.本文介绍几种常用的配置方式: 1. HADOOP_ ...

  3. java数据结构之二叉树的定义和递归实现

    定义最多有两棵子树的有序树,称为二叉树.二叉树是一种特殊的树.递归定义:二叉树是n(n>=0)个有限结点构成的集合.N=0称为空二叉树:n>0的二叉树由一个根结点和两互不相交的,分别称为左 ...

  4. js操作符类型转换

    乘法 我们来看下前面的题目: console.dir(5*"5"); console.dir(5*"a");//NaN console.dir(5*NaN);/ ...

  5. JS浮点数精确计算方法

    function add(a, b) { var c, d, e; try { c = a.toString().split(".")[1].length; } catch (f) ...

  6. springweb flux 服务器推送事件

    以前做服务器推送一般用轮询,后端主动给客户端推送不是很好解决.有时候也可以采用websocket 现在看了springwebflux,用它自带的方法做服务器推送方便多了. 代码如下: import o ...

  7. OOAD之创建型模式之工厂模式

    首先我们为什么要学习设计模式呢? 1)模式从经验中总结出来的,经过证实的方案,模式只有在实际系统中经过多次验证之后才能成为模式. 2) 提高系统的可维护性, 通过使用设计模式,在系统面临升级和维护时, ...

  8. [BJOI 2018]求和

    Description 题库链接 给你一棵 \(n\) 个结点的有根树, \(m\) 次询问这棵树上一段路径上所有节点深度的 \(k\) 次方和. \(1\leq n\leq 300000,1\leq ...

  9. NOI2018 退役记

    退役预订... upd 果然就这么不光荣的退役了... 我居然考出了一场只有两题得分的比赛,我好菜啊... 不过高三充(tui)实(fei)的生活应该很有意思... 大家一起加油吧!!!

  10. C#语法之匿名函数和Lambda表达式

    上一篇博客主要是对委托和事件做了一小结,这篇是在上一篇博客的基础上对匿名函数和Lambda表达式小结.还是接着上一篇说起,在上一篇中也说了委托是一种数据结构,主要是解决让函数作为参数的问题.在使用委托 ...