用border做一个移动端常见的返回按钮

第一步

.hs1{
        float: left;
        .mt(.25rem);
        .ml(.12rem);
        width: .3rem;
        height: .3rem;
        border-top: 2px solid #fff;  //关键
        border-left: 2px solid #fff;  //关键
        color: #fff;
    }

  

<a href="javascript:;" class="hs1"></a>

  效果如图

第二步:运用css3 tranform的rotateZ

.hs1{
        float: left;
        .mt(.25rem);
        .ml(.12rem);
        width: .3rem;
        height: .3rem;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        color: #fff;
        -webkit-transform: rotateZ(-45deg);
        -moz-transform: rotateZ(-45deg);
        -ms-transform: rotateZ(-45deg);
        -o-transform: rotateZ(-45deg);    //上面均是兼容写法
        transform: rotateZ(-45deg);
    }

  效果如图:

时间: 2024-10-11 10:56:33

用border做一个移动端常见的返回按钮的相关文章

要做一个移动端H5的网站有很多种方式

http://www.songtaste.com/user/11226245/infohttp://www.songtaste.com/user/11226250/infohttp://www.songtaste.com/user/11226270/infohttp://www.songtaste.com/user/11226281/infohttp://www.songtaste.com/user/11226300/infohttp://www.songtaste.com/user/11226

[Material Design] 教你做一个Material风格、动画的按钮

前段时间Android L 发布了,相信看过发布会了解过的朋友都为其中的 “Material Design” 感到由衷的惊艳吧!至少我是的. 在惊艳之余感到由衷的遗憾,因为其必须在 ”Android L“ 上才能使用,MD,郁闷啊. 之后便自己想弄一个点击动画试试,此念头一发不可收拾:干脆一不做二不休,就重写了一个 ”MaterialButton“ 控件出来. 在这里不讨论什么是 :“Material Design” . 在这里将给大家分享一下我自己弄的 “Material Design” 风格

[Material Design] 教你做一个Material风格、动画的按钮(MaterialButton)

前段时间Android L 发布了,相信看过发布会了解过的朋友都为其中的 "Material Design" 感到由衷的惊艳吧!至少我是的. 在惊艳之余感到由衷的遗憾,因为其必须在 "Android L" 上才能使用,MD,郁闷啊. 之后便自己想弄一个点击动画试试,此念头一发不可收拾:干脆一不做二不休,就重写了一个 "MaterialButton" 控件出来. 在这里不讨论什么是 :"Material Design" . 在这

uwp - 做一个相对炫酷的动画按钮/按钮动画

看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验.效果图: 动画分为几个部分,分别是:内圆从中心放大(1)并同时渐隐(2),外圆从中心放大(3)并同时渐隐(4),按钮整体从中心缩小放大(5),非常简单对吧,代码也是. 为了方便调用,我用一个自定义用户控件来做,图标是用iconfont,这样可以在任何地方使用,首先新建[AnimationButton.xaml]用户控件,前台代码将自动生成的部分替换: <UserControl.Resources>

Android Socket 聊天工具(一个服务端实现多个客户端间通信)

如果某位朋友也打算做这个Socket聊天工具,本人有个小小的建议,你可以不必太着急些代码,先想清楚自己最终要做到怎样效果,然后把自己的思路都写下来,有一个基本的实现方法.在写代码时就按照自己的思路一步一步地写下去,这样可以很好地避免写代码时由于思路不清左删右改. 以下是本人程序的设计思路 客户端设计思路: 一 用户登录界面 1 用一个EditText作为用户名输入口,用一个按键确定. 2 注册一个广播接收器,专门接收由后来的聊天界面发过来的消息广播(包括发信人,收信人,消息体). 3 创建一个客

用PyQt5和python3.6做一个最简单的GUI的程序

一般的程序都要有个GUI来实现人机交互的功能,今天我们来用PyQt来做一个最简单的程序 软件需求:python3.6 用的是Anaconda3.6(自带PyQt5,pip)    pycharm PyQt5    QtTools 环境安装和配置 由于Anaconda自带了PyQt5,不用再安装,但要用pip下载QtTools. pip install PyQt5-tools 如果装的不是Anaconda,可以在pycharm里查一下有没有装pyqt的模块,没有的话直接pip下载安装 pip in

python---》客户端与服务端的基础(做一个简单的客户端与服务端)

今天我们分享的内容是python简单的客户端与服务端,此处仅介绍一些简单的函数,并作出来一个玩儿玩儿. 在开始之前呢,先用一张图表示他们之间的关系 我们来按照这个步伐依次介绍: 服务端: import socketserver=socket.socket()#此处是为了创建出来一个服务端,第一步server.bind(('localhost',9999))#将套接字绑定到地址,loclhost是当地地址的的意思,如果要想查看当地地址的话,打开控制台(运行-->cmd) 按ipconfig即可查到

做一个懒COCOS2D-X程序猿(一)停止手打所有cpp文件到android.mk

前言:"懒"在这里当然不是贬义词,而是追求高效,拒绝重复劳动的代名词!做一个懒COCOS2D-X程序猿的系列文章将教会大家在工作中如何偷懒,文章篇幅大多较短,有的甚至只是几行代码,争取把懒发挥到极致! 一.懒人说书 Android.mk中LOCAL_SRC_FILES需要罗列出所有参与编译的文件,这样在.cpp文件少的时候还可以一个一个添加,当有几百个文件的时候会十分的痛苦! 我们下看看TestCpp工程中的Android.mk文件: 这只是节选的一部分,大概只有50个左右吧,除数量多

移动端常见的一些兼容性问题

1.安卓浏览器看背景图片,有些设备会模糊. 是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960*640分辨率,在网页里只显示了480*320,这样devicePixelRatio=2.现在android比较乱,有1.5的,有2的也有3的. 想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍).例如一个div的宽高是100*100,背景图必须得200*200,然后back