pCloud Partner Program

'menu'相關日誌共 1 篇

  1. 2018/09/14 [CSS]Menu寫法

[CSS]Menu寫法

程式技術 2018/09/14 16:08
views: 39302 times
我們在寫 Menu 時, 會利用 li tag 來進行, 如下:
一般來說, 會需要將原來的 li 前面的符號點去除, 會使用 CSS:
然後在 li 本身的原來預設 display: block 要改為 inline:
接下來是需要在每個 menu 中間放個分隔符號如: |
達成效果:https://codepen.io/timhuang/pen/vzaYXo
有趣的是最後這個 li + li:before 語法, 可以不用到排列子元素的方式, 而是用緊鄰的方式來選擇, 如此一來, 第一個 li 就不會滿足這個條件, 只有第二個到最後一個可以滿足, 而達成在每個 menu 間下分隔符號.
其他解法尚有:https://codepen.io/timhuang/pen/VGBwXw
https://codepen.io/timhuang/pen/MqBWPX
top




DJI Tello 小米萬能遙控器 手機App操控
Microsoft Office 365 中文家用版PKC (無光碟) ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U
美國 VORNADO 533 渦流空氣循環機 (黑色) 御茶園 每朝健康綠茶(650mlx24入)
每朝健康 雙纖綠茶(650mlx24入)


 Waiting...