網(wǎng)站的登陸頁面是非常重要的組成部分,因此,設(shè)計一個外觀好看的登陸頁面是必要的。下面將為大家介紹一些設(shè)計好看、實用的登陸頁面。
// 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; }
上面的代碼是一個極簡風(fēng)格的登陸頁面,它采用了圓角邊框、漸變背景和圖標(biāo)等設(shè)計元素,非常美觀。輸入框和按鈕都使用了相同的顏色和半徑,營造出一個和諧的整體感。
總之,設(shè)計好看的登陸頁面不僅能提升用戶體驗,還可以吸引更多的訪問者,為網(wǎng)站帶來更多的流量。