任务要求：
写⼀个简易的QQ邮箱登录⻚⾯（这个简易是个什么程度⾃⼰看着来），要⽤上JavaScript
首先我们先看看网页前端开发需要用到什么
- HTML
- CSS
- JavaScript
其实前两天双十一我买了本书 《从0到1HTML+CSS+JavaScript》 这本书真心不错，至少这周的学习任务这本书对我帮助很大。
先看看QQ邮箱登录页面长什么样？
目标.png
有些难点，登录页面应该分成四个部分，顶部一排，中间的文字和表单，最后下方的一排超链接.......
顶部和底部我就先不写了，之后补充。
但是任务目标摆在那里，我仍是技术有限就决定分几步写这个网页
第一步写出登录的表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QQ Eamil</title>
<style type="text/css"></style>
</head>
<body>
<span class="login">微信登录</span>
<span class="pas">QQ登录</span>
<input type="text" placeholder="支持QQ号/邮箱/手机号登录"/><br />
<input type="text" placeholder="QQ密码" /><br/>
<input type="checkbox" "/>
<span ="tnext">下次自动登录</span></br>
<input type="button" value="登 录" >
<span>忘了密码？</span>
<span>注册新账户</span>
</body>
</html>
表单预览结果如下：
image.png
制作表单时使用指令
- <meta charset="utf-8" />编程系统自动输出的，但是必须要有，不然就是一堆乱码。
- placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
- value属性其实可以做到和placeholder属性相似的操作但是value属性显示的预填文本是无法在输入字后自动消失的故使用placeholder
........与目标差距较大，下一步写左侧文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>QQ邮箱，常联系！</h1>
<p>1987年9月14日21时07分</p>
<p>中国第一封电子邮件</p>
<p>从北京发往德国</p>
<p>“越过长城，走向世界”</p>
</body>
</html>
没什么好说的，但是这个效果还是不行，，，
image.png
下一步就是通过页面布局把左右侧分开，让网页初步成型。
- 在网上参阅一些材料后，前人的经验告诉我们，可以用CSS语法来写这个分页和修饰
使用函数如下 - <style type="text/css">，调用css进行修饰所必须的，放在head里面1
- Border 在一个声明中声明所有文字的格式
- padding函数定义内边距
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top，padding-right，padding-bottom，padding-left
- float 规定框是否应该浮动
最后成型的代码
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>登录qq邮箱</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
font-size:12px;
}
.content{
width:1100px;
height:500px;
margin:auto;
margin-top:80px;
}
.content .text{
float:left;
margin-top:40px;
margin-left:70px;
line-height: 200%;
}
.content .text h1{
color:#1d5494;
margin-bottom:20px;
}
.content .text p{
font-size:13px;
} .content .pic{
float:left;
margin-top:25px;
margin-right:60px;
}
.content .login{
float:left;
width:350px;
height:400px;
border:1px solid #1d5494;
}
.content .login .sidebar{
border-bottom:1px solid #1d5494;
height:50px;
line-height: 50px;
}
.content .login ul li{
list-style-type: none;
display:block;
height:50px;
font-size:16px;
font-family: "微软雅黑";
color:gray;
}
.content .login ul .tab1{
float:left;
margin-left:45px;
cursor: pointer;
}
.content .login ul .tab2{
float:right;
margin-right:45px;
cursor: pointer;
}
.content .login .acount{
margin-top:40px;
margin-left:27px;
width:280px;
height:35px;
font-family: "微软雅黑";
}
.content .login .password{
margin-top:15px;
margin-left:27px;
width:280px;
height:35px;
font-family: "微软雅黑";
}
.content .login .checkbox{
float:left;
margin-top:30px;
margin-left:30px;
width:20px;
height:20px;
border:1px solid black;
background:white;
}
.content .login p{
margin-top:30px;
float:left;
}
.content .login .submit{
margin-left:27px;
margin-top:10px;
width:280px;
height:40px;
background:cornflowerblue;
border:1px solid cornflowerblue;
font-size:16px;
color:white;
font-family:"微软雅黑";
cursor: pointer;
}
.content .login .code{
margin-top:10px;
margin-left:130px;
color:#1d5494;
cursor: pointer;
font-size:13px;
}
.content .login .forget{
float:left;
margin-top:80px;
margin-left:30px;
}
.content .login .new{
float:right;
margin-top:80px;
margin-right:30px;
}
.content .login a{
color:#1d5494;
text-decoration: none;
}
.content .login a:hover{
text-decoration: underline;
} </style>
<body>
<div class="content">
<div class="text">
<h1>QQ邮箱，常联系！</h1>
<p>1987年9月14日21时07分</p>
<p>中国第一封电子邮件</p>
<p>从北京发往德国</p>
<p>“越过长城，走向世界”</p>
<img src="C:\Users\888888\Desktop\1.png">
</div>
<div class="pic">
</div>
<div class="login">
<ul class="sidebar">
<li class="tab1">微信登录</li>
<li class="tab2">QQ登陆</li>
</ul>
<input type="text" value="支持QQ号/邮箱/手机号登录" class="acount" /><br>
<input type="password" placeholder=" QQ密码" class="password" /><br>
<input type="checkbox" class="checkbox" />
<p>下次自动登录</p><br>
<input type="submit" value="登 录" class="submit">
<nav>
<a href="#" class="forget">忘了密码？</a>
<a href="#" class="new">注册新账号</a>
</nav>
</div>
</div>
</body>
</html>
QQ截图20201117002401.png
还是有很多问题比如页眉页脚完全没有，图片的位置也错了。但是终于完工了。
