案例的演示
flex布局
所谓flex布局就是弹性盒布局,这种布局在移动端比较常用,但随着浏览器的版本更新,flex布局因为自身的优点,日渐常用。
思路:
- 首先分析这个小demo的结构,上下结构,我们可以用一个容器,将其包裹(就是所谓的大盒子)。
- 上方是个导航,上边是个ul,下面我们就可以用两个div,宽度的100%,高度自定义。
- 接下来我们就来开启和模型,记住一定的父盒子哦!display:flex;,那么怎么上下分呢?在继续添加 flex-wrap: wrap;就是上下分离了,是不是很方便。
- 接下来就是下边部分了,div里嵌套了ul,而且ul的高度好理解,是div的高度,那么ul多少宽呢?,可以无限宽!!! 我们让ul的宽度是3000px
- 我们接下来放li,你一看,li里面的也是上下结构,所以呢,嘿嘿!li是不是也要开启flex呀 flex-wrap: wrap;。上方div是放img,下边一个a标签。
- 记住哦,li用浮动起来哦!并考虑overflow:hidden放在那里
动画效果
- 我们有五张图片,我们现在让它从右向左移动。那么我们叫ul移动,带动li移动是不是可以。
- 我们用@keyframes改变ul的left的值,但是问题来了,我放五张图片,ul移动,右边就没了,空白了。肿么办???
- 我们是不是可以将五个li,在后面再复制一份,放在后边呀。 答案是可以的!!当我们的left正好将第一组li,移除,那么第二组就刚好不上来。那么我们用 animation: run 20s linear infinite;无限循环是不是就好了。
css部分代码
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.box-big {
position: absolute;
display: flex;
left: 50%;
top: 50%;
border: 1px solid #9FD6FF;
transform: translate(-50%, -50%);
width: 707px;
height: 170px;
/* background-color: pink; */
flex-wrap: wrap;
overflow: hidden;
}
.box-top {
width: 707px;
height: 30px;
border-bottom: 1px solid #9FD6FF;
background-color: #FEFEFE;
}
.div-bottom {
width: 707px;
height: 136px;
/* background-color: darkgoldenrod; */
overflow: hidden;
}
.st-icon-android {
display: inline-block;
width: 15px;
height: 15px;
background-image: url(../img/hd.gif);
margin: 8px;
}
h5 {
position: absolute;
top: 6PX;
left: 30px;
color: #307DD1;
}
ul {
position: absolute;
left: 90px;
width: 3000px;
height: 100%;
animation: run 20s linear infinite;
}
li {
list-style: none;
float: left;
width: 140px;
height: 100%;
margin: 0 5px 0 5px;
/* background-color: gold; */
flex-wrap: wrap;
}
.photo {
margin-top: 5px;
width: 140px;
height: 105px;
text-align: center;
/* background-color: springgreen; */
}
p {
text-align: center;
}
img {
cursor: pointer;
}
@keyframes run {
0% {
left: 0;
}
100% {
left: -745px;
}
}