zoukankan      html  css  js  c++  java
  • 128 手撸轮播组件瞬时切换版本,布局部分

    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
    可以,先这样了,明天继续。。。
    实现,用导航按钮控制切换。

    一日之计在于晨
  • 相关阅读:
    Navicat 总是断开连接
    MySQL 重连机制
    优化 一
    python之 paramiko模块 连接服务器
    变量值的修改
    Python使用APScheduler实现定时任务
    Linux命令 清空文件
    输入法 | 输入法如何打出直角引号
    Java | Java字节码
    英语 | 图片学习单词
  • 原文地址:https://www.cnblogs.com/1998Archer/p/15664974.html
Copyright © 2011-2022 走看看