基本问题
适配问题
使用百分比布局(也叫流式布局),还需对移动端的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">
版权说明©<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 - 安装后打开未出现显示界面:
原因:查看主页名称是否正确 - 克隆和上传的问题
控制面板中:凭据管理器: