[用CSS3写的模仿iPhone中的返回按钮] ppt中返回按钮怎么做

好像写这个有点晚了,iOS已经从拟物化的年代进化到了扁平化的年代,那些圆角+渐变+阴影的年代已经过去,不过在此仍然要去说下古老的iOS返回按钮。

在过去的年代,大家都以iOS的设计元素为自己移动版页面的设计元素;当中自然少不了经典的返回按钮,看着似乎非常简单的一个返回按钮,但是就是没有啥办法能用代码写出来似的,那个讨厌的三角箭头只能让前端工程师无奈的使用一张图片来拼接(如淘宝、天猫、百度、美团都是图片处理方式);或者就根本不用那个按钮(如Yahoo、Google、Facebook根本就不用);当然我也相信已经有大牛有很好的处理方案,只是不像我这样出来得瑟罢了。

好了,不多说那些无用的,来说说我的解决方案:

先看看设计稿(呵呵,就拿我们公司的来说了)



用CSS3写的模仿iPhone中的返回按钮1



1、确定HTML的结构,用一个标签加伪类其实是不行的,所以我用了两个嵌套的标签

<a href="#"> <span>首页</span></a>

2、首先想到的是右边一个标准Button,这个比较秒杀吧,所以不多说了,上图和代码

用CSS3写的模仿iPhone中的返回按钮2

CSS Code复制内容到剪贴板