为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第8天 javascript(轮播图上的按钮样式)

1.课程名称 :javascript 轮播图


课程章节:轮播图上的按钮样式


2.课程内容:

    添加按钮,和css部分

    

    首先添加圆点导航容器

    添加span class=dots

    https://img1.sycdn.imooc.com//631ee033000183dc11010643.jpg

    css写入dots主容器样式

    dots 也需要绝对定位的

     https://img1.sycdn.imooc.com//631ee1ea000137e610110498.jpg

     right0  底部24px  text-align,靠右对齐

     

    设置主容器的 dots.span

    水平显示在一条线

    宽度高度12px

    线高度12px

    border-radius :50% 变成圆型

    圆型的背景颜色和阴影颜色

    

: ():()

    margin-right

    右边距16

    https://img1.sycdn.imooc.com//631ee28900015a7f12650613.jpg

    效果

    https://img1.sycdn.imooc.com//631ee3a40001f27501750205.jpg

    圆点导航对应正在显示的图片时,需要它是白色底灰边框

    https://img1.sycdn.imooc.com//631ee41600019bf408150423.jpg

    设置阴影部分

    背景颜色白色

    

    效果:

    https://img1.sycdn.imooc.com//631ee45500010a0216130765.jpg

    三,本章重点,需要多跟着老师练习就可以了,都是一些样式代码O(∩_∩)O




点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消