密碼修改彈框是Web開發中經常使用的功能之一,它可以幫助用戶更方便、更安全地管理自己的賬戶密碼。在設計這樣一個彈框時,CSS的運用可以使它更加優美和易用。
下面是一個使用CSS設計的優美密碼修改彈框:
<div class="popup"> <h2>修改密碼</h2> <form> <input type="password" placeholder="請輸入舊密碼" /> <input type="password" placeholder="請輸入新密碼" /> <input type="password" placeholder="請確認新密碼" /> <button type="submit">確認修改</button> </form> <button class="close-btn">關閉</button> </div>
在CSS中,我們可以使用flex布局來控制彈框的位置和大小:
.popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } .popup h2 { font-size: 24px; margin: 0 0 20px; } .popup form { display: flex; flex-direction: column; } .popup form input { border: none; outline: none; padding: 10px; margin-bottom: 10px; border-radius: 5px; } .popup form button { border: none; outline: none; padding: 10px; margin-top: 20px; background: #1E90FF; color: #FFF; border-radius: 5px; cursor: pointer; } .close-btn { position: absolute; top: 10px; right: 10px; border: none; outline: none; background: transparent; font-size: 24px; cursor: pointer; color: #FFF; }
通過以上的CSS代碼,我們可以設計出一個簡潔美觀的密碼修改彈框。使用CSS可以更好地控制彈框的布局和樣式,使它更符合用戶的期望和需求。