mui模仿一个简单的app tab界面效果代码
代码语言：html
所属分类：选项卡
代码描述：mui模仿一个简单的app tab界面效果代码，实现了首页、消息页面、我的页面、通讯录页面，采用单一dom模式
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mui.min.css">
<style>
.title {
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
}
.oa-contact-cell.mui-table .mui-table-cell {
padding: 11px 0;
vertical-align: middle;
}
.oa-contact-cell {
position: relative;
margin: -11px 0;
}
.oa-contact-avatar {
width: 75px;
}
.oa-contact-avatar img {
border-radius: 50%;
}
.oa-contact-content {
width: 100%;
}
.oa-contact-name {
margin-right: 20px;
}
.oa-contact-name, oa-contact-position {
float: left;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">XXX</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<div class="mui-content">
<div id="tabbar" class="mui-control-content mui-active">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90">
<p class="mui-slider-title">
静静看这世界
</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90">
<p class="mui-slider-title">
幸福就是可以一起睡觉
</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90">
<p class="mui-slider-title">
想要一间这样的木屋，静静的喝咖啡
</p>
</a>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">
Home
</div>
</a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">
Email
</div>
</a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">
Chat
</div>
</a></li>
</ul>
</div>
<div class="mui-content" style="background-color:#fff">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90">
<div class="mui-media-body">
幸福就是可以一起睡觉
</div>
</a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90">
<div class="mui-media-body">
想要一间这样的木屋，静静的喝咖啡
</div>
</a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#"><img class="mui-media-object" src="//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90">
<div class="mui-media-body">
Color of SIP CBD
</div>
</a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90">
<div class="mui-media-body">
静静看这世界
</div>
</a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#"><img class="mui-media-object" src="//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90">
<div class="mui-media-body">
Color of SIP CBD
</div>
</a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90">
<div class="mui-media-body">
静静看这世界
</div>
</a></li>
</ul>
</div>
</div>
<div id="tabbar-with-chat" class="mui-control-content">
<div class="title">
消息列表
</div>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 1</a></li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 2</a></li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 3</a></li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 4</a></li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 5</a></li>
<li cl.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0