Java教程

12-8 手撸轮播组件-瞬时切换版本,布局部分

本文主要是介绍12-8 手撸轮播组件-瞬时切换版本,布局部分,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

image
看看思路,一个ul,里面的li多个啊,每个装个一张图片,然后中间套了一个div(这玩意和相框似的),是不是这样就可以,通过改变ul的内联样式left,来切换图啊。
来吧,先写布局:
怎么此时的outer这样子呢?
image
效果:
image
其实听不明白怎么div这么宽,明明是500px嘛
image

body有默认的外边距,我们都去了
image
怎么去,不用带单位哦
image

相框

宽高和途品一样,居中
image
相框的边怎么写,用padding,为什么不用margin,看看区别呗
padding:怎么还打拐了,被压住了?
image
margin:不用看了,设置马耿就没有底色了

ul

先把ul中li的痦子去了、
emm,这图还竖着呢,怎么搞
image
注意啊:其实这里去li的点,我卸载imgList下也是可以的
image
先,为什么竖着,这是li啊,不废话吗
说说队float的理解吧(让li向左浮动就可以了)
image

诶,这咋不横过来呢
image
其实,自然是父容器,ul宽度小了。每张图片500,所以至少2500才行
成了
image
现在给li设置一个左右外边距吧,让图片别那么近
这种请款下,宽度不够了(左右10,5个,加了100)。而且左边距挤了img了
image

image
看到这,我们其实可以给outer的左右padding去了,对吧。因为li自己带了嘛

这里就发现以问题,div outer的宽度不够了,li是500,但是左右有margin10,所以有520。
image

margin没颜色,所有左右10是,div的padding色。效果
image

宽度自适应

用函数来设置,imgList(ul)的宽度。重点来了
image
再,操作,ul内联样式
image

麻蛋,没生效,看黄色矿,错了写错了啊。少个s
image
改了好了

ul进行左移动,实现切图

关键:是不是要给ul开启绝对定位啊?是的
注意了给子元素开启绝对定位,最好给父元素开启相对定位,子绝父相。
这样,ul才可以就是相对outer定位了。
试一下:
image
image
可以,先这样了,明天继续。。。
实现,用导航按钮控制切换。

这篇关于12-8 手撸轮播组件-瞬时切换版本,布局部分的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!