分类:
前端
code:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
- <title>Register</title>
- <style type="text/css">
- /*表单样式*/
- .myformdiv {
- background-color: lightcoral;
- opacity: 0.85;
- }
-
- /*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，
- 实际上此时div内容整体已经偏下，再把整个身子往上移动一半即可
- 并针对不同浏览器进行兼容。
- */
- .col-center-block {
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- -o-transform: translateY(-50%);
- transform: translateY(-50%);
- }
-
- </style>
- </head>
- <body>
- <!-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
- <div class="row justify-content-center ">
- <!-- 下面是要居中的div，添加.col-center-block -->
- <div class="col-center-block col-sm-4 col-xs-4 jumbotron myformdiv ">
- <h2>Welcome To register!</h2>
- <div>
- <form class="bs-example bs-example-form" role="form">
- <div>
- <span><b>username</b></span>
- <input type="text" placeholder="username">
- </div>
- <br>
- <div>
- <span class="input-group-addon "><b>password</b></span>
- <input type="password" placeholder="password">
- </div>
- <br>
- <div>
- <span class="input-group-addon "><b>email</b></span>
- <input type="email" placeholder="email">
- </div>
- <br>
- <div style="margin-top: 2px;">
- <button type="button" class="btn text-center btn-outline-light btn-lg"><a
- href="#">注册</a></button>
- </div>
- </form>
- </div>
- </div>
- </div>
- </body>
- </html>
评价
雪霏
嘿嘿