JavaWeb——【前端】——登录页面

最新推荐文章于 2024-08-30 12:50:13 发布

狮子座的程序员

最新推荐文章于 2024-08-30 12:50:13 发布

阅读量1.8k

点赞数 2

分类专栏： # Web前端

本文链接：https://blog.csdn.net/weixin_42247720/article/details/104857161

版权

Web前端专栏收录该内容

28 篇文章 5 订阅

订阅专栏

本文详细介绍了一个用户登录页面的设计与实现过程，包括HTML、CSS布局及使用Thymeleaf语法进行动态页面渲染的方法。文章涵盖了Bootstrap和jQuery的集成应用，展示了如何创建美观且响应式的用户登录界面。

摘要由CSDN通过智能技术生成

页面效果

在这里插入图片描述

实现代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:https="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
   <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}">
   <link rel="stylesheet" type="text/css" th:href="@{/css/register.css}">
   <script th:src="@{https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js}"></script>
   <script th:src="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js}"></script>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<div  class="container">
   <div  class="row">
      <div class="col-md-6 well">
         <div class="header">
            <h2 >用户登录</h2>
         </div>
         <form>
            <div class="form-group input-group">
               <span class="input-group-addon glyphicon glyphicon-user"></span>
               <input type="text" class="form-control" name="username" placeholder="请输入名称">
            </div>
            <div class="form-group input-group">
               <span class="input-group-addon glyphicon glyphicon-lock"></span>
               <input type="password" class="form-control" name="password" placeholder="请输入密码">
            </div>
            <div class="radio center text-center">
               <label>
                  <input type="radio" class="radio-button" name="role" value="1">用户
               </label>
               <label>
                  <input type="radio" class="radio-button" name="role" value="2">商家
               </label>
            </div>
            <button type="submit" class="btn btn-success">登录</button>
         </form>
      </div>
      <div class="col-md-6" id="col-2">
         <label>请输入用户名、密码</label><br>
         <label>并选择自己的注册身份</label>
      </div>
   </div>
</div>
</body>
</html>


body{
    /*background-image: url("/image/04.jpg");*/
    background-repeat: no-repeat;
}

.container{
    margin-top: 50px;
}

.well{
    border-right:1px solid #ddd;
}

.header{
    border-bottom: 1px solid #C4C4C4;
    margin-bottom: 10px;
}

.radio{
    border: 1px solid black;
    width: 100%;
    height: 40px;
    padding-top: 10px;
}

.btn{
    width: 100%;
}

#col-2{
    border-top: 1px black solid;
    padding-top: 30px;
}

注意事项

主要使用的bootstrap样式
如果想引用，不要直接复制，没用的。
先介绍下所引用的文件：
boostrap的js、bootstrap的css、jquery的js、以及自己编写的register.css。
因为博主用的thymeleaf语法，所以有th符号。
若要使用时，根据个人情况导入相应的依赖。