模仿学校邮箱首页

来源：互联网发布：手机抢拍软件编辑：程序博客网时间：2024/04/29 12:52

这几天看了韩老师关于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>北京交通大学. &copy; 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;}

在登陆框中，我使用了绝对布局来定位整个div，在这个div里，我使用了4行1列的表格来布局输入框，最后的登陆按钮和二维码直接使用背景图片。

最后的效果图：

总结：这个网页的布局相对简单，因为这是第一次自己尝试着模仿，热情很高，所以一个晚上基本上就完成了，但是在编程过程中也遇到了各种各样的问题，果然实践还是最好的学习方法。

最后，模仿出来的网页还有点瑕疵，就是输入用户名的密码框里面的提示字符不知道怎么弄，安卓里面好像用Hint，这里面没找到这个方法，还有就是本来北京图片是可以有多个图片切换的，这个效果还没有做出来，希望接下来学习了js知识之后能补上。

这几天要考试了，过几天想模仿一个稍微复杂一点的网页，比较倾向于模仿一个学校网站的主页，先写在这里督促一下自己。

1 0