CSS菜單是網頁設計中常用的一種元素,其具有便捷、美觀、交互性強等優點。其中,菜單條的展示形式可以是水平(橫向)或垂直(縱向),而在實際應用中,我們可能需要在不同的場景中進行相應的橫豎轉換。
/* 橫向菜單樣式 */ ul li{ display: inline-block; height: 30px; line-height: 30px; padding: 0 20px; border-right: 1px solid #ccc; } /* 縱向菜單樣式 */ ul li{ display: block; height:30px; line-height: 30px; border-bottom: 1px solid #ccc; }
通過以上代碼可以看出,橫向菜單的樣式主要通過設置li標簽為display:inline-block實現,每個li標簽占據一行,而縱向菜單的樣式則是設置li標簽display:block,使每個li標簽占據整個容器的寬度。
那么如何在實際應用中進行橫豎轉換呢?可以通過媒體查詢進行處理。例如:
@media screen and (max-width: 768px){ /* 當屏幕寬度小于等于768px時,把橫向菜單變為縱向菜單 */ ul li{ display: block; border-bottom: none; border-right: none; } ul li:last-child{ border-bottom: 1px solid #ccc; } }
通過以上代碼可以看到,當屏幕寬度小于等于768px時,通過設置li標簽display:block等屬性,將橫向菜單變為縱向菜單,并消除邊框的影響,同時為最后一個li標簽加上邊框。這樣,就可以在不同場景下靈活切換橫豎菜單,提升網頁交互效果。