本文將介紹一款簡約登錄注冊模版的CSS樣式文件。
該樣式文件采用了簡約的設計風格,注重頁面的排版和視覺效果,并且具有一定的響應式設計特性。
以下是該樣式文件的代碼:
/*登錄與注冊界面的外圍容器*/ .login-container { width: 360px; margin: 60px auto 0; background: #f1f1f1; border-radius: 6px; box-shadow: 1px 1px 4px rgba(0, 0, 0, .10); } /*登錄與注冊頁面的標題*/ .login-title { font-size: 24px; font-weight: 500; padding: 40px 16px 20px; text-align: center; } /*輸入框的容器*/ .input-container { padding: 0 16px 20px; } /*輸入框的樣式*/ .input { width: 100%; height: 42px; font-size: 16px; border-radius: 6px; border: 1px solid #ddd; padding: 0 10px; margin-bottom: 20px; } /*登錄按鈕的樣式*/ .btn-login { width: 100%; height: 42px; border: none; border-radius: 6px; background: #00bfff; color: #fff; font-size: 16px; transition: background .2s ease-in-out; } /*登錄按鈕的hover樣式*/ .btn-login:hover { background: #0080ff; } /*注冊按鈕的樣式*/ .btn-register { width: 100%; height: 42px; border: none; border-radius: 6px; background: #ddd; color: #666; font-size: 16px; transition: background .2s ease-in-out; } /*注冊按鈕的hover樣式*/ .btn-register:hover { background: #ccc; }以上代碼包含了登錄與注冊容器、標題、輸入框、按鈕等多個樣式屬性,可以根據自己的需要進行調整。 綜上所述,該樣式文件簡約大方、易于使用,適用于多種登錄注冊場景。
上一篇asp代碼html
下一篇asp代碼在html中的