1號店是一個全國知名的網上購物平臺,擁有眾多消費者。作為一名前端工程師,對于1號店的CSS布局充滿了興趣和好奇。
.nav-wrap { overflow: hidden; position: relative; }
首先,我們來看看1號店的導航欄布局。以上代碼為其導航欄的外層容器,其滾動條為隱藏狀態,即當導航欄過長時,不會出現滾動條。
#cart_fixed { position: fixed; top: 100px; right: 10px; }
接下來是1號店的購物車布局,購物車會隨著用戶滾動頁面而一直存在于屏幕右上角,使用了定位(position)屬性。
.wrap { margin: 0 auto; width: 1200px; }
1號店的整體布局采用了居中的方式,即網站各個部分都位于居中位置,這里使用了margin和width屬性進行布局。
.shop-diagnosis>h3 { font-size: 16px; font-weight: bold; border-bottom: 1px solid #dcdcdc; padding: 6px 0 6px 16px; }
最后,我們再來看一下1號店商品詳情頁的布局,其中商品診斷部分的標題(h3)使用了font-size和font-weight屬性設置字體大小和字重,并使用了padding屬性設置文字內邊距,使得標題顯示更為美觀。
下一篇2018年css2