一步一腳印工作札記

專案中網頁需要播放 *.mp4 格式影片，HTML5 設定很簡單，影片也確定路徑及內容都沒問題，但卻無法播放，最後終於得到教訓 ^^...， 關鍵在於 IIS MIME (Multipurpose Internet Mail Extension) 類型中未加入該項 ，因此設定 IIS MIME 類型選項，並在 副檔名加入 .mp4 ， 類型加入 video/mp4  之後  重新啟動 IIS 站台 ，問題立馬解決 ^^ 真是令人興奮。學海無涯，知識永遠都在前面，等待後人不斷的發現進步。

最近看到一個小範例利用HTML5 加上 JQuery $.data 來做到動態改變顏色的方式， 覺得可以做個記錄下來，看完後對 $.data 的使用應該更為清楚。 HTML: <div class="color-list" data-color ="#330">改變背景色</div> JQuery: var selector = '.color-list' $(selector).css('background-color',function() {     return $(this).data('color') })

網頁中常會用到水平 tab 來排列，滑鼠移到上方時下方會出現一條底線，這是怎麼做到的呢? 讓我們看下去吧.... HTML : <ul> <li><a href="#intro">INTRO</a></li> <li><a href="#">PRO</a></li> <li><a href="#flip-3d">3D-FLIP</a></li> <li><a href="#slide">SLIDE</a></li> <li><a href="#switch">SWITCH</a></li> <li><a href="#water-fill">WATER FILL</a></li> </ul> PS: CSS 中要將 list 中的黑點去掉可用 list-style:none (自己常會忘記.. 那就寫下來吧) SCSS : ul{     list-type:none;    width:500px;    display:flex;   // 利用 flex 水平排列    justify-content:space-between;    // 平均分配空白    li{         a{                text-decoration:none;  //  隱藏底線                &:after{                      content:'\00a0';  // 寫入底線                      height:2px;  // 底線高度                      display:block;   // 利用 block 特性顯示到下方