HTML案例登录页面

本人是菜鸟，刚入前端坑 想记录一下自己写过的页面，也希望能帮到跟我一样的你，加油鸭~~~

简单的登录页面

<div class="www">

    <div class="dowebok">

      <div class="logo"></div>

      <div class="form-item">

        <input

          id="username"

          type="text"

          autocomplete="off"

          placeholder="手机号"

        />

      </div>

      <div class="form-item">

        <input

          id="password"

          type="password"

          autocomplete="off"

          placeholder="登录密码"

        />

      </div>

      <div class="form-item">

        <button id="submit"><a href="./repast.html">登 录</a></button>

      </div>

      <div class="reg-bar">

        <a class="reg" href="javascript:">立即注册</a>

        <a class="forget" href="javascript:">忘记密码</a>

      </div>

    </div>

  </div>

以上是html的代码 可以直接复制粘贴就好！!!!!~~~~

.www{

  max-width: 640px;

  margin: 0 auto;

  min-height: 100%;

}

 

* {

  margin: 0;

  padding: 0;

}

html {

  height: 100%;

}

body {

  max-width: 1226px;

  margin: 0 auto !important;

  height: 100%;

  background: #fff url(img/backgroud.png) 50% 50% no-repeat;

  background-size: cover;

}

.content {

  margin-bottom: 15px;

}

.dowebok {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 430px;

  height: 100%;

  margin: -300px 0 0 -215px;

  border: 1px solid #fff;

  border-radius: 20px;

  overflow: hidden;

}

.logo {

  width: 104px;

  height: 104px;

  margin: 50px auto 80px;

  background: url(img/login.png) 0 0 no-repeat;

}

.form-item {

  position: relative;

  width: 360px;

  margin: 0 auto;

  padding-bottom: 30px;

}

.dowebok .form-item input {

  width: 100%;

  height: 48px;

  padding-left: 20px;

  border: 1px solid black;

  border-radius: 25px;

  font-size: 18px;

  color: #fff;

  background-color: transparent;

  outline: none;

}

.form-item button {

  width: 360px;

  height: 50px;

  border: 0;

  border-radius: 25px;

  font-size: 18px;

  color: #1f6f4a;

  outline: none;

  cursor: pointer;

  background-color: #fff;

  border: 1px solid black;

}

.form-item button a{

  text-decoration: none;

}

#username {

  background: url(img/emil.png) 20px 14px no-repeat;

}

#password {

  background: url(img/password.png) 23px 11px no-repeat;

}

.tip {

  display: none;

  position: absolute;

  left: 20px;

  top: 52px;

  font-size: 14px;

  color: #f50;

}

.reg-bar {

  width: 360px;

  margin: 20px auto;

  font-size: 14px;

}

.reg-bar a {

  color: #000;

  text-decoration: none;

}

.reg-bar a:hover {

  text-decoration: underline;

}

.reg-bar .reg {

  float: left;

}

.reg-bar .forget {

  float: right;

}

.dowebok ::-webkit-input-placeholder {

  font-size: 18px;

  line-height: 1.4;

  color: rgb(145, 138, 138);

}

.dowebok :-moz-placeholder {

  font-size: 18px;

  line-height: 1.4;

  color: rgb(145, 138, 138);

}

.dowebok ::-moz-placeholder {

  font-size: 18px;

  line-height: 1.4;

  color: rgb(145, 138, 138);

}

.dowebok :-ms-input-placeholder {

  font-size: 18px;

  line-height: 1.4;

  color: rgb(145, 138, 138);

}

@media screen and (max-width: 500px) {

  .dowebok {

    position: static;

    width: auto;

    height: 100%;

    margin: 0 30px;

    border: 0;

    border-radius: 0;

  }

  .logo {

    margin: 50px auto;

  }

  .form-item {

    width: auto;

  }

  .form-item input,

  .form-item button,

  .reg-bar {

    width: 100%;

  }

}

以上就是整个啦  ，加油呀小蒋~！！！