display:inline-block居中方式
<!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居中方式的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- 2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展
1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;} 竖直方向 ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- display:inline,display:inline-block,display:block 区别
之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline; display:block;
block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- display:inline 跟 display:block 跟 display:inline-block区别
我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- 【LOJ 2542】【PKUWC2018】 随机游走(最值反演 + 树上期望dp)
哇我太菜啦555555 不妨钦定我们需要访问的点集为$S$,在$S$已知的情况下,我们令$f(x) $表示从$x$走到点集$S$中任意一点的期望步数. 若$x∈S$,则显然$f(x)=0$,否则$f[ ...
- aspectj
http://stackoverflow.com/questions/25209339/spring-aspectj-weaving-for-java-8-using-aspectj-maven-pl ...
- WinForm—串口通讯
ialPort(串行端口资源) 常用属性: BaudRate 此串行端口上要使用的波特率 DataBits 每发送/接收一个字节的数据位数目 DtrEnable 在通讯过程中是否启用数据终端就绪(St ...
- mysql中UNION ALL用法
MYSQL中的UNION UNION在进行表链接后会筛选掉重复的记录,所以在表链接后会对所产生的结果集进行排序运算,删除重复的记录再返回结果. 举例说明: select * from table1 u ...
- windows下python3.6版本安装pygame
参考:http://blog.csdn.net/a380331382/article/details/77063152 首先,进入这个网站:http://www.lfd.uci.edu/~gohlke ...
- Ubuntu链接库查找
apt-get install apt-file apt-get update apt-file search
- 《LeetBook》leetcode题解(19):Remove Nth Node From End of List[E]——双指针解决链表倒数问题
我现在在做一个叫<leetbook>的开源书项目,把解题思路都同步更新到github上了,需要的同学可以去看看 这个是书的地址: https://hk029.gitbooks.io/lee ...
- ES6 箭头函数(Arrow Functions)
ES6 箭头函数(Arrow Functions) ES6 可以使用 "箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 具有一个参数的简单函 ...
- Android 开发工具类 04_KeyBoardUtils
打开或关闭软键盘: 1.打卡软键盘: 2.关闭软键盘. import android.content.Context; import android.view.inputmethod.InputMet ...
- c# static用法
有时候写程序时常常遇到这样的情况: 1.定义了变量和方法不知道什么时候该加上static修饰符. 2.static变量和方法与非static变量和方法有什么区别? 3.在一个类的静态方法里为什么不 ...