git-移动端开发使用

基本问题

适配问题
使用百分比布局（也叫流式布局），还需对移动端的viewport视口进行设置。
视觉窗口：viewport，是移动端特有。这是一个虚拟的区域，承载网页的。
承载关系：浏览器→viewport→网页。

适配方案（标准）
网页宽度必须和浏览器保存一致。
默认显示的缩放比例和PC端保存。
不允许用户自行缩放网页。

自动放缩：

<!--网页自适应大小-->
        <meta name="viewport" content="width=device,initial-scale=1,user_scalable=no">

页面跳转：

<meta http-equiv="refresh" content="3;index.html">

html:

<html>
   <head>
        <meta charset="utf-8"> 
        <!--网页自适应大小-->
        <meta name="viewport" content="width=device,initial-scale=1,user_scalable=no">
        <link rel="stylesheet" type="text/css" href="css/css03.css">
        <!-- <meta http-equiv="refresh" content="3;index.html"> -->
       <script src="js/css03.js">
        </script>
    </head>
<body>
<div class="container">
    <h1 class="h1">掌上办公</h1>
    <form action="index.html" onsubmit="return checkAll();">
    <div class="login">
        <p>账号：<input type="text" placeholder="请在这里输入" class="input1" id="zhanghao"></p><br>
        <p>密码：<input type="password"  class="input1" id="mm"></p>
    </div>
    <div class="btn">
            <!-- <a href="index.html" style="text-decoration: none;"  class="button button4">登录</a> -->
            <input type="submit" value="登录" class="button button4"> 
     
    </div>
    <div class="copyright">
        版权说明&copy;<br>最终解释权为加中教育培训公司所有
    </div>
    </form>
</div>
</body>
</html>

<html>
   <head>
        <meta charset="utf-8"> 
       
    </head>
<body>
  <div  align="center">
  <img src="img/ok.jpg">
  <div>
  <div style="border:0px solid red;width:80px;height:30px;background-color: aqua; text-align: center;"><a href="css03.html" style="text-decoration: none;">返回</a></div>

</body>
</html>

js:


function checkAll()
{
    // alert("ok");
    var zh=document.getElementById("zhanghao").value;
    if(zh=="")
    {
        alert("账号不能为空！");
        return false;
    }
    var mm=document.getElementById("mm").value;
    if(mm=='')
    {
        alert("密码不能为空！");
        return false;
    }
    if(mm!='123456')
    {
        alert("账号密码不正确！");
        return false;
    }
}

css:

*{
    margin:0;
    padding:0;
}
.container{
    border:1px solid red;
    width:375px;
    height:667px;
    background-color: skyblue;
    margin: auto;
}
.h1
{
    border:0px solid red;
    width:375px;
    margin-top: 80px;  
    text-align: center;
    letter-spacing: 10px;
    text-shadow: 5px 5px 5px #666666;
  

}
p{
    font-size:18px;
}
.login{
    border:0px solid red;
    width:260px;
    margin-top: 90px;
    margin-left: 50px;
    
}
.input1{
    border-radius: 5px;
    width:240px;
    height: 37px;
}
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button4 {
    border-radius: 12px;
    width:240px;
    height: 43px;
}
.btn{
    border:0px solid red;
    width:130px;
    margin-top: 30px;
    margin-left: 48px;
}
.copyright
{
    border:0px solid red;
    width:300px;
    height: 60px;
    font-size: 16px;
    margin-left: 50px;
    margin-top:150px;
}

一般出现的问题

云编译报错原因：
a.config中的配置文件是否为正确的id
b.git的用户名，密码是否正确
c.修改数据后是否提交git
安装后打开未出现显示界面:
原因：查看主页名称是否正确
克隆和上传的问题
控制面板中：凭据管理器：

git-移动端开发使用

基本问题

猜你喜欢