<!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. pods报错修复方法

    ### Error ``` RuntimeError - [!] Xcodeproj doesn't know about the following attributes {"inputF ...

  2. django框架--视图系统

    目录 一.视图函数的理解 二.视图函数的定位 三.请求对象HttpRequest 四.响应对象HttpResponse 一.视图函数的理解 视图函数的作用是,对指定的url执行业务逻辑,视图函数将会作 ...

  3. (转)python高级:列表解析和生成表达式

    一.语法糖的概念 “糖”,可以理解为简单.简洁,“语法糖”使我们可以更加简洁.快速的实现这些功能. 只是Python解释器会把这些特定格式的语法翻译成原本那样复杂的代码逻辑 我们使用的语法糖有: if ...

  4. SpringMVC+AJAX+JSON

    在做一个ajax发送json到springmvc的控制层,控制层的对象中有一个List集合,ajax调用总是报415错误.发现了一个一直没有注意到的问题,借机记录一下. (细节部分都忽略了,在最后的d ...

  5. Android 开发工具类 01_AppUtils

    1.获取应用程序名称: 2.获取应用程序版本信息. import android.content.Context; import android.content.pm.PackageInfo; imp ...

  6. Python虚拟环境中pip install时没有权限问题

    virtualenv Permission denied 新建的python虚拟环境的目录的所属者必须是当前用户,才不会出现这种错误 比如 virtualenv py27 sudo chown zzf ...

  7. tar 命令压缩时报错 tar: Removing leading `/' from member names

    在使用tar命令进行压缩打包的时候我们常常会遇到下面的错误.虽然它不会影响我们最后的压缩打包,但是间接说明了我们的命令是有问题的.接下来我们来看看解决的方法. 报错内容: [root@haha ~]# ...

  8. Java多态的一些陷阱

    Java多态是如何实现的? Java的多态和C++一样,是通过延时绑定(late binding)或者说运行时绑定(runtime binding)来实现的.当调用某一个对象引用的方法时,因为编译器并 ...

  9. 玩转mongodb(六):索引,速度的引领(普通索引篇)

    数据库索引与书籍的索引类似,有了索引就不需要翻整本书,数据库可以直接在索引中查找,在索引中找到条目后,就可以直接跳到目标文档的位置,这可以让查找的速度提高几个数量级. 一.创建索引 我们在person ...

  10. 转载《浅析MVC框架中View层的优雅设计及实例》

    在基于B/S的应用程序开发中,从基本的技术分工上来说就是两大块,一是软件显示界面,另一个是程序逻辑.在N年前的脚本语言时代,无论是asp.php还是jsp,我们基本是都是把这两者柔和在一起的.尽管我们 ...