zoukankan      html  css  js  c++  java
  • 模仿 SWPU邮件页面

    模仿SWPU邮件页面

    要求

    参考swpu 邮件主页,编写一个新闻后台登录页面,并用Js静态验证用户名密码是否为空,用户名为tom 密码为 123跳转到另一个页面

    http://mail.swpu.edu.cn/

    发布到码云或github上

    并编写一篇博文,介绍开发过程,博文中 包括 码云或github作业代码地址

    第一步

    下载登录页面所需要的图片资源

    找到图片资源链接

    http://mail.swpu.edu.cn/tpl/login/user/images/login_bg_02.jpg
    http://mail.swpu.edu.cn//tpl/login/user/images/tablicurrent.png
    http://mail.swpu.edu.cn//tpl/login/user/images/login_btn.jpg

     

     第二步

    分析页面布局,写出各个模块

    网页总体可以由一个大 DIV 包含 3 个 DIV 组成,每个 DIV 又根据情况包含若干 DIV
    构建初始页面,为每个 DIV 设置基本 CSS 属性

     第三步

    逐步细化,完善细节

    先写出logo,再用qq截图取色,使得页面logo与原网页一致

    细化body

    设置好css样式

     

     可以看出,基本上与原网页相近了,对于一些参数调整,可以参考原网页的源代码。

    第四步

    加入JS交互

    加入js代码后,输入用户名tom,密码123成功跳转swpu邮件网页。

    码云地址:https://gitee.com/wangli2017/Java-ee/tree/3641a1a0c87ba0bab459888ae21225a519b78f03/

  • 相关阅读:
    XML 验证器
    XML 浏览器支持
    XML 元素
    查看 XML 文件
    XML 属性
    Android入门之Activity四种启动模式
    XML 简介
    XML 语法规则
    [Android]Thread线程入门3多线程
    XML 验证
  • 原文地址:https://www.cnblogs.com/wang20173/p/12879243.html
Copyright © 2011-2022 走看看