css怎么做登录界面
导读:CSS可以帮助我们制作一个漂亮的登录界面,下面是一个示例:/* HTML代码 */<div class="login-form"> <h2>登录</h2> <form> <la...
CSS可以帮助我们制作一个漂亮的登录界面,下面是一个示例:
/* HTML代码 */div class="login-form"> h2> 登录/h2> form> label for="username"> 用户名:/label> input type="text" name="username" id="username"> label for="password"> 密码:/label> input type="password" name="password" id="password"> input type="submit" value="登录"> /form> /div> /* CSS代码 */.login-form { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; box-shadow: 0 0 10px #ccc; } h2 { text-align: center; margin-bottom: 20px; } form { display: flex; flex-direction: column; } label { margin-bottom: 10px; } input[type="text"], input[type="password"] { padding: 5px; border: none; border-radius: 5px; box-shadow: 0 0 5px #ccc; } input[type="submit"] { padding: 10px; background-color: #008CBA; color: #fff; border: none; border-radius: 5px; box-shadow: 0 0 5px #ccc; cursor: pointer; } input[type="submit"]:hover { background-color: #005F6B; }
以上CSS代码使用了一些常用的样式属性,如宽度、边距、内边距、边框、圆角、背景色、阴影、文本对齐、弹性盒子等。通过这些属性的组合,我们可以制作出一个简单而有效的登录界面。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css怎么做登录界面
本文地址: https://pptw.com/jishu/534965.html