这几天看了韩老师关于HTML+CSS方面的视频,让我对网页制作有了一个初步的了解,也了解了什么是标记语言,更让我感受到了网页编程的魅力。跟着他的视频做了几个小实例,但是还没有过瘾,于是就想自己把学校的邮箱首页给模仿制作出来。
可以看出整个界面还是相对简单的,主要分为了上、中、下三个大的<div>
上部<div>分为logo图片和导航栏两个部分;
中间的<div>分为图片框和登陆框两个部分;
下方则是网站的版权声明。
分析完了主体布局,接下来用视频里教的开发人员工具把图给抠下来
获取了图片资源后,进入正题,我使用的的myeclipse开发工具
上代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Tj的北交大邮箱</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./bjtumail.css">
</head>
<body>
<!--顶部div-->
<div class="top">
<div class="logo"><img src="images/2.png"/></div>
<div class="lead">
<ul class="faceul">
<li class="faceli"><a href="http://www.bjtu.edu.cn/">学校首页 |</a></li>
<li class="faceli"><a href="http://mis.bjtu.edu.cn/cms/">管理信息系统 |</a></li>
<li class="faceli"><a href="#">设为首页 |</a></li>
<li class="faceli"><a href="http://blog.csdn.net/u014712516" target="_blank">收藏本页 |</a></li>
<li class="faceli"><a href="#">English Version |</a></li>
<li class="faceli"><a href="http://mail.bjtu.edu.cn/coremail/help/index_zh_CN.jsp" target="_blank">帮助</a></li>
</ul>
</div>
</div>
<!--顶部div end..-->
<!-- 主体部分 -->
<div class="main">
<!-- 登陆框 -->
<div class="login">
<!-- 表格布局(4列) -->
<table width="300px">
<tr height="48px">
<td><span class="font">电子邮箱登陆 </span><span class="font2"> language: 简体中文</span></td>
</tr>
<tr height="48px">
<td style="padding-left: 17px">
<input type="text" name="username" style="width: 265px;height: 30px;border: 1px solid #B4B4B4;font-size: 30px;color: silver" />
</td>
</tr>
<tr height="48px">
<td style="padding-left: 17px">
<form>
<select name="#" style="width: 270px;height: 30px;border: 1px solid #B4B4B4;font-size: 17px">
<option value="#" style="color: #B4B4B4">bjtu.edu.cn</option>
<option value="#" style="color: #B4B4B4">jg.bjtu.edu.cn</option>
</select>
</form>
</td>
</tr>
<tr height="50px">
<td style="padding-left: 17px">
<input type="password" name="password" style="width: 265px;height: 30px;border: 1px solid #B4B4B4;font-size: 30px;color: silver" />
</td>
</tr>
</table>
<!-- 表格 end.. -->
<!-- 复选框 -->
<input type="checkbox" name="#" style="margin-left: 12px;border: 0"/>
记住用户名
<input type="checkbox" name="#" style="border: 0"/>
SSL安全登录
<!-- 复选框end.. -->
<input type="submit" value="登陆" style="width: 267px;height: 40px;background-color:#489DDE;margin-left: 20px;margin-top:10px;border: 0;color: white;font-family: 黑体;font-size: 27px"/>
<img style="width: 120px;height: 111px;margin-left: 60px" src="images/5.png">APP客户端下载
</div>
<!-- 登陆框end.. -->
<img src="images/3.png">
</div>
<!-- 主体部分 end.. -->
<!-- 版权部分 -->
<div class="end">
<span>北京交通大学. © Copyright 2000 - 2014 BJTUICP备:13012104 </span>
</div>
<!-- 版权部分 end.. -->
</body>
</html>
css:
@CHARSET "UTF-8";
body{
font-size: 12px;
font-family: "微软雅黑"/*,tahoma,verdana,sans-serif*/;
background-color: #F5F5F5;
margin: 0;
}
/*顶部div*/
.top{
width:1432px;
height:72px;
}
/*logo*/
.logo{
width: 400px;
height:72px;
float: left;
}
.logo img{
width:400px;
height: 72px;
}
/*导航栏*/
.lead{
width: 410px;
height: 72px;
float: right;
}
/*faceul*/
.faceul{
width:400px;
height: 13px;
margin-top: 40px;
padding: 0;
}
/*faceli*/
.faceli{
float: left;
margin-left: 4px;
list-style: none;
}
.faceli a:link{
text-decoration: none;
color: black;
}
.faceli a:hover{
text-decoration: underline;
}
/*主体部分*/
.main{
width: 1432px;
height: 586px;
float: left;
}
.main img{
width:1432px;
height: 586px;
}
/*login*/
.login{
width: 300px;
height: 390px;
background-color: #DFE6E6;
position: absolute;
left: 1037px;
top: 120px;
}
.font{
font-family: "黑体";
font-weight: bold;
font-size: 17px;
color: #1368A9;
margin-left: 10px;
}
.font2{
color: silver;
}
/*版权部分*/
.end{
height: 40px;
text-align: center;
margin-top: 40px;
}
最后的效果图:
总结:这个网页的布局相对简单,因为这是第一次自己尝试着模仿,热情很高,所以一个晚上基本上就完成了,但是在编程过程中也遇到了各种各样的问题,果然实践还是最好的学习方法。
最后,模仿出来的网页还有点瑕疵,就是输入用户名的密码框里面的提示字符不知道怎么弄,安卓里面好像用Hint,这里面没找到这个方法,还有就是本来北京图片是可以有多个图片切换的,这个效果还没有做出来,希望接下来学习了js知识之后能补上。
这几天要考试了,过几天想模仿一个稍微复杂一点的网页,比较倾向于模仿一个学校网站的主页,先写在这里督促一下自己。