新闻登录页面制作

 

一.作业要求：

模仿swpu的登录网页：http://mail.swpu.edu.cn/

使用的编译软件：vs code 

二：模仿步骤：

1.在VScode中新建一个html,css文件：

 

 

2.打开网页：

 

 

3.分析网页布局：

 

 

4.查看网页的源代码：

 

5.添加代码：

将原网页中中的内容复制到css文件里：

 

 

发现报错：

 

 

将值设置为0：

 

 

将原网页中的的代码复制到html的对应的中：

 

在html的中将外在属性资源添加进来：

 

 

 

使用浏览器打开，暂时界面如下：

 

 

界面缺少图片，添加图片：

新建一个文件夹images用于储存图片：

 

 

添加头部图片：

 

 

添加图片成功：

 

 

修改头部图片的地址：

 

 

修改为相对地址即可：

 

头部加载成功：

 

 

获取背景图片：

在原网页中获取背景图片：

 

 

将背景图片和其他相关的图片存入images中：

 

 

在css中修改每个图片的相对路径。

初步完成后的图片：

 

 

修改账号登录框的背景：

 

 

 

 

修改后并将其他的图片全部添加到界面里：

 

 

 

 

 

 

到这里，页面就基本做完了，剩下的就是验证用户名和密码是否为空：

使用js静态验证：

 

 

 

如果用户名或者密码为空或者错误，页面将进行提示：

 

 

 

 

 

 

 

 

如果用户名和密码正确的话，网页转到http://mail.swpu.edu.cn/：

 

 

 

 

 

 

代码上传到了github上，地址为：https://github.com/fengpeng123/swpu-web