in

Darkthread

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

Browse by Tags

  • 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
  • 【茶包射手日記】長不高的IFrame

    接獲報案,又出現IFrame無法佔滿網頁的問題: 原本以為是小菜一碟,這是五年前就知道的 超級老哏 ,只需加上html,body { height: 100% }立刻藥到病除,檢視原始碼後卻讓我大吃一驚跌坐在地,網頁早就加上height: 100%,莫非茶包又變種了? <! DOCTYPE html > < html > < head > < title > Frame Height Issue, AGAIN! </ title > < style > html,body { height: 100%; } </ style...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 05-18-2013
  • CSS配置偵錯利器–Firefox Page Inspector 3D檢視

    對CSS幼幼班學生(敝人在下小弟我)而言,"為什麼這團CSS設定會產生這樣的效果"常常是個謎,尤其在處理大小、位置議題,面對層層相套的容器,外加不同margin與padding,混搭height、inline-hight跟font-size相輝映,最後還得考量CSS繼承闗係,結果往往叫人目炫神迷不知所以。 基本上IE的Dev Tools及Chrome的開發者工具都能剖析各元素的CSS設定、繼承套用計算,但Firefox的 Page Inspector 有個神奇的3D檢視功能,解構容器階層關係時尤其火力強大,廢話不多說,有圖有真相:
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 05-04-2013
第2頁,共4頁 (39個項目) < 上一頁 1 2 3 4 下一頁 >
Powered by Community Server (Non-Commercial Edition), by Telligent Systems