CSS 大屏登錄頁面可以讓我們在大屏幕設備上創建出更加美觀簡潔的登錄界面。具體步驟如下:
html { font-size: 62.5%; } body { font-family: 'Helvetica Neue', sans-serif; background-color: #f7f7f7; } .login { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40rem; padding: 6rem 8rem; background-color: #ffffff; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); border-radius: 1rem; } .login__title { text-align: center; font-size: 3rem; color: #222222; margin-bottom: 2.5rem; } .login__form { display: flex; flex-direction: column; margin-bottom: 3rem; } .login__label { font-size: 2rem; color: #222222; margin-bottom: 1rem; } .login__input { padding: 1.5rem 2rem; font-size: 1.6rem; color: #222222; border: none; background-color: #f3f3f3; border-radius: 0.8rem; margin-bottom: 2.5rem; } .login__submit { background-color: #222222; color: #ffffff; border: none; border-radius: 0.8rem; padding: 1.5rem 2rem; font-size: 2rem; cursor: pointer; }
通過以上代碼,我們可以創建出一個簡單的登錄界面,包含標題、用戶名和密碼輸入框,以及提交按鈕。運用了不同的 CSS 屬性來美化頁面。
下一篇css大盒子