標籤彙整: jquery

CSS ol/ul li 遞減 (css ol/ul li reversed)

最近在做網頁時突然需要遞減排序編號的功能,在html5的架構下<ol>可以直接加reversed屬性,但如果是用<ul>標籤的話,以下也提供一個解決方案。
css方法

ul {
	list-style-type: none;
	counter-reset: item 142;
	/*counter-reset: item(自定變數) 142(項目總數);*/
}
ul > li {
	counter-increment: item -1;
}
ul > li:before {
	content: counter(item);
}

html5方法

<ol reversed>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>

CSS3 calc()函式 寬width / 高height 不同單位( percent, px, em, vh, vw ) 加減乘除運算Math

calc()函式,可以做任何數字形態的屬性值運算

 ● 數字形態屬性值的屬性 CSS property values with number 
寬width 
高height 
內距padding 
外距margin 
框border-width 
placement top right bottom left
等等etc…
閱讀全文 CSS3 calc()函式 寬width / 高height 不同單位( percent, px, em, vh, vw ) 加減乘除運算Math