在網頁開發中,登錄界面是非常常見的一個頁面,也是必須要設計的一個頁面。除了功能實現外,登錄頁面的css樣式也是非常關鍵的部分。下面是一個示例的登錄頁面css樣式。
/* 登錄窗口樣式 */ .login-box { background-color: #fff; border-radius: 5px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); width: 400px; padding: 40px; margin: auto; margin-top: 80px; text-align: center; } /* 輸入框樣式 */ .input-box { margin-bottom: 20px; } .input-box input[type="text"], .input-box input[type="password"] { width: 100%; padding: 10px; border-radius: 5px; border: none; border-bottom: 2px solid #2196f3; font-size: 16px; color: #555; outline: none; } /* 按鈕樣式 */ .btn { background-color: #2196f3; border: none; color: #fff; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; margin-top: 20px; } .btn:hover { background-color: #0c7cd5; } /* 標題和小字體樣式 */ .title { font-size: 24px; margin-bottom: 30px; } .small-text { font-size: 14px; color: #999; margin-top: 20px; }
以上就是一個基本的登錄頁面的樣式代碼。在實際操作中,還需要根據需求進行一定的修改和調整才能得到最理想的效果。