1 课程名称 : javascript交互
课程章节:轮播图上的按钮样式
2课程内容:
添加上一张和下一张的按钮键
写入按钮容器 上一张和下一张的按钮键
<a href="javascript:viod(0) class="button prev"<a>
<a href="javascript:viod(0) class="button next"<a>
在超链接写入 javascript:viod(0) = 不需要用到超链接

去设置css, button样式
因为要显示在图片上,我们也要将它绝对定位
position:absolute

它button相对与main所以main也要相对定位
position:relative

然后回到按钮键继续写入 宽度 高度 左边距 顶部等
width 40px
height 80px
left 244px
top 50%
margin-top:-40px
为什么设置 -40,因为我们的button高度设置了80px
最好的方法就是,边距高度设置参数是height的一半,所以是-40

看看效果

出现了,然后我们在添加一个在右面
左边设置自适应,右边为0

效果:

然后我用左右方向键替换掉它的背景
在button的background插入图片
不重复性,垂直跟左右都是居中

零一个设置翻转180度

效果:

鼠标停留在button键需要有一个半透明的背景
所以添加button:hover //浮动

设置颜色,半透明度,其他浏览器兼容的透明度
效果:

三:本节都是些基本功,跟着学习就完事了,简单O(∩_∩)O
随时随地看视频