in

Darkthread

黑暗執行緒
All Tags » CSS (RSS)

Browse by Tags

  • 【笨問題】Inline-Block元素多出來的間隙

    一個很初級但常見的HTML問題 - 已將margin設為零,但兩個inline-block元素間存在消不掉的空隙。 實例如下: <! DOCTYPE html > < html > < head > < meta charset ="utf-8" > < title > Inline-Block Test </ title > < style > .layout > span { display: inline-block; background-color: lightblue; width...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 11-01-2014
  • 【茶包射手日記】在VS2013修改SCSS後未產生CSS

    接獲同事報案,在 Visual Studio 2013 發生修改 SCSS 後未更新 CSS 的狀況,檢查確認 WebEssentials 已設定成存檔後編譯(如下),重啟 VS2013 問題未排除。 最後想到一個可能,SCSS 有錯導致編譯失敗,因而沒更新 CSS。回頭檢視 SCSS,果然找到一處宣告變數寫在呼叫處後方的錯誤,修正後 SCSS 就順利編譯產生 CSS了。 回頭檢討,一開始未考量語法錯誤是因為SCSS 語法出錯時預覽視窗應有明顯提示,很難被忽略,下方 Error List 也會有錯誤項目(雖然不一定會有檔名及錯誤訊息): 當 SCSS 有錯,編譯網站仍會出現編譯成功訊息(Build...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 09-22-2014
  • SCSS初體驗

    終於,CSS麻瓜也走到這一步! 專案進入網頁排版配置微調階段,陸續加進各式CSS巧門,例如: 依視窗寬度自動隱藏 、 多語系按鈕圖檔切換 、依父容器Class切換顯示效果... 東西愈加愈多的下場是style.css愈來愈肥,充斥錯綜複雜的樣式語法,更要命的是因技巧生硬搞出一堆複製貼上、寫死的尺寸數字,依照寫C#、JavaScript的習慣,搞到如此複雜又難以維護,讓人如坐針氈~ 每天打開醜陋的CSS修修改改,終於搞到自己都受不了,想起之前聽過的 Sass /SCSS,透過巢狀結構、變數、運算、函式等技巧降低CSS的複雜度,將樣式設定內容結構化及模組化,可大幅減輕維護的痛苦。是該練等升級,學習使用高檔CSS兵器的時候了...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 05-07-2014
  • 【答客問】用CSS實現上下欄排版切換

    網友小黑 提問 : 網頁配置分為上下兩欄,上欄高度固定,下欄佔滿剩餘空間。當上欄隱藏時下欄佔滿全部版面,上欄顯示時恢復原有版面配置,應如何實作? 一時技癢,順便也想測驗自己的CSS技巧,拿來當家庭作業暖暖手指。 在頁面放入兩個<div>當成上下欄容器,上欄<div class="top">指定height固定高。要讓下欄<div class="bottom">佔滿剩餘空間,可用 position: absolute 配合left:0; right: 0; bottom: 0;讓<div>向左、右、下方延伸佔滿空間...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 03-06-2014
  • CSS筆記-依視窗寬度自動隱藏

    專案需求,需實現以下效果: 資訊列有三個元素,藍色部分為主要顯示內容,綠色區塊(Block 1)及紅色區塊(Block 2)靠緊右側為次要資訊。當視窗寬度不足,綠色及紅色區塊需自動隱藏,避免遮蔽藍色區塊的文字。 JavaScript熟手會優先想到攔截 window.onresize事件 ,再依視窗寬度決定Block1或Block2是否隱藏,其實CSS也有武器應付這類情境,不用寫半行程式,靠瀏覽器內建功能就搞定。 過去 介紹 過的 CSS @media ,其支援max-width、min-width條件參數,讓某段CSS宣告只在特定視窗寬度生效。此一彈性讓設計師得以針對不同螢幕解析度加上額外設定...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 02-24-2014
  • CODE-使用CSS實現按鈕圖檔切換

    最近處理到網頁多語系動態切換,部分按 鈕採圖檔形式(需為每個語系分別製作圖檔,愛美得多付出些代價),因此切換語系時需變更按鈕圖檔來源,切換效果如下: 若是以前,遇到這類需求不多思索,抄起jQuery上就對了! 訂閱切換選項click事件,取得要切換語系,改變<img> src指向該語系對應的圖檔,再調整語系選項class,使已選取項目呈現不同顏色即大功告成,程式範例如下所示: 線上展示 <! DOCTYPE html > < html xmlns ="http://www.w3.org/1999/xhtml" > < head >...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 01-29-2014
  • IE9 Bug-滑鼠移過導致高度增加

    日前曾遇此蟲,爬文解決而未寫KB。今日同事再遇,腦中只餘殘存印象,戳力苦思蒐羅,方復拾回,嗔甚,為文誌之以杜後患。 網友 Brian Richards 對這個問題做了清楚的分析,也提交到 MS Connect ,其發生條件包含: DIV設為overflow: auto且指定寬度 DIV內含TABLE,寬於DIV而產生水平捲軸 TD中元素使用CSS :hover進行樣式變化 以下範例可重現問題: <! DOCTYPE html > < html > < head > < meta charset = utf-8 /> < title >...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 09-09-2013
  • 【CSS新手筆記】Box-Sizing

    為了解決padding影響寬度造成破版的問題,新學會一個CSS屬性: Box-Sizing 。 Box-Sizing只決定一事件: 矩型元素在計算寬度及高度時,border及padding為內含還是外加? (參考: Box Model ) 而其設定值有三種: content-box、border-box及padding-box。預設值為content-box,意指元素實際寬高等於CSS指定寬高再加上border/padding(外加)、border-box時則border/padding為內含,元素的實際寬高即為CSS所指定寬高,而扣除border/padding後才是呈顯內容元素的範圍。支援padding...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 08-10-2013
  • 【CSS新手筆記】左欄固定,右欄佔滿剩餘空間

    寫了好幾年網頁,卻一直是CSS新手,最近一年才比較認真研究個中奧妙,也慢慢解開一些原本搞不定的小眉角,說穿了不複雜,但相信我肯定不是地球最後一個發現的網頁攻城獅,故筆記分享,如高手發現有誤或另有妙法,請不吝指正。 有個常遇到的需求,我卻從沒弄懂過: 分成多個直欄,左方直欄寬度固定,最右欄佔滿剩餘寬度。直到後來學會了利用float排列,才慢慢找到解法: 以上解法是將左側的兩個<div>設成float: left,使其向左貼齊排列,而最後一個<div>要使用overflow: hidden的密技,讓它變成一個BFC( Block Formatting Context ),BFC會自成一個區塊...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 07-26-2013
  • 【CSS新手筆記】小探position: absolute應用

    寫了好幾年網頁,卻一直是CSS新手,最近一年才比較認真研究個中奧妙,也慢慢解開一些原本搞不定的小眉角,說穿了不複雜,但相信我肯定不是地球最後一個發現的網頁攻城獅,故筆記分享,如高手發現有誤或另有妙法,請不吝指正。 我對於position: absolute的認識是很粗淺的,印象還停留在ASP.NET 1.1時代WebForm的 Grid Layout Mode ,啟用後網頁的控制項會變成像Window Form一樣採絕對座標,可拖拉擺放到任意位置。當時知道背後是透過position: absolute再加上top、left等CSS設定完成的,近十年下來一直以為所謂的position: absolute就是"以整個網頁為座標基準擺放元素"...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 07-22-2013
第2頁,共5頁 (41個項目) < 上一頁 1 2 3 4 5 下一頁 >
Powered by Community Server (Non-Commercial Edition), by Telligent Systems