用html写QQ邮箱注册页面,制作简易QQ邮箱登录页面

10.png

虽说简易，但对于啥也不会的小白的我一点也不简易。但经过学习和借鉴其他大佬的制作方法后勉强做出一个像样的网页,但做完以后还小有成就感

它的模型来源于QQ邮箱登录页面：

11.png

1.先下载好网页制作的软件(我用的是sublime)，利用时间学习html和css的基本语法，基本可以把大框架搭好

登录qq邮箱

主体

2.我首先制作的是最难的部分：表单。虽然在书中学了不少表单的知识，但确实实在不够用，有时做到一半的时候要借助搜索引擎或者寻求其他同学的帮助，我加了许多 【表示空格】来把“忘了密码？”和“注册新账号”隔开(我后来才知道可以用float语法来制作)

登录qq邮箱

  

  

下次自动登录

扫码快捷登录

忘了密码?                                         注册新账号

12.png

3.用float【左右浮动】把页面分成左右两个框架，再在两个框架的上下各加一段文字，上面的我又用了大量的 (实在迫不得已，不然会出现颜色断层)，接着对框架高度宽度进行严格修改(保证不出现滚动条)，文字大小颜色、背景颜色也套用css中的style语法进行修饰，颜色的话，可以利用颜色代码表来寻找相应的颜色(可能我找的颜色稍有误差。。)，在要加超链接的地方套用相应语法，就可以做出超链接的效果

需超链接的部分

13.png

4.最后加上那个图片，适当调整下图片的大小，它所在的位置可能挺难调的，最后变成这样，也算大功告成了

10.png

网页制作的代码如下：

.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;}

登录qq邮箱

MAil QQ邮箱                                                                                                                                                                                          

基本版 | English | 手机版 | 企业邮箱

QQ邮箱，常联系！

2500年前，人们飞鸽传书

184年前，莫尔斯发明了电报

51年前，第一封电子邮件发出

今天，QQ邮箱联系你、我、他

  

  

下次自动登录

扫码快捷登录

忘了密码?                                         注册新账号

关于腾讯 | 服务条款 | 隐私政策 | 客服中心 | 联系我们 | 帮助中心 | ©1998 - 2020 Tencent Inc. All Rights Reserved.