网站的登陆页面是非常重要的组成部分,因此,设计一个外观好看的登陆页面是必要的。下面将为大家介绍一些设计好看、实用的登陆页面。
// html 代码 <form> <label>用户名 </label> <input type="text" name="username"> <label>密码 </label> <input type="password" name="password"> <button type="submit">登陆</button> </form> // css 代码 body { background-color: #f7f7f7; font-size: 14px; font-family: Arial, sans-serif; } form { width: 400px; margin: 0 auto; padding: 30px; background-color: #fff; border-radius: 5px; border: 1px solid #ddd; } label { display: block; margin-bottom: 15px; font-weight: bold; } input[type="text"], input[type="password"] { display: block; width: 100%; padding: 10px; margin-bottom: 20px; border-radius: 5px; border: 1px solid #ddd; } button[type="submit"] { display: block; margin: 0 auto; padding: 10px 30px; background-color: #2ecc71; color: #fff; border-radius: 5px; border: none; cursor: pointer; } button[type="submit"]:hover { background-color: #27ae60; }
上面的代码是一个极简风格的登陆页面,它采用了圆角边框、渐变背景和图标等设计元素,非常美观。输入框和按钮都使用了相同的颜色和半径,营造出一个和谐的整体感。
总之,设计好看的登陆页面不仅能提升用户体验,还可以吸引更多的访问者,为网站带来更多的流量。