webApp 使用mui 仿支付宝主页面案例（静态页面）

最新推荐文章于 2024-05-12 06:18:50 发布
最新推荐文章于 2024-05-12 06:18:50 发布
阅读量5.3k 收藏 28
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunshine_0707/article/details/84061825
版权

效果：

 

 

 

源码：

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
              <title></title>
              <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
              <!--引入mui的样式文件-->
              <link href="css/mui.min.css" rel="stylesheet" />
              <!--引入mui的js文件-->
              <script src="js/mui.min.js"></script>
             <!--引入支付宝图标的样式文件-->
              <link rel="stylesheet" href="css/iconfont.css">
             <!--自定义的样式文件-->
              <link rel="stylesheet" href="css/home.css">
              <script type="text/javascript">
                  mui.init()
              </script>
          </head>

          <body style="background-color:#f5f5f5">

            <!--mui的标题栏-->
              <header class="mui-bar mui-bar-nav icon_serch ">
                 <!--搜索图标-->
                  <div class="mui-input-row mui-search">
                      <input type="search" class="mui-input-speech mui-input-clear" placeholder="手机充值">
                  </div>
               <!--添加图标-->
                  <a href="#popover" class="icon_add" id="add">
                      <span class="icon iconfont icon-tianjia"></span>
                  </a>
                  <!--社交图标-->
                  <a href="#" class="icon_contact">
                      <span class="icon iconfont icon-shejiao"></span>
                  </a>
             </header>

               <!--点击添加图标，出来的mui弹出框(这里的id和添加图标的超链接的连接地址一样，就是使用锚点的方式)-->
              <div id="popover" class="mui-popover add_popover">
                  <ul class="mui-table-view">
                      <li class="mui-table-view-cell">
                          <a href="#"><span class="icon iconfont icon-tianjialeimu"></span>&nbsp;&nbsp;发起群聊</a>
                      </li>
                      <li class="mui-table-view-cell">
                          <a href="#"><span class="icon iconfont icon-tianjia"></span>&nbsp;&nbsp;添加朋友</a>
                      </li>
                      <li class="mui-table-view-cell">
                          <a href="#" id="saoyisao1"><span class="icon iconfont icon-saoyisao"></span>&nbsp;&nbsp;扫一扫</a>
                      </li>
                      <li class="mui-table-view-cell">
                          <a href="#"><span class="icon iconfont icon-fukuanma"></span>&nbsp;&nbsp;收钱</a>
                      </li>
                  </ul>
              </div>

             <!--这里使用的是mui的栅格UI组件 mui-col-sm-3 mui-col-xs-3（栅格组件一行分为12列，现在设置的是在小屏幕和超小屏幕上每列占3格，就是一列可以放4个，下面从转账到天猫宝使用的都是栅格组件）-->
              <div class="mui-content ">
                  <div class="mui-row grid_background" style="list-style: none;">
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-saoyisao myicon"></span>  //这里使用的是支付宝的图标样式
                                  <span class="wenzi">扫一扫</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-fukuanma myicon"></span>
                                  <span class="wenzi">付款</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_sty
最低0.47元/天 解锁文章
sunshine_0707
关注
  • 0
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
Spring Boot入门(18)：使用Spring Boot快速实现静态资源映射，完美展示前端页面！
**My Coding Family**
04-29 5203
Spring Boot如何设置静态资源映射，一文带你搞定。
使用H5搭建webapp主页面
点击置顶文章查看博客目录（全站式导航）
09-26 1万+
WebApp之初体验（一） Meta标签中的ViewPort属性：ViewPort是承载代码层的一个View视图，而手机浏览器看到网页是承载ViewPort视图。因此，手机看到的层级关系，从上到下：代码View视图->ViewPort视图->浏览器视图。 所以我们只需要修改ViewPort这一层的属性，比如缩放等，即可对手机进行响应式布局，即安卓的自适应布局。 实现的效果图：
移动开发最新跨平台移动APP开发进阶(一)：mui开发注意事项_mui移动开发(1)，2024年最新腾讯安卓面试
最新发布
2401_84545497的博客
05-12 637
感觉现在好多人都在说什么安卓快凉了，工作越来越难找了。又是说什么程序员中年危机啥的，为啥我这年近30的老农根本没有这种感觉，反倒觉得那些贩卖焦虑的都是瞎j8扯谈。当然，职业危机意识确实是要有的，但根本没到那种草木皆兵的地步好吗？Android凉了都是弱者的借口和说辞。虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。
webApp 使用mui.js 物理返回键监听
时光的博客
07-10 2028
在上一篇中在vue_cli里使用了mui 在这里就使用mui实现物理返回键监听this.fanhui(){    this.mui.init({          KeyEventBind:{            backbutton:true;  // 关闭back按键        } })        if('Android' == plus.os.name){             ...
Tomcat部署静态页面的方式
热门推荐
勿忘初心的博客
03-19 2万+
注：这里的操作是建立在java和tomcat已安装好并且已经配置好环境变量的情况下方式一：直接把静态项目复制到Tomcat安装目录的webapps目录中。例如：我们新建一个test文件夹，在文件夹里新建一个test.html文件，然后将整个test文件夹复制到Tomcat安装目录的webapps目录中，启动tomcat后在浏览器输入ip:port/test/test.html即可访问了。方式二：在...
JavaWeb(14) 页面静态化之使用freemarker模板生成一个html静态页面
郑清
10-29 6281
题外话： 页面静态化(展示数据从JSP页面变成HTML页面)实现方式-->模板技术 从本质上来讲，模板技术是一个占位符动态替换技术。一个完整的模板技术需要四个元素：①模板语言(使用的语法) ②包含模板语言的模板文件(.ftl结尾) ③模板引擎(jar包)④拥有动态数据的数据对象 FreeMarker是一款模板引擎：即一种基于模板和要改变的数据，并用来...
HBuilder实现WebApp,总结MUI使用过程中的坑和方法
yijiupingfan0914的博客
06-27 1773
MUI尝过的坑和重要知识点总结1：自带的各种标签的 样式权重过高，重写不方便（和BootStrap比较来说，BootStrap更加灵活）2：链接跳转。常规的a标签 加href是无法跳转的，浏览器有效，但是在手机上运行是无效的 需要添加mui的定义的点击事件。分两种 (1)：页面已存在的跳转标签 &lt;script&gt; document.getElementById...
mui解决跳转到页面返回不刷新问题
qq_294446993的博客
09-23 5208
废话不多说直接附上地址 http://ask.dcloud.net.cn/article/617
vue 打包html静态页面,vue项目打包、vue项目打包后空白界面解决办法
weixin_28689507的博客
06-04 2414
Vue脚手架提供了一个命令npm run build进行打包项目，在package.json中有一个build属性，对应执行命令node build/build.js。执行成功后，项目目录下多了一个dist目录，dist目录下有static目录和页面index.html。static目录下有css、fonts、js文件。但是这样直接打包后会出现空白界面问题，因此在打包之前需要修改配置文件再打包。空...
SpringMVC访问静态页面
贺兰山缺的博客
10-19 6210
Spring MVC显示静态页面在前面搭建Spring MVC环境时，我们设置了spring-mvc配置，通过tomcat来访问了index.jsp 页面，但是当我将页面换成.thml的静态面之后就发现始终是404错误： 为什么会有这样的错误呢？ 如果在spring-mvc.xml中DispatcherServlet拦截”/”，为了实现REST风格，拦截了所有的请求，那么同时对.html,.
Vue2.0仿饿了么webapp单页面应用详细步骤
01-19
部分截图 安装&&运行： 1、安装 node：http://nodejs.cn/download/ ...2、从我的仓库克隆代码： ...3、安装vue脚手架工具vue-cli: $npm install vue-cli -g 4、进入代码根目录安装依赖： ...发布完代码
webapp前端UI框架之MUI使用教程.zip
01-14
webapp前端UI框架之MUI使用教程.zip
高仿网易云页面WebApp
06-08
这是一个用VUEJS写的高仿网易云音乐的webapp 技术栈 传说中的VUE全家桶(vue vue-router vuex) axios Muse-UI（一个基于Vue2.x的material design风格UI框架）
SSM项目的静态页面
12-07
9. **版本控制**：在开发过程中，使用版本控制系统（如Git）对静态页面进行版本管理，方便团队协作和代码回溯。 10. **前端框架与库**：为了提高开发效率和增强页面功能，开发者可能引入前端框架（如Bootstrap、Vue...
静态页面实现 include 引入公用代码的示例
12-11
然而，当面临纯静态页面的场景，如HBuilder打包成WebAPP的情况，PHP的`include`就不再适用了。为了解决这个问题，我们可以利用构建工具，如Gulp，来实现静态页面的`include`功能。 Gulp是一个基于Node.js的自动化...
vue-router实现webApp切换页面动画效果代码
08-30
本篇文章主要介绍了使用 Vue Router 实现 webApp 页面切换动画效果的实例代码。下面将详细介绍实现该动画效果的知识点。 一、为什么需要实现页面切换动画效果 在 webApp 中，页面之间的切换是非常常见的操作。为了...
jar java生成静态页面工具
08-21
从数据库取出数据直接生成静态页 /* * ToHtml.java * author : stone * 动态生成静态插件V1.0 * 返回0 表示生成成功 * 返回-1表示生成失败 * savePath 就是tomcat中的webapp文件夹所在的目录 */ 调用例子： ...
基于MUI的电影新闻WEBAPP项目源码
08-21
本项目是基于MUI的一个实际项目，调用知乎新闻和豆瓣电影API，可以阅读新闻、查看目前在映电影信息和影评，还可以在线播放预告片。同时附上整个项目的开发详细步骤，希望对大家学习WEBAPP开发有帮助
springmvc 静态页面
05-17
在 Spring MVC 中，可以通过以下步骤来实现静态页面的访问： 1. 在 Spring MVC 的配置文件中添加以下配置： ``` <mvc:resources mapping="/static/**" location="/static/" /> ``` 这里把“/static/”目录映射到了“/static/**”路径上，表示所有以“/static/”开头的请求都会被映射到“/static/”目录下的文件。 2. 在 webapp 目录下创建一个 static 目录，并将静态页面放入该目录下。 例如，我们在 static 目录下创建一个名为 index.html 的静态页面。 3. 在控制器中添加一个方法，用于处理静态页面的访问请求。 ``` @RequestMapping(value = "/", method = RequestMethod.GET) public String index() { return "redirect:/static/index.html"; } ``` 这里的 @RequestMapping 注解表示将请求路径“/”映射到该方法上，返回值“redirect:/static/index.html”表示重定向到“/static/index.html”页面。 4. 启动应用程序，访问“http://localhost:8080/”即可看到静态页面。 注意，如果你使用的是 Spring Boot，可以直接将静态页面放入“/resources/static/”目录下，Spring Boot 会自动将该目录下的静态资源映射到根路径下。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值