HTML5学习_day06(5)--html之固定总结(轮播图 垂直居中)
1.position:relative 不会脱离文档流
2.position:absolute | fix 脱离文档流
3.absolute是相对于父级非static(没有设置定位默认值)进行定位(若父级是static 继续往上找有定位的父级)
4.fixed始终是相对于浏览器窗口来进行定位
定位的用途：
1.图片的叠加
2.元素的垂直居中
3，布局位置的改变
4.广告植入 【HTML5学习_day06(5)--html之固定总结(轮播图 垂直居中)】轮播图例子(js没实现)
- 锐客网 #wrap{
width: 600px;
height:600px;
}
.main{
position: relative ;
width: 540px;
height: 326px;
}
img{
float: left;
position: absolute ;
}
.div1,.div2:link{
text-decoration: none;
color: gray;
}
.div1:hover{
transition: 1s;
border: 2px solid lawngreen;
background: gold;
margin-top: -27px;
}
.div2:hover{
transition: 0.5s;
border: 2px solid lawngreen;
background: gold;
margin-top: -27px;
}
.div1{
display: inline-block;
position: absolute ;
width: 30px;
height: 50px;
background: gainsboro;
text-align: center;
line-height: 50px;
left: 10px;
top: 50%;
margin-top: -25px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.div2{
display: inline-block;
position: absolute ;
width: 30px;
height: 50px;
background: gainsboro;
text-align: center;
line-height: 50px;
right: 10px;
top: 50%;
margin-top: -25px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
文章图片
<
> 垂直居中
- 锐客网 /*居中第一种方式
.a{
width: 100px;
height: 100px;
background: wheat;
position: absolute;
绝对定位
left: 50%;
左50%
top: 50%;
上50%这是左上角那个点居中而已
margin-left: -50px;
左移动一半长度 可整个DIV水平居中
margin-top: -50px;
右移动一半高度 就可垂直居中
}*/
/*
居中第二种方式
.a{
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
top:0px;
margin: auto;
}
*/
推荐阅读
- 由浅入深理解AOP
- 继续努力，自主学习家庭Day135(20181015）
- python学习之|python学习之 实现QQ自动发送消息
- 一起来学习C语言的字符串转换函数
- 定制一套英文学习方案
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- 《深度倾听》第5天──「RIA学习力」便签输出第16期
- 如何更好的去学习
- 【韩语学习】（韩语随堂笔记整理）
- 焦点学习田源分享第267天《来访》