Try   HackMD

CSS 34. Opacity / 透明度設定與簡介

使目標元素透明度改變

  • opacity 可設定範圍: 0 ~ 1.0 // 0 為完全透明。
<h1>標題測試</h1>

h1 {
  display: inline-block;
  background: red;
}

設定 h1 的 opacity:

h1 {
    // 設定: 0.5
  display: inline-block;
  background: red;
  opacity: .5;
}
  • 瀏覽其差異:

tags: 2022 網頁開發全攻略教程 / CSS篇章 - CSS 進階-1
Last changed by 
 
Wilson Chen
0
177

Read more

CSS 33. table styling / 表格樣式設計

border-collapse: &#x5047;&#x8A2D;&#x6211;&#x6709;&#x500B;&#x8868;&#x683C;&#x9577;&#x9019;&#x6A23;: &lt;table&gt; &lt;tr&gt; &lt;th&gt;&#x6A19;&#x984C;&#x4E00;&lt;/th&gt; &lt;th&gt;&#x6A19;&#x984C;&#x4E8C;&lt;/th&gt; &lt;th&gt;&#x6A19;&#x984C;&#x4E09;&lt;/th&gt; &lt;/tr&gt;

Dec 10, 2022
CSS 32. List Styling / ul,ol Tag

&#x5728; CSS &#x88FD;&#x4F5C;&#x6642;&#xFF0C;&#x53EF;&#x4EE5;&#x88AB;&#x7DE8;&#x8F2F;&#x7684;&#x9805;&#x76EE;&#x6A23;&#x5F0F;: &#x4EE5;&#x6B64; HTML ul &#x505A;&#x7BC4;&#x4F8B;: &lt;ul&gt; &lt;li&gt;2008:&#x5718;&#x5718;&#x5713;&#x5713;&#x5230;&#x53F0;&#x7063;&lt;/li&gt; &lt;li&gt;2013:&#x5713;&#x4ED4;&#x51FA;&#x751F;&lt;/li&gt; &lt;li&gt;&#x9084;&#x6C92;&#x6709;&#x5176;&#x4ED6;&#x718A;&#x8C93;&lt;/li&gt; &lt;/ul&gt;

Dec 10, 2022
CSS 31. CSS default value

&#x4EC0;&#x9EBC;&#x662F; default value &#x6307; HTML Tag &#x672C;&#x8EAB;&#x5177;&#x5099;&#x7684; CSS &#x6548;&#x679C;: &lt;h1&gt;&#xFF0C;&#x672C;&#x8EAB;&#x7684;&#x6587;&#x5B57;&#x5927;&#x5C0F;&#x5C31;&#x6BD4;&#x8F03;&#x5927;&#xFF0C;font-size &#x5C31;&#x975E;&#x5E38;&#x660E;&#x986F;&#x3002; &lt;div&gt;&#xFF0C;&#x672C;&#x8EAB;&#x5177;&#x5099; - display:block;&#x7B49;&#x3002; &#x900F;&#x904E; box-model &#x700F;&#x89BD;&#x4E26;&#x4E14;&#x89C0;&#x5BDF; Tag &#x672C;&#x8EAB;&#x7684; default styling

Dec 10, 2022
CSS 30. position - fixed / 將物件定位在此

&#x7BC4;&#x4F8B;: https://codepen.io/rrpaqjcq/pen/wvXZzyJ

Dec 9, 2022
Read more from Wilson Chen
Published on HackMD