Bootstrap的使用。。。之登录界面。。。

来源：互联网发布：给淘宝买家的祝福语编辑：程序博客网时间：2024/04/30 01:47

直接上代码。。。

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>请登录</title>    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">    <link href="Login.css" rel="stylesheet">    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script></head><body>    <form class="form-inline">        <div class="form-group">            <label class="sr-only" for="exampleInputEmail3">Email address</label>            <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">        </div>        <div class="form-group">            <label class="sr-only" for="exampleInputPassword3">Password</label>            <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">        </div><br/>        <div class="checkbox">            <label>                <input type="checkbox" value="remember-me">Remember me?</input>            </label>        </div>        <button type="button" class="btn btn-primary btn-lg">登录</button></form></body></html>

css代码。。。

body{    background-color: #4A374A;    text-align: center;}.form-inline{    padding-right: 15px;    padding-left: 15px;    margin-left: auto;    margin-right: auto;    height: 720px;    max-width: 330px;    padding-top: 50px;}.form-inline input{    margin-bottom: 10px;    outline: none;    padding: 10px;    font-size: 13px;    color: #fff;    text-shadow:1px 1px 1px;    border-top: 1px solid #312E3D;    border-left: 1px solid #312E3D;    border-right: 1px solid #312E3D;    border-bottom: 1px solid #56536A;    border-radius: 4px;    background-color: #2D2D3F;}.form-inline .form-control{    position: relative;    height: auto;    padding: 10px;    font-size: 16px;    width: 300px;}.btn{    width: 300px;    min-height: 40px;    display: block;    background-color: #4a77d4;    border: 1px solid #3762bc;    color: #fff;    padding: 10px 16px;    font-size: 18px;    line-height: normal;    border-radius: 6px;    margin: 0;    text-decoration: none;    text-align: center;}.checkbox{    margin-left: -160px;    font-size: 18px;    color: #FFE4E1;}

1 0