制作简易QQ邮箱登录页面
2020-11-18 本文已影响0人
和为人是为忍
10.png
虽说简易，但对于啥也不会的小白的我一点也不简易。但经过学习和借鉴其他大佬的制作方法后勉强做出一个像样的网页,但做完以后还小有成就感
它的模型来源于QQ邮箱登录页面：
11.png
1.先下载好网页制作的软件（我用的是sublime），利用时间学习html和css的基本语法，基本可以把大框架搭好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录qq邮箱</title>
</head>
<body>
主体
</body>
</html>
2.我首先制作的是最难的部分：表单。虽然在书中学了不少表单的知识，但确实实在不够用，有时做到一半的时候要借助搜索引擎或者寻求其他同学的帮助，我加了许多 【表示空格】来把“忘了密码？”和“注册新账号”隔开（我后来才知道可以用float语法来制作）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录qq邮箱</title>
</head>
<body>
<form style="position: absolute;left:749px;top:81px">
<fieldset style="height: 380px;width: 290px;border-color: #e0f3ff;">
<input type="submit"value="微信登录"style="width:140px;height:40px;">
<input type="submit"value="QQ登录"style="width:140px;height:40px;"></br></br>
  <input type="text" placeholder=支持QQ号/邮箱/手机号登录 style="width:260px;height:30px"></br></br>
  <input type="password" placeholder=QQ密码 style="width:260px;height:30px"></br></br>
<input type="checkbox" value="下次自动登录">下次自动登录</br></br>
<input type="submit" style="text-align:center;width:280px;height:40px;color:white;background-color:#0099FF" value="登    录" /></br>
<p style="text-align:center;border-color:#99CCFF;color:#99CCFF;font-size:13px;"><a href>扫码快捷登录</a></p></br>
<p style="color:#99CCFF;font-size:13px;"><a href>忘了密码?</a>                                         <a href>注册新账号</a> </p>
</form>
</body>
</html>
12.png
3.用float【左右浮动】把页面分成左右两个框架，再在两个框架的上下各加一段文字，上面的我又用了大量的 （实在迫不得已，不然会出现颜色断层），接着对框架高度宽度进行严格修改（保证不出现滚动条），文字大小颜色、背景颜色也套用css中的style语法进行修饰，颜色的话，可以利用颜色代码表来寻找相应的颜色（可能我找的颜色稍有误差。。），在要加超链接的地方套用相应语法，就可以做出超链接的效果
<a href>需超链接的部分</a>
13.png
4.最后加上那个图片，适当调整下图片的大小，它所在的位置可能挺难调的，最后变成这样，也算大功告成了
<img src="图片位置"height="高度" width="宽度" />
10.png
网页制作的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.content .login{
float:left;
border:1px solid #1d5494;
}
.content .login2{
float:right;
text-align:center;
border:1px solid #1d5494;
}
h1 {background-color: #C4E1FF}
table{border:1px solid silver;}
#p1{font-size:20px;}
</style>
<title>登录qq邮箱</title>
</head>
<body>
<div class="login">
<div id="header" style="background-color:#99CCFF;">MAil QQ邮箱                                                                                                                                                                                          
<a href>基本版</a> | <a href>English</a> | <a href>手机版</a> | <a href>企业邮箱</a> </p></div>
<div1 id="menu" style="height:600px;width:500px;float:left">
<br/><br/><br/><br/>
<h2 style=color:#0099FF;>QQ邮箱，常联系！</h2></br>
<p>2500年前，人们飞鸽传书</p>
<p>184年前，莫尔斯发明了电报</p>
<p>51年前，第一封电子邮件发出</p>
<p>今天，QQ邮箱联系你、我、他</p></div>
</div1</div>
<img src="C:\Users\pigion\Desktop\9.png"height="400" width="300" />
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="login2">
<br/><br/>
<form style="position: absolute;left:749px;top:81px">
<fieldset style="height: 380px;width: 290px;border-color: #e0f3ff;">
<input type="submit"value="微信登录"style="width:140px;height:40px;">
<input type="submit"value="QQ登录"style="width:140px;height:40px;"></br></br>
  <input type="text" placeholder=支持QQ号/邮箱/手机号登录 style="width:260px;height:30px"></br></br>
  <input type="password" placeholder=QQ密码 style="width:260px;height:30px"></br></br>
<input type="checkbox" value="下次自动登录">下次自动登录</br></br>
<input type="submit" style="text-align:center;width:280px;height:40px;color:white;background-color:#0099FF" value="登    录" /></br>
<p style="text-align:center;border-color:#99CCFF;color:#99CCFF;font-size:13px;"><a href>扫码快捷登录</a></p></br>
<p style="color:#99CCFF;font-size:13px;"><a href>忘了密码?</a>                                         <a href>注册新账号</a> </p>
</form>
</div>
<div id="footer" style="background-color:#C4E1FF;clear:both;text-align:center;">
<a href>关于腾讯</a> | <a href>服务条款</a> | <a href>隐私政策</a> | <a href>客服中心</a> | <a href>联系我们</a> | <a href>帮助中心</a> | ©1998 - 2020 Tencent Inc. All Rights Reserved.</div>
</div>
</body>
</html>
