CSS Win7風格是一個非常流行的網頁設計風格,它的特點是極具現代感和整潔感。如果您使用CSS Win7風格設計網頁,您的網站一定會給人留下深刻的印象。
/* CSS樣式 */ /* 設置字體 */ body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } /* 設置背景顏色 */ body { background-color: #F0F0F0; } /* 給標題加粗 */ h1, h2, h3, h4, h5, h6 { font-weight: bold; } /* 設置鏈接樣式 */ a { color: #0078D7; text-decoration: none; } a:hover { text-decoration: underline; } /* 設置按鈕樣式 */ button { background-color: #F0F0F0; color: #0078D7; border: 1px solid #0078D7; border-radius: 3px; padding: 5px 10px; } button:hover { background-color: #0078D7; color: #F0F0F0; } /* 設置表格樣式 */ table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #CCCCCC; padding: 8px; text-align: left; } th { background-color: #F0F0F0; font-weight: bold; } /* 設置輸入框樣式 */ input[type=text], input[type=password], select, textarea { width: 100%; padding: 12px; border: 1px solid #CCC; border-radius: 4px; resize: vertical; } /* 設置區塊樣式 */ blockquote { padding: 10px; border-left: 5px solid #0078D7; background-color: #F0F0F0; } /* 設置代碼樣式 */ code { background-color: #F0F0F0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 2px 5px; border-radius: 3px; font-size: 90%; }
以上是一些CSS代碼,用于實現Win7風格的網頁設計。其中包括常見組件的樣式,如鏈接、按鈕、表格和輸入框等。希望對于喜歡這種風格的網頁設計師有所幫助。