用css美化以下这个登录页面 <div> <div> <h3>登录</h3> <form> <div> <input type="text" v-model="user" id="user" placeholder="邮箱/手机/用户名"> </div> <div> <input type="password" v-model="password" id="password" placeholder="请输入密码"> </div> </form> </div> <div> <a href="javascript:void(0)" @click="show" class="mr-fr">注册</a> </div> <div> <input type="submit" name="" value="登 录" @click="login"> </div> </div>

以下是一个简单的示例，您可以根据需要进行修改和定制：

HTML代码：

<div class="login-container">
  <div class="login-form">
    <h3>登录</h3>
    <form>
      <div>
        <input type="text" v-model="user" id="user" placeholder="邮箱/手机/用户名">
      </div>
      <div>
        <input type="password" v-model="password" id="password" placeholder="请输入密码">
      </div>
    </form>
  </div>
  <div class="register-link">
    <a href="javascript:void(0)" @click="show">注册</a>
  </div>
  <div class="login-button">
    <input type="submit" name="" value="登 录" @click="login">
  </div>
</div>

CSS代码：

.login-container {
  background-color: #f9f9f9;
  border-radius: 5px;
  padding: 20px;
  width: 300px;
  margin: 0 auto;
}

.login-form h3 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: #555;
}

.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  font-size: 16px;
  transition: border-color 0.2s ease-in-out;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
  border-color: #2b8cff;
}

.register-link {
  text-align: center;
  margin-bottom: 20px;
}

.register-link a {
  color: #2b8cff;
  text-decoration: none;
  font-size: 14px;
}

.login-button {
  text-align: center;
}

.login-button input[type="submit"] {
  background-color: #2b8cff;
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.login-button input[type="submit"]:hover {
  background-color: #0077cc;
}

这个示例使用了一些基本的 CSS 样式，包括背景颜色、边框、内边距、宽度、边框半径、字体大小等。您可以通过修改这些样式来自定义登录页面的外观。特别是，我们使用了:focus伪类来添加输入框的焦点效果，使用:hover伪类来添加登录按钮的鼠标悬停效果。