MUI实现引导页

快来打我* 2024-04-17 16:02 29阅读 0赞

# 引言 #

一个有点模样的APP在用户第一次打开时总得显示一些欢迎语之类的东西吧，嗯嗯，那就是我们平时所说的引导页了，在引导页上我们可以展示APP最新的功能，也可以介绍公司信息，如果需要的话还可以放一些推广信息。

**实现效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70][]

**案例源码**

<!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">
    		<link rel="stylesheet" href="css/mui.min.css">
    		<style>
    			#one {
    				width: 100%;
    				height: 100%;
    				background: #5cb85c;
    			}
    			#two {
    				width: 100%;
    				height: 100%;
    				background: #5bc0de;
    			}
    			#three {
    				width: 100%;
    				height: 100%;
    				background: #f0ad4e;
    
    			}
    			#four {
    				width: 100%;
    				height: 100%;
    				background: #d9534f;
    			}
    			.mui-slider-item{
    				text-align: center;
    			}
    			#start{
    				position: relative;
    				top: -6.25rem;
    				border: white 1px solid;
    				color: white;
    				padding-bottom: 8px;
    				padding-top: 8px;
    				padding-left: 20px;
    				padding-right: 20px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
    			<div class="mui-slider-group">
    				
    				<div class="mui-slider-item">
    					<div id="one"></div>
    				</div>
    				
    				<div class="mui-slider-item">
    					<div id="two">
    
    					</div>
    				</div>
    				
    				<div class="mui-slider-item">
    					<div id="three"></div>
    				</div>
    				
    				<div class="mui-slider-item">
    					<div id="four"></div>
    					<span id="start">立即体验</span>
    				</div>
    			</div>
    			<div class="mui-slider-indicator">
    				<div class="mui-indicator mui-active"></div>
    				<div class="mui-indicator"></div>
    				<div class="mui-indicator"></div>
    				<div class="mui-indicator"></div>
    			</div>
    		</div>
    		<script src="js/mui.min.js"></script>
    	</body>
    </html>

GitHub：

> [https://github.com/lwqbrell/boot\_page][https_github.com_lwqbrell_boot_page]

百度云下载链接：

> 链接：[https://pan.baidu.com/s/1FZry4q0eb\_PsxjX-C6NmIA ][https_pan.baidu.com_s_1FZry4q0eb_PsxjX-C6NmIA]  
> 提取码：h44a

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c9f199cb9af64df79cdc2926fb300632.png
[https_github.com_lwqbrell_boot_page]: https://github.com/lwqbrell/boot_page
[https_pan.baidu.com_s_1FZry4q0eb_PsxjX-C6NmIA]: https://pan.baidu.com/s/1FZry4q0eb_PsxjX-C6NmIA%C2%A0