小白开始尝试了html制作低配版的qq邮箱(炒鸡低配版,所有可以点击的按钮都没有,所有链接也都没有设置)。因为只有课余时间看了不到一周,所以很多css的美化都没有做,充满了直男方块,而且很多地方也写的很麻烦
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QQ E-mail</title>
</head>
<body>
<div id="a" style="width: 1358px; height: 62px; background: #ECF5FF; border-top: 0.02px #808080 ; border-bottom: #D2E9FF solid; position: absolute;top: 0pt;">
<img src="qqmail.jpg" />
</div>
<div style="width: 200px; height: 20px; position: absolute; top: 20px; left: 1120px;">
<font face="宋体" size="2" color="005AB5">基本版|English|手机版|企业邮箱
</font>
</div>
<div style="width: 1358px; height: 30px; background: #ECF5FF; position: absolute; top: 585px; border-top: 0.02px #D2E9FF solid;">
</div>
<div style="width: 700px; height: 30px; position: absolute; top: 588px; left: 351px;">
<font face="宋体" color="005AB5" size="1">关于腾讯 | 服务条款 | 隐私政策 | 客服中心 | 联系我们 | 帮助中心 </font><font size="1" color="#808080">| ©1998 - 2018 Tencent Inc. All Rights Reserved.</font>
</div>
<div style="position: absolute; top: 195px; left: 237px;">
<img src="qqmain.png" />
</div>
<div style="background: #ECF5FF; width: 340px; height: 50px; position: absolute; top: 135px ; left: 800px; border: 1px #6495ED solid;"></div>
<div style="width: 340px; height: 380px; position: absolute; top: 135px; left: 800px; border: 1px #6495ED solid; ">
</div>
<div style=" width: 280px; height: 30px; position: absolute; top: 150px ; left: 855px;">
<font face="微软雅黑" color="#808080" size="3">快速登录</font>
<font face="微软雅黑" color="#000000" size="3">账号密码登录</font>
</div>
<div style=" width: 300px; height: 240px; position: absolute; top: 380px ; left: 835px;">
<form name="ha" action="css/" method="post">
<input type="image" src="up.png"/>
</form>
</div>
<div style=" width: 300px; height: 240px; position: absolute; top: 220px ; left: 825px;">
<form name="haha" action="css/" method="post">
<input type="text" name="user" size="35" style="height: 25px;" />
<br />
<br />
<input type="password" name="password" size="35" style="height: 25px;" />
<br />
<br />
<input type="radio" name="way" />下次自动登录
</form>
</div>
<div style="width: 200px; height: 30px; position: absolute; top: 475px; left: 915px;">
<font face="宋体" color="005AB5" size="1">忘了密码?| 注册新帐号| 意见反馈
</div>
</body>
</html>
因为不熟悉,第一次写了快三个小时,emmmmm…其实,更多的实在用absolute去定位花了更多时间,但是这样大量使用绝对定位导致了一些严重的后果,比如:极度浪费时间;页面比例改变之后网页就会炸掉,变得非常混乱。这种情况下要去使用一些相对位置来去确定各部分的位置,但之一部分目前本菜鸡还没有看到,所以等以后看到了再来做更多分享吧。
还有比较突出的问题就是使用了过多的div,其实每个div中能实现好多功能,但因为我比较菜,很多方式不知道,所以有些能合并在一起的地方都没有合并,导致代码比较难看。而且我没有使用外联的css,这也是一些问题,对于这些问题还是要去学习更多东西去更改的。