在家具商城中,使用CSS來設計網站非常重要。CSS可以使網站的樣式變得更加美觀、易于維護和擴展。
/* 家具商城中的CSS代碼 */ /* 設置全局字體和背景顏色 */ body { font-family: Arial, sans-serif; background-color: #f2f2f2; } /* 設置導航欄樣式 */ nav { background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-evenly; } nav li { margin: 0 10px; } nav a { text-decoration: none; color: #999; transition: color 0.3s; } nav a:hover { color: #333; } /* 設置產品列表樣式 */ .product-list { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; } .product { background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 20px; width: calc(33.33% - 10px); padding: 10px; } .product img { max-width: 100%; height: auto; } .product h3 { font-size: 18px; margin: 10px 0; } .product p { color: #999; } .product a { display: inline-block; background-color: #333; color: #fff; text-decoration: none; padding: 10px 20px; margin-top: 10px; transition: background-color 0.3s; } .product a:hover { background-color: #000; }
以上是一個簡單的家具商城CSS代碼。它包括導航欄、產品列表和產品頁面的樣式。通過細心的調整和測試,你可以先流暢的呈現你的家具設計和功能。可以使你的網站在業內有一定地位。
上一篇你不知道的css pdf
下一篇信件css樣式