自建 漂亮登陆页面

点击查看代码 
- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">

    <style>
        .box{
            width: 400px;
            height: 300px;
            margin-left: auto;
            margin-right:auto;
            margin-top: 100px;
            border: silver solid 2px;
            background-color: darkgray ;
            padding-left: 25px;
            padding-right: 25px;
            padding-top: 50px;
            padding-bottom: 15px;
            border-radius: 27px;
            z-index: 1001;
            -webkit-box-shadow: 19px 10px 100px rgb(0 0 255 / 25%) ;

        }
        .body-back{
            background-image: url("templates/5.jpg") ;
            background-size:  100%;
            z-index: 1000;
        }


    </style>
</head>
<body  class="body-back"   >

<div>
    <h1 style="text-align: center;font-size: 50px" >黑科技公司</h1>
</div>

<div class="box" >

    <form>
  <div class="form-group">
    <label for="exampleInputEmail1">用户名或者手机</label>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="用户名或者手机">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
  </div>


  <button type="submit" class="btn btn-primary center-block">登陆</button>
</form>

</div>

</body>
</html>

图片地址 image

做成的效果

image

posted @ 2022-12-03 10:49  昆仑葫芦  阅读(14)  评论(1)    收藏  举报