您的位置：首页 > 其它

模仿学校邮箱首页

2015-06-09 10:42 519 查看
这几天看了韩老师关于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;
}


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

最后的效果图：



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

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

这几天要考试了，过几天想模仿一个稍微复杂一点的网页，比较倾向于模仿一个学校网站的主页，先写在这里督促一下自己。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航