手机端的帮助功能

Biegral 2020/4/19 4:11:41 987

手机端的帮助功能


       h5制作的app端经常会有一些功能用户不了解，需要通过

帮助页面提示引导用户进行操作。


       实现效果如图：




   实现代码：


     index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帮助文档</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_iwwlmmalrznkx1or.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_306555_7a99p45etlkrzfr.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        p {
            font-size: 14px;
            margin: 10px auto;
        }
        a{
            font-size: 14px;
            margin: 10px auto;
        }

        .back-icon {
            font-size: 20px;
            display: block;
            float: left;
            margin: 0px 10px;
            z-index: -1;
        }

        img{
            width: 100%;
        }

        .head{
            width: 100%;height: 40px;background: royalblue;text-align: center;font-size: 16px;color: #fff;padding-top: 15px
        }

        .content{
            width: 90%;text-align: left;margin-left: 5%;margin-top: 40px;
        }
    </style>
</head>
<body>
    <div class="head" >
        <span class="back-icon iconfont icon-xiaoyuhao" style="z-index: -1;"></span>
        帮助
    </div>
    <div class="content" >
        <p>1.账号问题</p>
        <p style="margin-left: 20px">1.1   账号或密码错误
            <a  href="helpHint1.html" style="margin-left: 20px" >查看详细</a>
        </p>
        <p style="margin-left: 20px">1.2   账号不存在
            <a  href="helpHint2.html" style="margin-left: 20px" >查看详细</a>
        </p>

        <p style="margin-left: 20px">1.3   添加其他家长
            <a  href="helpHint5.html" style="margin-left: 20px" >查看详细</a>
        </p>

        <p>2.苹果手机“安装”方法
            <a  href="helpHint3.html" style="margin-left: 20px" >查看详细</a>
        </p>

        <p>3.苹果手机“未信任”解决方案
            <a  href="helpHint4.html" style="margin-left: 20px" >查看详细</a>
        </p>


    </div>
</body>
</html>

helpHint1.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帮助文档</title>

    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_iwwlmmalrznkx1or.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_306555_7a99p45etlkrzfr.css">

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        p {
            font-size: 14px;
            margin: 10px auto;
        }
        a{
            font-size: 10px;
        }

        .back-icon {
            font-size: 20px;
            display: block;
            float: left;
            margin: 0px 10px;
            z-index: -1;
        }

        img{
            width: 100%;
            margin: 5px auto;
        }

        .head{
            width: 100%;height: 40px;background: royalblue;text-align: center;font-size: 16px;color: #fff;padding-top: 15px
        }

        .content{
            width: 90%;text-align: left;margin-left: 5%;margin-top: 40px;
        }
        .top{
            width: 90%;text-align: left;margin-left: 5%;margin-top: 40px;color: red;text-align: center;
        }

        .tag{
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="head" >
        <span class="back-icon iconfont icon-xiaoyuhao" style="z-index: -1;"></span>
        账号或密码错误帮助
    </div>

    <div class="top"><p style="text-align: left;font-size: 16px">账号或密码错误流程:忘记密码--->输入手机号--->验证码--->修改密码<p></div>

    <div class="content" >
        <p class="tag">1.账号或密码错误:</p>
        <img src="img/helpInit201.png"  />
        <p class="tag">2.点击忘记密码，并输入手机号，发送验证码:</p>

        <img src="img/helpInit202.png"  />
        <p class="tag">3.修改密码:</p>

        <img src="img/helpInit203.png"  />



    </div>

</body>
<script type="text/javascript">
    var back_icon=document.getElementsByClassName("back-icon")[0];
    back_icon.οnclick=function () {
        window.location.href="index.html";
    }

</script>
</html>

helpInit2.html:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帮助文档</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_iwwlmmalrznkx1or.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_306555_7a99p45etlkrzfr.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        p {
            font-size: 14px;
            margin: 10px auto;
        }
        a{
            font-size: 10px;
        }
        .back-icon {
            font-size: 20px;
            display: block;
            float: left;
            margin: 0px 10px;
            z-index: -1;
        }

        img{
            width: 100%;
            margin: 5px auto;
        }

        .head{
            width: 100%;height: 40px;background: royalblue;text-align: center;font-size: 16px;color: #fff;padding-top: 15px
        }

        .content{
            width: 90%;text-align: left;margin-left: 5%;margin-top: 40px;
        }
        .top{
            width: 90%;text-align: left;margin-left: 5%;margin-top: 40px;color: red;text-align: center;
        }

        .tag{
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="head"  >
        <span class="back-icon iconfont icon-xiaoyuhao" style="z-index: -1;"></span>
        账号不存在
    </div>

    <div class="top"><p style="text-align: left;font-size: 16px">账号不存在流程:父母登录--->个人中心--->成员管理--->添加家长--->输入信息<p></div>

    <div class="content" >
        <p class="tag">1.账号不存在:</p>
        <img src="img/accountIsNo.jpg"  />
        <p class="tag">2.父母登录,并进入个人中心:</p>

        <img src="img/helpInit101.png"  />
        <p class="tag">3.成员管理:</p>

        <img src="img/helpInit102.png"  />
        <p class="tag">4.添加家长:</p>

        <img src="img/helpInit103.png"  />
        <p class="tag">5.输入信息:</p>

        <img src="img/helpInit104.png"  />


    </div>


</body>
<script type="text/javascript">
    var back_icon=document.getElementsByClassName("back-icon")[0];
    back_icon.οnclick=function () {
        window.location.href="index.html";
    }

</script>
</html>


helpHint3.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帮助文档</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_iwwlmmalrznkx1or.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_306555_7a99p45etlkrzfr.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        p {
            font-size: 14px;
            margin: 10px auto;
        }
        a{
            font-size: 10px;
        }

        .back-icon {
            font-size: 20px;
            display: block;
            float: left;
            margin: 0px 10px;
            z-index: -1;
        }

        img{
            width: 100%;
            margin: 5px auto;
        }

        .head{
            width: 100%;height: 40px;background: royalblue;text-align: center;font-size: 16px;color: #fff;padding-top: 15px
        }

        .content{
            width: 90%;text-align: left;margin-left: 5%;margin-top: 40px;
        }

        .top{
            width: 90%;text-align: left;margin-left: 5%;margin-top: 40px;color: red;text-align: center;
        }

        .tag{
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="head"  >
        <span class="back-icon iconfont icon-xiaoyuhao" style="z-index: -1;"></span>
        苹果手机“安装”方法
    </div>

    <div class="top"><p style="text-align: left;font-size: 16px">苹果手机“安装”方法流程:扫描二维码（或用微信扫一扫）--->在浏览器打开--->下载--->桌面安装完成<p></div>


    <div class="content" >
        <p class="tag">1.扫描二维码（或用微信扫一扫）:</p>
        <img src="img/helpInit301.png"  />
        <p class="tag">2.在浏览器打开:</p>

        <img src="img/helpInit302.png"  />
        <br/>
        <img src="img/helpInit303.png"  />

        <p class="tag">3.下载:</p>
        <img src="img/helpInit304.png"  />
        <p class="tag">4.安装:</p>

        <img src="img/helpInit305.png"  />
        <p class="tag">5.桌面安装完成:</p>

        <img src="img/helpInit306.png"  />
        <br/>
    </div>

</body>
<script type="text/javascript">
    var back_icon=document.getElementsByClassName("back-icon")[0];
    back_icon.οnclick=function () {
        window.location.href="index.html";
    }

</script>
</html>


 helpInit4.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帮助文档</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_iwwlmmalrznkx1or.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_306555_7a99p45etlkrzfr.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        p {
            font-size: 14px;
            margin: 10px auto;
        }
        a{
            font-size: 10px;
        }

        .back-icon {
            font-size: 20px;
            display: block;
            float: left;
            margin: 0px 10px;
            z-index: -1;
        }

        img{
            width: 100%;
            margin: 5px auto;
        }

        .head{
            width: 100%;height: 40px;background: royalblue;text-align: center;font-size: 16px;color: #fff;padding-top: 15px
        }

        .content{
            width: 90%;text-align: left;margin-left: 5%;margin-top: 40px;
        }
        .top{
            width: 90%;text-align: left;margin-left: 5%;margin-top: 40px;color: red;text-align: center;
        }

        .tag{
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="head"  >
        <span class="back-icon iconfont icon-xiaoyuhao" style=""></span>
        苹果手机“未信任”解决方案
    </div>

    <div class="top"><p style="text-align: left;font-size: 16px">苹果手机“未信任”解决方案<p></div>


    <div class="content" >
        <p class="tag">1.苹果手机“未信任”:</p>
        <img src="img/helpInit401.png" />
        <p class="tag">2.进入设置:</p>

        <img src="img/helpInit402.png"  />
        <p class="tag">3.通用:</p>

        <img src="img/helpInit403.png"  />

        <p class="tag">4.设备管管理或描述文件（<span style="color: red">在监管选项上面</span>）:</p>
        <img src="img/helpInit404.png"  />
        <p class="tag">5.点击进入选择信任:</p>

        <img src="img/helpInit405.png" />
        <br/>
        <img src="img/helpInit406.png" />
        <br/>
        <img src="img/helpInit407.png"  />
        <br/>
    </div>

</body>
<script type="text/javascript">
    var back_icon=document.getElementsByClassName("back-icon")[0];
    back_icon.οnclick=function () {
        window.location.href="index.html";
    }

</script>
</html>


helpInit5.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帮助文档</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_iwwlmmalrznkx1or.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_306555_7a99p45etlkrzfr.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        p {
            font-size: 14px;
            margin: 10px auto;
        }
        a{
            font-size: 10px;
        }
        .back-icon {
            font-size: 20px;
            display: block;
            float: left;
            margin: 0px 10px;
            z-index: -1;
        }

        img{
            width: 100%;
            margin: 5px auto;
        }

        .head{
            width: 100%;height: 40px;background: royalblue;text-align: center;font-size: 16px;color: #fff;padding-top: 15px
        }

        .content{
            width: 90%;text-align: left;margin-left: 5%;margin-top: 40px;
        }
        .top{
            width: 90%;text-align: left;margin-left: 5%;margin-top: 40px;color: red;text-align: center;
        }

        .tag{
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="head"  >
        <span class="back-icon iconfont icon-xiaoyuhao" style="z-index: -1;"></span>
        添加其他家长
    </div>

    <div class="top"><p style="text-align: left;font-size: 16px">添加其他家长流程:父母登录--->个人中心--->成员管理--->添加家长--->输入信息<p></div>

    <div class="content" >
        <!--<p class="tag">1.账号不存在:</p>-->
        <!--<img src="img/accountIsNo.jpg"  />-->
        <p class="tag">1.父母登录,并进入个人中心:</p>

        <img src="img/helpInit101.png"  />
        <p class="tag">2.成员管理:</p>

        <img src="img/helpInit102.png"  />
        <p class="tag">3.添加家长:</p>

        <img src="img/helpInit103.png"  />
        <p class="tag">4.输入信息:</p>

        <img src="img/helpInit104.png"  />


    </div>


</body>
<script type="text/javascript">
    var back_icon=document.getElementsByClassName("back-icon")[0];
    back_icon.οnclick=function () {
        window.location.href="index.html";
    }

</script>
</html>





 

本文转载:CSDN博客

阅读排行

分类

归档