對于一個花店網站來說,CSS代碼是至關重要的。它可以幫助我們美化頁面,增加用戶的體驗感,提高頁面的可讀性。
下面是一個簡單的花店網站的CSS代碼:
/* 重置樣式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 全局樣式 */ body { font-family: 'Arial', sans-serif; background-color: #f1f1f1; } /* 頭部樣式 */ header { background-color: #fff; border-bottom: 1px solid #ccc; padding: 20px; } .logo { display: inline-block; font-size: 2rem; font-weight: bold; color: #333; } /* 導航欄樣式 */ nav { display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px; } nav a { color: #333; text-decoration: none; font-weight: bold; padding: 10px; margin: 0 10px; border-bottom: 2px solid transparent; } nav a:hover { border-bottom-color: #333; } /* 推薦商品樣式 */ .recommended-products { display: flex; justify-content: center; flex-wrap: wrap; } .recommended-products img { width: 300px; height: 300px; margin: 20px; border-radius: 10px; } .recommended-products p { text-align: center; font-weight: bold; font-size: 1.2rem; } /* 底部樣式 */ footer { display: flex; justify-content: center; align-items: center; height: 50px; background-color: #333; color: #fff; font-size: 0.8rem; }
通過CSS代碼的方式,我們可以對花店網站的樣式進行統一管理,讓網站風格更加細致和獨特。
上一篇mysql 磁盤滿了
下一篇蘋果頁面過渡css