隨著電子商務的普及,網上購物已成為了越來越多消費者的選擇。為了讓用戶更加方便、舒適地購物,設計師們一直在不斷探索各種新穎的網頁設計。平面化設計,以其簡約、大氣的風格,成為了眾多網頁設計師的首選。下面,我們就來看看一款基于CSS平面化設計的購物商品網頁是如何設計的。
/* 頁面基礎樣式 */ body { font-family: 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 0; } .container { max-width: 960px; margin: 0 auto; padding: 0 20px; } /* 頭部導航欄樣式 */ .navbar { display: flex; justify-content: space-between; align-items: center; height: 80px; background-color: #FFF; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .navbar-brand { font-size: 24px; font-weight: bold; } .navbar-links { display: flex; justify-content: center; align-items: center; } .navbar-link { margin: 0 10px; font-size: 18px; font-weight: bold; text-decoration: none; color: #333; } /* 商品展示區域樣式 */ .product-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .product { width: calc((100% / 3) - 20px); margin-bottom: 40px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.2s ease-in-out; } .product:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.2); transform: translateY(-5px); } .product-image { height: 300px; background-size: cover; background-position: center; } .product-details { padding: 20px; text-align: center; } .product-name { margin-bottom: 10px; font-size: 24px; font-weight: bold; } .product-price { margin-bottom: 20px; font-size: 18px; } .product-desc { margin-bottom: 20px; font-size: 16px; color: #666; } /* 尾部樣式 */ .footer { display: flex; justify-content: center; align-items: center; height: 80px; background-color: #333; color: #FFF; } .footer-text { font-size: 18px; font-weight: bold; }
通過以上代碼,我們可以看到,這個網頁設計使用了Bootstrap框架,從而保證了頁面樣式的統一性和響應式設計。其中,頭部導航欄展示了品牌和相關的頁面鏈接,使用戶可以方便地訪問不同的頁面。商品展示區域采用了趨近于平面化的設計,每個商品都包含了圖片、名稱、價格和描述,滿足用戶快速瀏覽的需求。最后,底部的版權信息及相關公司信息也展示在頁面底部,為用戶提供了更多的信息支持。
下一篇css平臺會關閉嗎