简单的html登录界面

校园小白

已于 2023-06-07 21:10:03 修改

阅读量3.7w

点赞数 41

分类专栏： HTML/CSS/JS 文章标签： eclipse java-ee html bootstrap

于 2022-05-29 12:01:15 首次发布

本文链接：https://blog.csdn.net/m0_54149550/article/details/125029232

版权

HTML/CSS/JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

超简单的静态登陆界面

适合初学html的同学

演示效果如下图

可以自己改背景啥的

html代码如下

<!DOCTYPE html>
<html lang="zh-CN">
    <!-- <html lang="zh-CN"> 向搜索引擎表示该页面是html语言，并且语言为中文网站，其"lang"的意思就是“language”，语言的意思，而“zh”即表示中文 -->
    <head>
        <meta charset="utf-8">
		<!--声明文档兼容模式，表示使用IE浏览器的最新模式，告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE8引擎来渲染页面。-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>登陆</title>
        <!-- 引入jQuery核心js文件 -->
		<script src="js/jquery-1.11.3.min.js"></script>
				<!-- 引入BootStrap核心js文件 -->
		<script src="js/bootstrap.min.js"></script>
		
		<!-- 引入Bootstrap核心样式文件 -->
		<link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body{
        background: url("img/background.jpg") no-repeat center center fixed;
                    /*兼容浏览器版本*/
                    -webkit-background-size: cover;
                    -o-background-size: cover;                
                    background-size: cover;
      } /*背景图*/

      .test {
        margin-top: 100px;
      }
    </style>
	</head>
	<body>

      <div class="row" >
        <div class="col-md-4"></div> 
        <div class="col-md-4"   style="background-color: #aaaaaa; opacity:0.8;margin-top: 250px;" >
          <h1 class="text-center"   style="padding-top:50px;  " >用户登录</h1>
          <form class="form-horizontal " role="form"  action="/WebLog/login" method="post"  >
            <div class="form-group  ">
              <label for="" class="col-sm-2 control-label">账号</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="username" id=""      placeholder="请输入账号">
              </div>
            </div>
            <div class="form-group">
              <label for="lastname" class="col-sm-2 control-label">密码</label>
              <div class="col-sm-10">
                <input type="password" class="form-control" id="lastname" name="password" placeholder="请输入密码">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                  <label>
                    <input type="checkbox">记住密码
                  </label>
                  <label class="col-sm-offset-1"  >
                    <input type="checkbox">自动登录
                  </label>
                  <a  class="col-sm-offset-1" href="">忘记密码</a>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">登录</button>
                <a type="submit" class="btn btn-default col-sm-offset-4 " href="register.jsp" >注册</a>
              </div>
              
            </div>
          </form>
        </div> 
        <div class="col-md-4"></div> 

    </div>
  </body>
</html>

压缩包下载地址

链接：https://pan.baidu.com/s/1zEV3VYGKERVz8gC7fLAUtw
提取码：oryz