CSS是網頁開發中非常重要的一部分,它可以控制網頁的樣式和布局。其中,Win10風格是一種非常受歡迎的設計風格,可以為網站帶來現代感和簡潔感。
以下是一些實用的CSS樣式,可以輕松實現Win10風格的設計:
/* 統一樣式 */ body { font-family: 'Segoe UI', 'Roboto', sans-serif; background-color: #f0f0f0; } /* 按鈕 */ .btn { display: inline-block; padding: 10px 20px; background-color: #0078d7; color: #fff; text-align: center; text-decoration: none; border-radius: 4px; transition: all 0.3s ease; } .btn:hover { background-color: #005a9e; cursor: pointer; } /* 標題 */ .title { font-size: 24px; font-weight: bold; color: #333; } /* 分割線 */ .line { height: 1px; background-color: #eee; margin: 20px 0; } /* 卡片 */ .card { background-color: #fff; border: 1px solid #eee; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); padding: 20px; margin-bottom: 20px; } /* 表單 */ .form { display: flex; flex-direction: column; margin-bottom: 20px; } .form label { margin-bottom: 10px; font-size: 18px; color: #333; } .form input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; font-size: 16px; } .form input:focus { outline: none; border-color: #0078d7; } .form .submit { background-color: #0078d7; color: #fff; border: none; border-radius: 4px; padding: 10px 20px; font-size: 16px; cursor: pointer; } .form .submit:hover { background-color: #005a9e; }
通過使用這些CSS樣式,我們可以輕松地為網站添加Win10風格的設計,為用戶帶來更好的體驗。