CSS(Cascading Style Sheets,層疊樣式表)是一種用于描述網頁文件(HTML或XML)如何呈現在屏幕、紙張或其他媒體上的語言。
作為前端開發人員,利用CSS可以實現豐富的網頁設計,京東購物車的頁面風格就是一個典型的例子。
/* 下面是京東購物車頁面樣式 */ /* 設置全局字體 */ body { font-family: 'PingFang SC', Arial, sans-serif; } /* 商品列表 */ .cart-pro-list { border-collapse: collapse; width: 100%; } .cart-pro-list th, .cart-pro-list td { border: 1px solid #e3e3e3; padding: 12px 0; text-align: center; } /* 商品信息 */ .cart-pro-info { display: flex; align-items: center; } .cart-pro-info .img-box { width: 70px; height: 70px; margin-right: 20px; } .cart-pro-info .img-box img { width: 100%; height: 100%; } .cart-pro-info .pro-name { font-size: 16px; color: #333; } /* 商品數量 */ .cart-pro-amount { display: flex; } .cart-pro-amount .amount-btn { width: 26px; height: 26px; border: 1px solid #e3e3e3; display: flex; justify-content: center; align-items: center; } .cart-pro-amount .amount-text { width: 50px; height: 26px; border: 1px solid #e3e3e3; display: flex; justify-content: center; align-items: center; } /* 結算按鈕 */ .cart-total-btn { padding: 16px 0; font-size: 18px; color: #fff; background-color: #f40; text-align: center; }
以上是京東購物車頁面的部分CSS樣式,通過設置不同的屬性值,實現了商品列表、商品信息、商品數量和結算按鈕等不同部分的樣式設置。
精細的CSS布局和樣式設計可以提升網頁的視覺效果,進而提高用戶的使用體驗和滿意度。