继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

土星猪
关注TA
已关注
手记 76
粉丝 5
获赞 0

1 课程名称 : javascript交互


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


2课程内容:

        添加上一张和下一张的按钮键

    

写入按钮容器 上一张和下一张的按钮键

<a href="javascript:viod(0) class="button prev"<a>

<a href="javascript:viod(0) class="button next"<a>

在超链接写入 javascript:viod(0) = 不需要用到超链接

http://img2.mukewang.com/631dac1b00019d8012790847.jpg


去设置css, button样式

因为要显示在图片上,我们也要将它绝对定位

position:absolute

http://img1.mukewang.com/631db14b0001468210300346.jpg

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

position:relative

http://img4.mukewang.com/631db21e00011de311530744.jpg


然后回到按钮键继续写入 宽度 高度 左边距 顶部等

width 40px

height 80px

left 244px

top 50%

margin-top:-40px

为什么设置 -40,因为我们的button高度设置了80px

最好的方法就是,边距高度设置参数是height的一半,所以是-40

http://img3.mukewang.com/631db4dd0001c13909990195.jpg

看看效果

http://img1.mukewang.com/631db5ea000132f110920564.jpg

出现了,然后我们在添加一个在右面

左边设置自适应,右边为0

http://img4.mukewang.com/631db7eb00012f4211500356.jpg

效果:

http://img3.mukewang.com/631db8210001ed9e12630687.jpg

然后我用左右方向键替换掉它的背景

在button的background插入图片

不重复性,垂直跟左右都是居中

http://img2.mukewang.com/631dba3f0001594711030749.jpg

零一个设置翻转180度

http://img1.mukewang.com/631dba860001950e12750459.jpg

效果:

http://img.mukewang.com/631dbaaf00018dd213160662.jpg

鼠标停留在button键需要有一个半透明的背景

所以添加button:hover //浮动

http://img3.mukewang.com/631dbb3d00011df209510573.jpg

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

效果:

http://img3.mukewang.com/631dbb6e0001f54915940745.jpg

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





打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP