CSS可以實(shí)現(xiàn)商城側(cè)邊欄的樣式美化,為用戶提供更好的購物體驗(yàn)。
首先,使用pre標(biāo)簽包含需要設(shè)置的樣式代碼:
.sidebar { position: fixed; top: 50%; left: 0; transform: translateY(-50%); width: 200px; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); padding: 20px; } .sidebar h3 { font-size: 18px; color: #333; margin-bottom: 10px; } .sidebar ul li { font-size: 14px; color: #666; padding: 10px 0; border-bottom: 1px solid #e5e5e5; } .sidebar ul li:last-child { border-bottom: none; } .sidebar ul li a { color: #666; } .sidebar ul li a:hover { color: #f60; text-decoration: underline; }
然后,我們可以看到,需要設(shè)置一個(gè)固定位置的容器,即position: fixed,并設(shè)置它的居中位置,即top: 50%; left: 0; transform: translateY(-50%)。再為容器設(shè)置背景色為白色, box-shadow添加陰影效果,內(nèi)邊距為20px。
接下來,設(shè)置標(biāo)題的字體大小為18px,顏色為#333,設(shè)置下邊距為10px。
給列表項(xiàng)設(shè)置字體大小為14px,以及#666的顏色,同時(shí)為每一項(xiàng)的上下方添加10px的內(nèi)邊距和1px的底邊框線。同時(shí),將最后一項(xiàng)的底邊框線去掉,以免出現(xiàn)多余的線條。
最后,定義鏈接文字的顏色為#666,并添加:hover偽類,將鼠標(biāo)懸停時(shí)的顏色設(shè)為#f60,以及添加下劃線。
以上是CSS實(shí)現(xiàn)商城側(cè)邊欄的樣式美化,您只需要將代碼添加到您的樣式文件中即可。