淘寶網是國內最大的電商平臺之一,它的登陸界面經過了多次的改版和優化,讓用戶的登陸體驗越來越好。其中,CSS的應用起到了重要的作用。
/* 登錄框整體樣式 */ .login-box{ width:360px; margin:50px auto 0; background:#fff; padding:30px; border-radius:5px; box-shadow:0 0 10px rgba(0,0,0,.1); } /* 標題樣式 */ .login-title{ font-size:18px; line-height:18px; margin-bottom:20px; text-align:center; } /* 表單樣式 */ .login-form{ position:relative; } /* 輸入框樣式 */ .login-input{ width:100%; height:50px; padding:10px; margin-bottom:30px; border-radius:5px; border:1px solid #ddd; } /* 登錄按鈕樣式 */ .login-btn{ width:100%; height:50px; background:#ff4200; border:none; border-radius:5px; color:#fff; cursor:pointer; transition:.3s; } .login-btn:hover{ background:#ff6a00; } /* 忘記密碼和注冊樣式 */ .login-notice{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#999; } .login-notice a{ color:#ff4200; }
這段CSS代碼描述了淘寶網登陸框的整體樣式、標題樣式、表單樣式、輸入框樣式、登錄按鈕樣式以及忘記密碼和注冊的樣式。通過這些樣式的設置,用戶可以在登錄界面快速地找到并填寫需要的信息,同時也會有更好的視覺體驗。