Browse by Tags

小技巧-為text-overflow: ellipsis增加完整文字顯示
CSS 的 text-overflow: ellipsis 刪節號效果 可讓長度不一的文字等寬顯示,遇到版面空間有限又必須整齊排列時很好用,但套用刪節號樣式後看不到完整文字,尤其遇上文字前半截相同時更是難以區別,是一大困擾。為此,我的慣用解法是為套用 ellipsis 的文字元素加上 title Attribute 存入完整文字,將滑鼠移到文字上停留就能看到原始文字,問題迎刃而解。 每次套用 ellipsis 還要額外加 title 有點囉嗦,我寫了一小段  jQuery 讓程序自動化...
Posted 03 February 2016 10:44 PMJeffrey | 2 comment(s) 3,616
Filed under: ,
行動瀏覽效果將影響Google搜尋排名
不久前接到Google Webmaster Tool通知,說我的網站有超過2000個網頁不利行動瀏覽,造成智慧型手機使用者閱讀困難。登入網站管理員工具一看,冒出一個行動裝置可用性報表。嘖,幾乎所有的網頁都不及格!問題包括字型過小、觸控元素距離太近不易點擊、未設定檢視點(ViewPort)、未依檢視點調整內容大小(不需橫向捲動就能看到完整內容)… 等。 部落格的CSS Style是八年前定稿的,當初做夢也想不到,時代演變到人手一機成天滑。另一方面,許多因應行動裝置的HTML、CSS規格都是近幾年才制定的...
Posted 25 April 2015 09:47 AMJeffrey | 4 comment(s) 5,875
Filed under: ,
Font Awesome,果然厲害!
在同事專案發現好物- FontAwesome ! 用字型檔配合CSS顯示圖示已非新鮮事(例如: Kendo UI 、 Bootstrap ),但看過Font Awesome的威力展示,還是不禁讚嘆,真的好厲害! 除了圖示數量多(完整圖示清單可參考 官網 ),Font Awesome最強大之處,在於只用CSS樣式就實現尺寸放大、旋轉、鏡像、360度旋轉動畫、疊圖組合新圖示等神奇效果。(所以,Font Awesome的CSS設定檔也是偷學CSS技巧的好地方呢!) 先來個簡單的威力展示:(完整程式碼及線上展示附於文末...
Posted 01 April 2015 10:01 PMJeffrey | with no comments 15,995
Filed under:
【笨問題】在Visual Studio 2013顯示SCSS詳細錯誤訊息
在 WebEssentials套件 加持之下,Visual Studio 2013可以直接編修 SCSS ,每次存檔自動編譯出css、min.css及.map,非常方便。但初心者如我,寫錯語法在所難免,一旦造成SCSS無法編譯,Output視窗只會看到somethine went wrong、compilation failed: The service failed to response to this request等含糊訊息,右方預覽視窗則停留在前次成功編譯的結果,連怎麼死的都不知道,令人氣餒...
Posted 05 February 2015 10:49 PMJeffrey | with no comments 3,639
Filed under:
TIPS-為網頁加掛CSS動態更新鈕
改用SCSS後,我在本機測試調整CSS的流程變成:瀏覽器F12開發者工具檢視CSS樣式 –> 回Visual Studio 2013調整SCSS –> SCSS存檔(VS2013編譯產生CSS)—> 瀏覽器重新載入網頁檢視修改結果。由於SPA(Single Page Application)專案每次載入後有一連串起始作業,只為了更新CSS重新載入HTML、重頭執行JavaScript嚴重拖慢開發節奏,做完動作要等半天才能看結果,對急驚風而言宛如酷刑,不另謀改善之道,遲早心臟病發...
Posted 02 January 2015 06:54 PMJeffrey | 4 comment(s) 5,226
Filed under:
TIPS-清除CSS float設定
前篇文章 提到用float: left解決inline-block元素間隙問題,感謝保哥提醒,發現我忘了提到它的副作用,設定float: left或float:right之後,後方元素必須明確宣告clear:float/right/both清除浮動設定以免繼續受影響。例如,沿用前文範例,後方再加一個<div>(顯示模式為display:block),將繼續套用float: left被接在A、B、C後方。 demo 要解決問題,最直接的做法是為<div class="another">加上clear...
Posted 02 November 2014 10:48 PMJeffrey | with no comments 4,159
Filed under:
【笨問題】Inline-Block元素多出來的間隙
一個很初級但常見的HTML問題 - 已將margin設為零,但兩個inline-block元素間存在消不掉的空隙。 實例如下: <! DOCTYPE html > < html > < head > < meta charset ="utf-8" > < title > Inline-Block Test </ title > < style > .layout > span { display...
Posted 01 November 2014 11:35 PMJeffrey | 4 comment(s) 10,019
Filed under:
【茶包射手日記】在VS2013修改SCSS後未產生CSS
接獲同事報案,在 Visual Studio 2013 發生修改 SCSS 後未更新 CSS 的狀況,檢查確認 WebEssentials 已設定成存檔後編譯(如下),重啟 VS2013 問題未排除。 最後想到一個可能,SCSS 有錯導致編譯失敗,因而沒更新 CSS。回頭檢視 SCSS,果然找到一處宣告變數寫在呼叫處後方的錯誤,修正後 SCSS 就順利編譯產生 CSS了。 回頭檢討,一開始未考量語法錯誤是因為SCSS 語法出錯時預覽視窗應有明顯提示,很難被忽略,下方 Error List 也會有錯誤項目...
Posted 22 September 2014 10:28 PMJeffrey | with no comments 3,180
Filed under: ,
SCSS初體驗
終於,CSS麻瓜也走到這一步! 專案進入網頁排版配置微調階段,陸續加進各式CSS巧門,例如: 依視窗寬度自動隱藏 、 多語系按鈕圖檔切換 、依父容器Class切換顯示效果... 東西愈加愈多的下場是style.css愈來愈肥,充斥錯綜複雜的樣式語法,更要命的是因技巧生硬搞出一堆複製貼上、寫死的尺寸數字,依照寫C#、JavaScript的習慣,搞到如此複雜又難以維護,讓人如坐針氈~ 每天打開醜陋的CSS修修改改,終於搞到自己都受不了,想起之前聽過的 Sass /SCSS,透過巢狀結構、變數、運算、函式等技巧降低CSS的複雜度...
Posted 07 May 2014 11:11 PMJeffrey | with no comments 14,450
Filed under:
【答客問】用CSS實現上下欄排版切換
網友小黑 提問 : 網頁配置分為上下兩欄,上欄高度固定,下欄佔滿剩餘空間。當上欄隱藏時下欄佔滿全部版面,上欄顯示時恢復原有版面配置,應如何實作? 一時技癢,順便也想測驗自己的CSS技巧,拿來當家庭作業暖暖手指。 在頁面放入兩個<div>當成上下欄容器,上欄<div class="top">指定height固定高。要讓下欄<div class="bottom">佔滿剩餘空間,可用 position: absolute 配合left...
Posted 06 March 2014 09:29 PMJeffrey | 4 comment(s) 5,995
Filed under:
CSS筆記-依視窗寬度自動隱藏
專案需求,需實現以下效果: 資訊列有三個元素,藍色部分為主要顯示內容,綠色區塊(Block 1)及紅色區塊(Block 2)靠緊右側為次要資訊。當視窗寬度不足,綠色及紅色區塊需自動隱藏,避免遮蔽藍色區塊的文字。 JavaScript熟手會優先想到攔截 window.onresize事件 ,再依視窗寬度決定Block1或Block2是否隱藏,其實CSS也有武器應付這類情境,不用寫半行程式,靠瀏覽器內建功能就搞定。 過去 介紹 過的 CSS @media ,其支援max-width、min-width條件參數...
Posted 24 February 2014 08:10 PMJeffrey | 2 comment(s) 8,791
Filed under:
CODE-使用CSS實現按鈕圖檔切換
最近處理到網頁多語系動態切換,部分按 鈕採圖檔形式(需為每個語系分別製作圖檔,愛美得多付出些代價),因此切換語系時需變更按鈕圖檔來源,切換效果如下: 若是以前,遇到這類需求不多思索,抄起jQuery上就對了! 訂閱切換選項click事件,取得要切換語系,改變<img> src指向該語系對應的圖檔,再調整語系選項class,使已選取項目呈現不同顏色即大功告成,程式範例如下所示: 線上展示 <! DOCTYPE html > < html xmlns ="http...
Posted 30 January 2014 08:10 AMJeffrey | with no comments 14,159
Filed under:
IE9 Bug-滑鼠移過導致高度增加
日前曾遇此蟲,爬文解決而未寫KB。今日同事再遇,腦中只餘殘存印象,戳力苦思蒐羅,方復拾回,嗔甚,為文誌之以杜後患。 網友 Brian Richards 對這個問題做了清楚的分析,也提交到 MS Connect ,其發生條件包含: DIV設為overflow: auto且指定寬度 DIV內含TABLE,寬於DIV而產生水平捲軸 TD中元素使用CSS :hover進行樣式變化 以下範例可重現問題: <! DOCTYPE html > < html > < head >...
Posted 09 September 2013 10:19 PMJeffrey | with no comments 4,455
Filed under: ,
【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所指定寬高...
Posted 11 August 2013 11:40 AMJeffrey | with no comments 20,613
Filed under:
【CSS新手筆記】左欄固定,右欄佔滿剩餘空間
寫了好幾年網頁,卻一直是CSS新手,最近一年才比較認真研究個中奧妙,也慢慢解開一些原本搞不定的小眉角,說穿了不複雜,但相信我肯定不是地球最後一個發現的網頁攻城獅,故筆記分享,如高手發現有誤或另有妙法,請不吝指正。 有個常遇到的需求,我卻從沒弄懂過: 分成多個直欄,左方直欄寬度固定,最右欄佔滿剩餘寬度。直到後來學會了利用float排列,才慢慢找到解法: 以上解法是將左側的兩個<div>設成float: left,使其向左貼齊排列,而最後一個<div>要使用overflow:...
Posted 27 July 2013 08:11 AMJeffrey | 3 comment(s) 17,508
Filed under:
更多文章 下一頁 »

搜尋

Go

<July 2017>
SunMonTueWedThuFriSat
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication