唯品會是一家電商網站,為了美化網站的UI界面,唯品會使用了CSS技術。
/* CSS代碼示例 */ /* 重置HTML和body的默認樣式 */ html, body { margin: 0; padding: 0; } /* 設置網站的背景顏色 */ body { background: #fdfdfd; } /* 設置網站的字體顏色和字號 */ body, a, span { font-size: 16px; color: #333; line-height: 1.5; } /* 設置網站標題的樣式 */ h1, h2, h3, h4, h5, h6 { font-weight: bold; margin: 0; padding: 0; } /* 設置網站導航欄的樣式 */ .navbar { background: #fff; border-bottom: 1px solid #ddd; } .navbar a { margin: 0 10px; color: #333; text-decoration: none; } .navbar a:hover { color: #f90; } /* 設置網站商品列表的樣式 */ .product { width: 240px; height: 340px; margin: 10px; padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 0 5px #ddd; } .product img { display: block; width: 100%; height: 200px; margin-bottom: 10px; } .product h4 { font-size: 14px; margin-bottom: 5px; } .product span { font-size: 12px; color: #f60; margin-right: 5px; } .product .price { font-size: 16px; font-weight: bold; color: #f60; margin-top: 10px; }
上述CSS代碼中,重置了HTML和body的默認樣式,并為網站設置了背景顏色、字體顏色和字號等樣式。為了提升網站的用戶體驗,設置了導航欄的樣式和商品列表的樣式,使網站更加美觀、易于使用。
上一篇mysql上切