要达到这样的效果:

<div class="menu">
<div class="menu-1">
<img alt="" src="img/ico_kh@3x.png"><br>
<span class="menuLabel">立即开户</span>
</div>
<div class="menu-1">
<img alt="" src="img/ico_sm@3x.png"><br>
<span class="menuLabel">扫码开户</span>
</div>
<div class="menu-1">
<img alt="" src="img/ico_yy@3x.png"><br>
<span class="menuLabel">预约开户</span>
</div>
<div class="menu-1">
<img alt="" src="img/ico_zd@3x.png"><br>
<span class="menuLabel">账单</span>
</div>
</div>

.menu{
height:100px;
width:100%;
text-align: center;
}

.menu-1{
float:left;
width:25%;
margin-top:20px;
}

.menu-1 img{
width:45px;

}

.menuLabel {
margin-top: 5px;
display: block;
font-size: 13px;
color: #000;
}

怎么快速写好看的手机menu菜单的更多相关文章

  1. android简洁饼状图组件、圆形Menu菜单、画板画笔应用、答题应用等源码

    Android精选源码 android自动监听复制内容源码 Android上简洁轻量级的饼图控件 好看的 Android 圆形 Menu 菜单效果 android画笔.画板功能效果的实现 Androi ...

  2. 安卓开发笔记——Menu菜单组件(选项菜单,上下文菜单,子菜单)

    菜单是用户界面中最常见的元素之一,使用非常频繁,在Android中,菜单被分为如下三种,选项菜单(OptionsMenu).上下文菜单(ContextMenu)和子菜单(SubMenu). 菜单的实现 ...

  3. IDEA最常用快捷键汇总+快速写出Main函数

    IDEA可以说是当下Java程序员日常开发的神器,但是想要发挥这款神器的牛逼威力,必须得熟练使用它的各种快捷键才行.本篇总结下使用IDEA(也就是IntelliJ IDEA )进行日常开发中最常用的快 ...

  4. Android开发中的menu菜单

    复写onCreateOptionsMenu方法,当点击menu菜单时,调用该方法. @Override public boolean onCreateOptionsMenu(Menu menu) { ...

  5. SharePoint 2013 激活标题字段外的Menu菜单

    前言 SharePoint 有个很特别的字段,就是标题(Title)字段,无论想要链接到项目,还是弹出操作项目的菜单,都是通过标题字段,一直以来需要的时候,都是通过将标题字段改名进行的. 其实,Sha ...

  6. Ecshop 后台增加一个左侧列表菜单menu菜单的方法

    Ecshop 后台增加一个左侧列表菜单menu菜单需要修改三个文件:/admin/includes/inc_menu.php/admin/includes/inc_priv.php/languages ...

  7. [转]ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  8. 后台增加一个左侧列表菜单menu菜单的方法

    Ecshop 后台增加一个左侧列表菜单menu菜单需要修改三个文件:/admin/includes/inc_menu.php/admin/includes/inc_priv.php/languages ...

  9. node-webkit教程<>Native UI API 之Menu(菜单)

    node-webkit教程(6)Native UI API 之Menu(菜单)1 前言... 2 6.1  Menu 概述... 3 6.2  menu api6 6.2.1  new Menu([o ...

随机推荐

  1. Nginx-rtmp之 ngx_rtmp_send.c 文件分析

    1. 简述 1.1 RTMP 消息类型 /* RTMP message types */ #define NGX_RTMP_MSG_CHUNK_SIZE 1 #define NGX_RTMP_MSG_ ...

  2. Why are C# structs immutable?

    Compiler Error CS1612 Cannot modify the return value of 'expression' because it is not a variable cl ...

  3. TP框架如何绑定参数。目的进行ajax验证

    TP框架的自动绑定 对于某些操作的情况(例如模型的写入和更新方法),可以支持参数的自动绑定,例如: 首先需要开启DB_BIND_PARAM配置参数: 'DB_BIND_PARAM' => tru ...

  4. ZT:我们身边大多数的事都是暂时性的

    1. 家庭放在首位. 2. 戒酒能有助于身体健康. 3. 经常跑步以及运动有益于身心健康. 4. 保证心胸开阔.让爱自动来到你的身边,而不需要你自己去拼命寻找. 5. 区分优秀的导师和老师.不断提升自 ...

  5. 转载:一文详解SQL解析与应用

    转载地址:http://www.elecfans.com/emb/20180618696111.html 数据库作为核心的基础组件,是需要重点保护的对象.任何一个线上的不慎操作,都有可能给数据库带来严 ...

  6. append和push和pop区别

    append()    操作的是DOM节点,在被选元素的结尾(内部结尾)插入指定内容: push()        向数组末尾插入一个或者多个元素,并且返回新的长度: pop()         删除 ...

  7. LC 245. Shortest Word Distance III 【lock, medium】

    Given a list of words and two words word1 and word2, return the shortest distance between these two ...

  8. Fiddler Wireshark 抓包

    使用 层次 Fiddler 简单 第七层应用层的 HTTP(S) 协议的包 Wireshark 复杂 第三层网络层的包 注意:Fiddler 只能抓到走系统代理的流量.不走系统代理的流量(比如浏览器选 ...

  9. Breadcrumb 面包屑

    显示当前页面的路径,快速返回之前的任意页面. 基础用法 适用广泛的基础用法. 在el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级.Element 提供了一 ...

  10. java源码-ReentrantLock源码分析-2

    继续上篇ReentrantLock分析如何唤醒线程: 当调用lock.unlock()方法最终调用AQS类中的release方法,开始释放锁 tryRelease(1)方法在Sync对象中实现,首先会 ...