pCloud Partner Program

[CSS]Menu寫法

程式技術 2018/09/14 16:08
views: 38501 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

table分行分色方式

程式技術 2013/03/15 17:01
views: 209070 times
在 HTML 中, 寫表格做報表是再平常不過的事了.

不過若是要分行分色, 一般可以設一個 class出來, 用個淺色的底色來放在奇數行或是偶數行來呈現, 效果就會出來了.

現在要利用 CSS3 的 selector 來進行這個操作, 也就是 nth-child 的語法. 來看看怎麼用吧!

基本上這個 selector 寫在 tr 後, 如:

tr:nth-child(odd)
這樣自然就會是在奇數行應用對應的 css, 可以參考 http://sample.diary.tw/32/1.htm 的 List1.
List1 用的 css 如下:

當然若是需要選擇偶數行, 則可以使用 nth-child(even) 即可.

下面介紹選擇若是需要每 3行一次, 則可以利用以下語法:

tr:nth-child(3n)
自然就會是每 3行為選擇到的, 可以參考 http://sample.diary.tw/32/1.htm 的 List2.
List2 用的 css 如下:

所以這裡出個題目, odd 及 even 等同於什麼呢? 分別為 2n+1 及 2n, 有興趣的朋友們可以自行試看看.

另外再來看一個更複雜的, 3行, 但用兩色, css 就會多一點:

效果請參考 http://sample.diary.tw/32/1.htm 的 List3.

這個"第n個小孩"選擇器用的法, 可以參考這裡: http://www.qianduan.net/useful-nth-child-recipies.html , 其實就是數學的代數式, n從 0 開始, 1次加 1, 所以以下為幾種可能:

n+5 代表著第 5, 6, 7, 8, 9....
-n+3 代表著第 3, 2, 1
2n 代表著 2, 4, 6, 8... (因為沒有第 0個, 也等同於 even)
2n+1 代表著 1, 3, 5, 7... (也等同於 odd)
3n 代表著 3, 6, 9 ...

這樣就容易看懂了!
top




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


 Waiting...