实现轮播图效果(结构样式代码)

轮播图实现方法:

首先先写出基础结构与样式:
设计方法:利用盒子的定位来实现,首先一个大盒子放两个小的小盒子当做转换图片的按钮,一个左边点位,一个右边定位,分别都设成top:50%,但是他们本身又有高度,所以想实现居中效果还要向上再移动自身高度的一半就可以实现居中的效果啦;对于圆角边框的设计,左边的边框就改变他的右上和右下角的圆角,改成多少呢?改成高度的一半这样就能实现是一个蛮好看的圆角,那么右边同理设置他的左边圆角即可。当然你也可以不设置圆角,看自己的需求。第二步骤就是设计下面的一个个能转换图片的点,这个点怎么设计呢?用ul包裹li即可,给ul设置背景高度圆角等,给li设置左浮动,对齐,间距背景等!
话不多说:上代码。。。。。
效果图:
在这里插入图片描述

代码如下:
样式:

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
            color: white;
        }
        
        ul {
            list-style: none;
        }
                                               //  以上为初始化
        
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值