CSS是用來美化網(wǎng)頁的一個非常重要的工具,其中的登錄和注冊頁面是常見的頁面設(shè)計中相當(dāng)重要的一部分,下面是我的一些心得:
/* 登錄頁面的樣式 */ .login-wrap { width: 300px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; } .login-form input { display: block; width: 100%; margin-bottom: 10px; padding: 10px; border: none; border-radius: 5px; } .login-form button { display: block; width: 100%; margin-top: 10px; padding: 10px; border: none; border-radius: 5px; background-color: #4caf50; color: #fff; } /* 注冊頁面的樣式 */ .register-wrap { width: 500px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; } .register-title { text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 20px; } .register-form input { display: block; width: 100%; margin-bottom: 10px; padding: 10px; border: none; border-radius: 5px; } .register-form button { display: block; width: 100%; margin-top: 10px; padding: 10px; border: none; border-radius: 5px; background-color: #4caf50; color: #fff; } .register-form p { color: #f00; }
我的登錄頁面使用了簡單的盒子模型來實現(xiàn),在其中設(shè)定了一個寬度并居中對齊,然后使用了內(nèi)邊距來使輸入框和按鈕的距離更加合適,還對其進(jìn)行了一些簡單的美化。注冊頁面比登錄頁面相對麻煩一些,它需要更多的輸入框和信息。其中,我設(shè)置了一個標(biāo)題來讓用戶更加清晰地了解注冊的目的和作用。在輸入框的樣式上,還調(diào)整了一些文字和邊距的基本設(shè)置,最后設(shè)置了一些警告提示語的樣式。
上一篇div css 圖片浮動
下一篇css白色邊框灰色陰影