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

编程知识更新时间:2023-05-03 03:33:26

10.png

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

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

11.png

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

登录qq邮箱

主体

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

登录qq邮箱

&nbsp&nbsp

下次自动登录

扫码快捷登录

忘了密码?&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 注册新账号

12.png

3.用float【左右浮动】把页面分成左右两个框架，再在两个框架的上下各加一段文字，上面的我又用了大量的&nbsp(实在迫不得已，不然会出现颜色断层)，接着对框架高度宽度进行严格修改(保证不出现滚动条)，文字大小颜色、背景颜色也套用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邮箱&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

基本版&nbsp|&nbspEnglish&nbsp|&nbsp手机版&nbsp|&nbsp企业邮箱