在購物網站上,CSS是至關重要的一部分。它不僅可以為網站增添美觀,還可以提高用戶體驗和網站性能。以下是使用CSS編寫購物網站的一些技巧。
/* 設置網站的字體和顏色 */ body { font-family: Arial, sans-serif; color: #333; } /* 導航條樣式 */ nav { background-color: #f4f4f4; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 10px; } nav a { color: #333; text-decoration: none; } nav a:hover { color: #f00; } /* 商品列表樣式 */ .product { width: 25%; margin-bottom: 20px; margin-right: 20px; float: left; } .product img { width: 100%; } .product h3 { margin-top: 10px; font-size: 1.2rem; } .product p { margin: 10px 0; } /* 購物車樣式 */ .cart { border: 1px solid #ccc; width: 250px; overflow: auto; padding: 10px; margin-right: 20px; float: right; } .cart h4 { margin: 0 0 10px 0; font-size: 1.2rem; } .cart table { width: 100%; text-align: left; border-collapse: collapse; } .cart td, .cart th { border: 1px solid #ccc; padding: 5px; } .cart td { font-size: 0.9rem; } .cart th { background-color: #f4f4f4; font-weight: bold; font-size: 1rem; } /* 結賬按鈕樣式 */ .checkout { background-color: #f00; color: #fff; border: none; padding: 10px; border-radius: 5px; cursor: pointer; } .checkout:hover { background-color: #ff4545; }
以上是購物網站中常用的CSS樣式,它們可以幫助你構建一個美觀、易用的商店網站。使用這些樣式的同時,也要注意網站的性能,盡量減少不必要的樣式和代碼。
上一篇css輪播自適應