小白的低配版qq邮箱制作

小白开始尝试了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">| &copy;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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<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,这也是一些问题,对于这些问题还是要去学习更多东西去更改的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章