用mui技术里相应的标签写的一个前端页面

最新推荐文章于 2020-10-21 15:49:45 发布

等风来盼风暖

最新推荐文章于 2020-10-21 15:49:45 发布

阅读量826

点赞数

分类专栏：前端的技术

本文链接：https://blog.csdn.net/qq_41905448/article/details/81663349

版权

前端的技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>我的页面</title>
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../../mui/css/mui.css">
<link rel="stylesheet"
   href="../../font-awesome-4.7.0/css/font-awesome.css">
<script src="../../assets/jquery-3.3.1.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<script src="../../mui/js/mui.js"></script>
<link rel="stylesheet"
   href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script
   src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet"
   href="http://libs.baidu.com/bootstrap3/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet"
   href="http://libs.baidu.com/bootstrap3/bootstrap3/css/bootstrap-theme.min.css">
<link rel="stylesheet"
   href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script
   src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="http://libs.baidu.com/bootstrap3/js/bootstrap.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<style>
.mui-btn {
   background-color: white;
   color: gray;
   border: 0px;
   /*    margin: 4px 2px; */
   font-size: 18px;
   /* padding: 16px 32px; */
   text-align: center;
   cursor: pointer;
   /*    text-decoration: none; */
   display: inline-block;
   transition-duration: 0.4s;
   margin-left: 0%;
   width: 100%;
}

.mui-btn :hover {
background-color: #e7e7e7;
}

.title {
   margin-top: 0px;
   text-decoration: none;
   text-align: left;
   font-color: white;
}

#p1 {
   position: absolute;
   width: 100%;
   height: 300px;
   z-indent: 0;
   margin-left: 5%;
   top: 20px;
   font-size: 14px;
}

#p2 {
   position: absolute;
   width: 100%;
   height: 300px;
   z-indent: 0;
   margin-left: 5%;
   top: 40px;
   font-size: 14px;
}

.mui-slider-group {
height: 300px;
width: 100%;
}

#a1 {
text-align: center;
}

#a2 {
text-align: center;
}

#a3 {
text-align: center;
}

.foot {
   font-size: 14px;
   width: 100%;
   height: 10px
}
</style>
<script type="text/javascript">
   mui(document.body).on('tap', '.mui-btn', function(e) {
       mui(this).button('loading');
       setTimeout(function() {
           mui(this).button('reset');
       }.bind(this), 2000);
   });
   function bigImg(x) {
       x.style.color = "yellow";
   }

function normalImg(x) {
x.style.color = "gray";

   }
   function bigImg1(x) {
       x.style.color = "yellow";
   }

function normalImg1(x) {
x.style.color = "gray";

   }
</script>
<body>
   <div style="height:710px;width:100%;">
       <div class="mui-slider" style="margin-top: -4px">
           <div class="mui-slider-group" style="width:100%;">
               <div class="mui-slider-item" style="height: 300px; width: 100%;">
                   <a href="#"><img style="height: 300px"
                       src="../../assets/img/1.jpg" /></a>
                   <div class="title"
                       style="position: absolute; width: 100%; height: 300px; z-indent: 2; left: 0%; top: 0px;">
                       <p>今日访客数：</p>
                       <p>总的访客数：</p>

                   </div>
                   <div class="title1"
                       style="position: absolute;    ;width: 100%; height: 300px; z-indent: 2; left: 40%; top: 200px; font-size: 14px;">
                       <p>杭州软件开发服务商潘先生</p>
                       <p id="p1">
                           <a>25</a>|<a>杭州java</a>
                       </p>
                       <p id="p2">红红火火</p>
                   </div>
               </div>
               <div class="mui-slider-item">
                   <a href="#"><img style="height: 300px"
                       src="../../assets/img/1.jpg" /></a>
               </div>
               <div class="mui-slider-item">
                   <a href="#"><img style="height: 300px"
                       src="../../assets/img/1.jpg" /></a>
               </div>
               <div class="mui-slider-indicator">
                   <div class="mui-indicator mui-active"></div>
                   <div class="mui-indicator"></div>
                   <div class="mui-indicator"></div>
               </div>
           </div>
           <div
               style="font-size: 10px; width: 100%; color: gray; margen-top: 40px; position: relative; left: -20px"
               class="mui-btn">
               <a id="a1" href="#" rel="external nofollow"
                   data-wid="tab-top-subpage-2.html"
                   style="width: 33.333%; text-align: center;" type="button"
                   data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn"
                   οnmοusemοve="bigImg(this)" οnmοuseοut="normalImg(this)">钱包</a> <a
                   href="../my/myorder.html" id="a2" rel="external nofollow"
                   style="width: 33.333%; text-align: center;"
                   data-wid="tab-top-subpage-2.html" type="button"
                   data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn"
                   οnmοusemοve="bigImg(this)" οnmοuseοut="normalImg(this)">我的订单</a> <a
                   id="a3" href="#" style="width: 33.333%; text-align: center;"href="../my/demand-management.html"
                   rel="external nofollow" data-wid="tab-top-subpage-2.html"
                   type="button" data-loading-icon="mui-spinner mui-spinner-custom"
                   class="mui-btn" οnmοusemοve="bigImg(this)"
                   οnmοuseοut="normalImg(this)">我的需求</a>
           </div>
       </div>
       <div class="mui-slider-group"
           style="font-size: 18px; color: gray; height: 400px;">
           <ul class="mui-table-view">
               <li class="mui-table-view-cell"><a href="#"
                   οnmοusemοve="bigImg1(this)" οnmοuseοut="normalImg1(this)">我的相册</a></li>
               <li class="mui-table-view-cell"><a href="#"
                   οnmοusemοve="bigImg1(this)" οnmοuseοut="normalImg1(this)">我的动态</a></li>
               <li class="mui-table-view-cell"><a href="#"
                   οnmοusemοve="bigImg1(this)" οnmοuseοut="normalImg1(this)">邀请奖励</a></li>
               <li class="mui-table-view-cell"><a href="#"
                   οnmοusemοve="bigImg1(this)" οnmοuseοut="normalImg1(this)">个人认证</a></li>
               <li class="mui-table-view-cell"><a href="#"
                   οnmοusemοve="bigImg1(this)" οnmοuseοut="normalImg1(this)">会员中心</a></li>
               <li class="mui-table-view-cell"><a href="#"
                   οnmοusemοve="bigImg1(this)" οnmοuseοut="normalImg1(this)">交易需知</a></li>
               <li class="mui-table-view-cell"><a href="#"
                   οnmοusemοve="bigImg1(this)" οnmοuseοut="normalImg1(this)">联系客服</a></li>
           </ul>
       </div>

</body>
<script src="../../mui/js/mui.js"></script>
<script type="text/javascript" charset="utf-8">
   mui('body').on('tap', 'a', function() {
       document.location.href = this.href;
   });
   document.getElementById("pop").addEventListener("tap", function() {
       //调用隐藏/显示弹出层
       mui("#popover").popover('toggle', document.getElementById("div"));
   })
</script>

</html>