Category: css

0 5,212
在WebEssentials套件加持之下，Visual Studio 2013可以直接編修SCSS，每次存檔自動編譯出css、min.css及.map，非常方便。但初心者如我，寫錯語法在所難免，一旦造成SCSS無法編譯，Output視窗只會看到somethine went wrong、compi...

4 8,061
改用SCSS後，我在本機測試調整CSS的流程變成：瀏覽器F12開發者工具檢視CSS樣式 –> 回Visual Studio 2013調整SCSS –> SCSS存檔（VS2013編譯產生CSS）—> 瀏覽器重新載入網頁檢視修改結果。由於SPA（Single Page Appli...

0 6,457
前篇文章提到用float: left解決inline-block元素間隙問題，感謝保哥提醒，發現我忘了提到它的副作用，設定float: left或float:right之後，後方元素必須明確宣告clear:float/right/both清除浮動設定以免繼續受影響。例如，沿用前文範例，後方再加一...

0 4,893
接獲同事報案，在 Visual Studio 2013 發生修改 SCSS 後未更新 CSS 的狀況，檢查確認 WebEssentials 已設定成存檔後編譯（如下），重啟 VS2013 問題未排除。 最後想到一個可能，SCSS 有錯導致編譯失敗，因而沒更新 CSS。回頭檢視 SCSS，果...

0 19,272
終於，CSS麻瓜也走到這一步! 專案進入網頁排版配置微調階段，陸續加進各式CSS巧門，例如: 依視窗寬度自動隱藏、多語系按鈕圖檔切換、依父容器Class切換顯示效果... 東西愈加愈多的下場是style.css愈來愈肥，充斥錯綜複雜的樣式語法，更要命的是因技巧生硬搞出一堆複製貼上、寫死的尺寸數...

4 9,423
網友小黑提問: 網頁配置分為上下兩欄，上欄高度固定，下欄佔滿剩餘空間。當上欄隱藏時下欄佔滿全部版面，上欄顯示時恢復原有版面配置，應如何實作? 一時技癢，順便也想測驗自己的CSS技巧，拿來當家庭作業暖暖手指。 在頁面放入兩個<div>當成上下欄容器，上欄<div c...

2 18,357
專案需求，需實現以下效果: 資訊列有三個元素，藍色部分為主要顯示內容，綠色區塊(Block 1)及紅色區塊(Block 2)靠緊右側為次要資訊。當視窗寬度不足，綠色及紅色區塊需自動隱藏，避免遮蔽藍色區塊的文字。 JavaScript熟手會優先想到攔截window.onresize事件，再依...

0 22,518
最近處理到網頁多語系動態切換，部分按鈕採圖檔形式(需為每個語系分別製作圖檔，愛美得多付出些代價)，因此切換語系時需變更按鈕圖檔來源，切換效果如下: 若是以前，遇到這類需求不多思索，抄起jQuery上就對了! 訂閱切換選項click事件，取得要切換語系，改變<img> src指向...

0 5,635
日前曾遇此蟲，爬文解決而未寫KB。今日同事再遇，腦中只餘殘存印象，戳力苦思蒐羅，方復拾回，嗔甚，為文誌之以杜後患。 網友Brian Richards對這個問題做了清楚的分析，也提交到MS Connect，其發生條件包含: DIV設為overflow: auto且指定寬度 DIV...

0 32,707
為了解決padding影響寬度造成破版的問題，新學會一個CSS屬性: Box-Sizing。 Box-Sizing只決定一事件: 矩型元素在計算寬度及高度時，border及padding為內含還是外加? (參考: Box Model) 而其設定值有三種: content-box、border-b...

3 22,790
寫了好幾年網頁，卻一直是CSS新手，最近一年才比較認真研究個中奧妙，也慢慢解開一些原本搞不定的小眉角，說穿了不複雜，但相信我肯定不是地球最後一個發現的網頁攻城獅，故筆記分享，如高手發現有誤或另有妙法，請不吝指正。 有個常遇到的需求，我卻從沒弄懂過: 分成多個直欄，左方直欄寬度固定，最右欄佔滿剩...

3 13,468
寫了好幾年網頁，卻一直是CSS新手，最近一年才比較認真研究個中奧妙，也慢慢解開一些原本搞不定的小眉角，說穿了不複雜，但相信我肯定不是地球最後一個發現的網頁攻城獅，故筆記分享，如高手發現有誤或另有妙法，請不吝指正。 我對於position: absolute的認識是很粗淺的，印象還停留在ASP....

3 34,535
接獲報案，又出現IFrame無法佔滿網頁的問題: 原本以為是小菜一碟，這是五年前就知道的超級老哏，只需加上html,body { height: 100% }立刻藥到病除，檢視原始碼後卻讓我大吃一驚跌坐在地，網頁早就加上height: 100%，莫非茶包又變種了? <...

0 11,797
對CSS幼幼班學生(敝人在下小弟我)而言，"為什麼這團CSS設定會產生這樣的效果"常常是個謎，尤其在處理大小、位置議題，面對層層相套的容器，外加不同margin與padding，混搭height、inline-hight跟font-size相輝映，最後還得考量CSS繼承闗係，...

0 10,732
為了方便觸控操作，IE10針對<input>及<input type="password">分別提供了快速清除鈕(X圖示)以及密碼文字顯示鈕(小眼睛圖示)的功能: 快速清除鈕可取代觸控進行全選並刪除的一連串複雜動作，而密碼顯示鈕可協助使用者確認輸...