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