CSS6 是 Cascading Style Sheets 的第六個版本,是一種用于網頁設計的樣式表語言。下面我們將教大家如何創建一個簡單卻美觀的登陸頁面。
/* 設置背景顏色和字體 */ body { background-color: #f2f2f2; font-family: Arial, sans-serif; } /* 中央對齊 */ .container { width: 60%; margin: 0 auto; text-align: center; } /* 登陸表格樣式 */ form { background-color: #fff; border-radius: 5px; padding: 40px; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1); } /* 每個表單元素樣式 */ input[type="text"], input[type="password"] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; } /* 登陸按鈕樣式 */ button[type="submit"] { background-color: #4CAF50; color: #fff; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } button[type="submit"]:hover { background-color: #45a049; } /* 鏈接樣式 */ a { color: dodgerblue; } a:hover { text-decoration: underline; }
使用以上 CSS 代碼,我們就可以得到一個簡單而美觀的登陸頁面。你可以自己做些小改動,如修改背景顏色,改變字體樣式,或者更改登陸表單的樣式。
總之,CSS6 可以讓我們輕松地改變頁面的外觀和布局,為我們的網頁增加感性美,并提高用戶的體驗。