MUI实现引导页
引言
一個有點模樣的APP在用戶第一次打開時總得顯示一些歡迎語之類的東西吧,嗯嗯,那就是我們平時所說的引導頁了,在引導頁上我們可以展示APP最新的功能,也可以介紹公司信息,如果需要的話還可以放一些推廣信息。
?
實現效果
案例源碼
<!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://pan.baidu.com/s/1FZry4q0eb_PsxjX-C6NmIA?
提取碼:h44a?
總結
- 上一篇: 白底黑字!Android浅色状态栏黑色字
- 下一篇: 执行ipconfig -renew命令时