2015-02-05 10:49 PM 0 5,212
在WebEssentials套件加持之下,Visual Studio 2013可以直接編修SCSS,每次存檔自動編譯出css、min.css及.map,非常方便。但初心者如我,寫錯語法在所難免,一旦造成SCSS無法編譯,Output視窗只會看到somethine went wrong、compi...
2015-01-02 06:54 PM 4 8,061
改用SCSS後,我在本機測試調整CSS的流程變成:瀏覽器F12開發者工具檢視CSS樣式 –> 回Visual Studio 2013調整SCSS –> SCSS存檔(VS2013編譯產生CSS)—> 瀏覽器重新載入網頁檢視修改結果。由於SPA(Single Page Appli...
2014-11-02 10:48 PM 0 6,457
前篇文章提到用float: left解決inline-block元素間隙問題,感謝保哥提醒,發現我忘了提到它的副作用,設定float: left或float:right之後,後方元素必須明確宣告clear:float/right/both清除浮動設定以免繼續受影響。例如,沿用前文範例,後方再加一...
2014-11-01 11:35 PM 5 22,178
一個很初級但常見的HTML問題 - 已將margin設為零,但兩個inline-block元素間存在消不掉的空隙。 實例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8">...
2014-09-22 10:28 PM 0 4,893
接獲同事報案,在 Visual Studio 2013 發生修改 SCSS 後未更新 CSS 的狀況,檢查確認 WebEssentials 已設定成存檔後編譯(如下),重啟 VS2013 問題未排除。 最後想到一個可能,SCSS 有錯導致編譯失敗,因而沒更新 CSS。回頭檢視 SCSS,果...
2014-05-07 11:11 PM 0 19,272
終於,CSS麻瓜也走到這一步! 專案進入網頁排版配置微調階段,陸續加進各式CSS巧門,例如: 依視窗寬度自動隱藏、多語系按鈕圖檔切換、依父容器Class切換顯示效果... 東西愈加愈多的下場是style.css愈來愈肥,充斥錯綜複雜的樣式語法,更要命的是因技巧生硬搞出一堆複製貼上、寫死的尺寸數...
2014-03-06 09:29 PM 4 9,423
網友小黑提問: 網頁配置分為上下兩欄,上欄高度固定,下欄佔滿剩餘空間。當上欄隱藏時下欄佔滿全部版面,上欄顯示時恢復原有版面配置,應如何實作? 一時技癢,順便也想測驗自己的CSS技巧,拿來當家庭作業暖暖手指。 在頁面放入兩個<div>當成上下欄容器,上欄<div c...
2014-02-24 08:10 PM 2 18,357
專案需求,需實現以下效果: 資訊列有三個元素,藍色部分為主要顯示內容,綠色區塊(Block 1)及紅色區塊(Block 2)靠緊右側為次要資訊。當視窗寬度不足,綠色及紅色區塊需自動隱藏,避免遮蔽藍色區塊的文字。 JavaScript熟手會優先想到攔截window.onresize事件,再依...
2014-01-30 08:10 AM 0 22,518
最近處理到網頁多語系動態切換,部分按鈕採圖檔形式(需為每個語系分別製作圖檔,愛美得多付出些代價),因此切換語系時需變更按鈕圖檔來源,切換效果如下: 若是以前,遇到這類需求不多思索,抄起jQuery上就對了! 訂閱切換選項click事件,取得要切換語系,改變<img> src指向...
2013-09-09 10:19 PM 0 5,635
日前曾遇此蟲,爬文解決而未寫KB。今日同事再遇,腦中只餘殘存印象,戳力苦思蒐羅,方復拾回,嗔甚,為文誌之以杜後患。 網友Brian Richards對這個問題做了清楚的分析,也提交到MS Connect,其發生條件包含: DIV設為overflow: auto且指定寬度 DIV...
2013-08-11 11:40 AM 0 32,707
為了解決padding影響寬度造成破版的問題,新學會一個CSS屬性: Box-Sizing。 Box-Sizing只決定一事件: 矩型元素在計算寬度及高度時,border及padding為內含還是外加? (參考: Box Model) 而其設定值有三種: content-box、border-b...
2013-07-27 08:11 AM 3 22,790
寫了好幾年網頁,卻一直是CSS新手,最近一年才比較認真研究個中奧妙,也慢慢解開一些原本搞不定的小眉角,說穿了不複雜,但相信我肯定不是地球最後一個發現的網頁攻城獅,故筆記分享,如高手發現有誤或另有妙法,請不吝指正。 有個常遇到的需求,我卻從沒弄懂過: 分成多個直欄,左方直欄寬度固定,最右欄佔滿剩...
2013-07-22 10:32 PM 3 13,468
寫了好幾年網頁,卻一直是CSS新手,最近一年才比較認真研究個中奧妙,也慢慢解開一些原本搞不定的小眉角,說穿了不複雜,但相信我肯定不是地球最後一個發現的網頁攻城獅,故筆記分享,如高手發現有誤或另有妙法,請不吝指正。 我對於position: absolute的認識是很粗淺的,印象還停留在ASP....
2013-05-18 01:50 PM 3 34,535
接獲報案,又出現IFrame無法佔滿網頁的問題: 原本以為是小菜一碟,這是五年前就知道的超級老哏,只需加上html,body { height: 100% }立刻藥到病除,檢視原始碼後卻讓我大吃一驚跌坐在地,網頁早就加上height: 100%,莫非茶包又變種了? <...
2013-05-05 10:06 AM 0 11,797
對CSS幼幼班學生(敝人在下小弟我)而言,"為什麼這團CSS設定會產生這樣的效果"常常是個謎,尤其在處理大小、位置議題,面對層層相套的容器,外加不同margin與padding,混搭height、inline-hight跟font-size相輝映,最後還得考量CSS繼承闗係,...
2013-04-22 08:00 AM 0 10,732
為了方便觸控操作,IE10針對<input>及<input type="password">分別提供了快速清除鈕(X圖示)以及密碼文字顯示鈕(小眼睛圖示)的功能: 快速清除鈕可取代觸控進行全選並刪除的一連串複雜動作,而密碼顯示鈕可協助使用者確認輸...