课堂练习1

最新推荐文章于 2023-06-24 18:04:01 发布

t3163786

最新推荐文章于 2023-06-24 18:04:01 发布

阅读量91

点赞数

本文链接：https://blog.youkuaiyun.com/t3163786/article/details/118158712

版权

课堂练习
在WEB-INF里创建css目录，在里面创建样式文件index.css，负责首页的样式（元素全部居中，设置背景颜色，去掉超链接的下划线）
在这里插入图片描述
在index.jsp文件中添加

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css" type="text/css"/>
</head>
<body>
<h1>Hello,Spring MVC World!</h1>
<a href="toLogin">跳转到登录页面</a><br/>
<img src="images/bear.jpg" width="200" height="400">
</body>

</html>

在这里插入图片描述

a{
    text-decoration: none;
    color: #0066ff;
}
a:hover{
    color: #ff0015;
}
body{
    background-color: #c6f5cb;
    color: coral;
    font-size:9pt;
    text-align:center
}

img{
    vertical-align:middle;
}

运行项目，查看结果
在这里插入图片描述
在WEB-INF里创建js目录，在里面创建脚本文件check.js，负责登录页面的非空校验（先进行用户的非空校验，后进行密码的非空校验）

function getValue(){
   var str = document.getElementById('username').value;
   if (str.replace(/(^s*)|(S*$)/g,"").length==0){
       alert('用户名不能为空！');
       return false;
   }
}
function getReset(){
    var str = document.getElementById('username').value;
    if (str.replace(/(^s*)|(S*$)/g,"").length==0){
        alert('密码不能为空！');
        return false;
    }
}