in

Darkthread

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

Browse by Tags

  • 使用 CSS 實現標題單行置中多行靠左

    跟同事討論到一個需求,要在顯示文章的網頁實現「標題只有一行時置中顯示;若文字較多折行時則靠左對齊」的效果。起初程序員大腦想到的做法是用 JavaScript 依文字長度動態調整 text-align 樣式,但由於折行與否是瀏覽器依字型大小、容器寬度自行裁量,難以依據字數直接推算,於是我開始揣摩由文字元素高度偵測行數的雞鳴狗盜招術... 爬文 後才發現我把事情想得太複雜了,這個需求用 CSS 就能搞定,一行程式都不用寫。做法是用 <div> 包住 display: inline-block 的 <span>,將 <div> 設成 text-align: center...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 11-30-2017
  • Chrome 網頁中文變醜之謎

    我習慣將 Chrome 標準字型設成 思源黑體字型 , 除非網頁硬將 font-family 指定成細明體(例如: Mobile01),換了字型讓網頁質感變好,比新細明體賞心悅目許多。 Pocket 是我慣用的稍後再讀服務,在 FB 或爬文時看到不急著看但值得花時間讀的相關文章,我會先丟進 Queue 裡收藏,有空再讀。在使用 Pocket 網頁介面閱讀文章時我注意到一件事 – 文字閱讀模式(不開啟原始網頁,改用 Pocket 自訂樣式呈現文章內容) 下,標題字型是 Chrome 預設的思源黑體沒錯,但內文部分中文變得很醜,但不是新細明體。 原以為是 CSS 被設成某種特殊中文字型,但使用 F12...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 11-18-2017
  • 小技巧-為text-overflow: ellipsis增加完整文字顯示

    CSS 的 text-overflow: ellipsis 刪節號效果 可讓長度不一的文字等寬顯示,遇到版面空間有限又必須整齊排列時很好用,但套用刪節號樣式後看不到完整文字,尤其遇上文字前半截相同時更是難以區別,是一大困擾。為此,我的慣用解法是為套用 ellipsis 的文字元素加上 title Attribute 存入完整文字,將滑鼠移到文字上停留就能看到原始文字,問題迎刃而解。 每次套用 ellipsis 還要額外加 title 有點囉嗦,我寫了一小段  jQuery 讓程序自動化,範例如下提供大家參考: Live Demo <! DOCTYPE html > <...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 02-03-2016
  • 行動瀏覽效果將影響Google搜尋排名

    不久前接到Google Webmaster Tool通知,說我的網站有超過2000個網頁不利行動瀏覽,造成智慧型手機使用者閱讀困難。登入網站管理員工具一看,冒出一個行動裝置可用性報表。嘖,幾乎所有的網頁都不及格!問題包括字型過小、觸控元素距離太近不易點擊、未設定檢視點(ViewPort)、未依檢視點調整內容大小(不需橫向捲動就能看到完整內容)… 等。 部落格的CSS Style是八年前定稿的,當初做夢也想不到,時代演變到人手一機成天滑。另一方面,許多因應行動裝置的HTML、CSS規格都是近幾年才制定的。在自動步槍已是基本配備的時代,還拿著抗戰時期的盒子炮跟人火拼,下場當然不是慘字可以形容的。嗯...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 04-24-2015
  • Font Awesome,果然厲害!

    在同事專案發現好物- FontAwesome ! 用字型檔配合CSS顯示圖示已非新鮮事(例如: Kendo UI 、 Bootstrap ),但看過Font Awesome的威力展示,還是不禁讚嘆,真的好厲害! 除了圖示數量多(完整圖示清單可參考 官網 ),Font Awesome最強大之處,在於只用CSS樣式就實現尺寸放大、旋轉、鏡像、360度旋轉動畫、疊圖組合新圖示等神奇效果。(所以,Font Awesome的CSS設定檔也是偷學CSS技巧的好地方呢!) 先來個簡單的威力展示:(完整程式碼及線上展示附於文末) 怎麼安裝到專案裡呢?到官網下載解壓縮再自行複製到專案裡?不好不好,這年頭還鑽木取火會被人笑...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 04-01-2015
  • 【笨問題】在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等含糊訊息,右方預覽視窗則停留在前次成功編譯的結果,連怎麼死的都不知道,令人氣餒。 面對這種情境,我之前用的笨笨解法,是按Ctrl-Z取消所有修改,還原到上次成功編譯的狀態,再一點一點把修改加回去...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 02-05-2015
  • TIPS-為網頁加掛CSS動態更新鈕

    改用SCSS後,我在本機測試調整CSS的流程變成:瀏覽器F12開發者工具檢視CSS樣式 –> 回Visual Studio 2013調整SCSS –> SCSS存檔(VS2013編譯產生CSS)—> 瀏覽器重新載入網頁檢視修改結果。由於SPA(Single Page Application)專案每次載入後有一連串起始作業,只為了更新CSS重新載入HTML、重頭執行JavaScript嚴重拖慢開發節奏,做完動作要等半天才能看結果,對急驚風而言宛如酷刑,不另謀改善之道,遲早心臟病發。 Visual Studio 2013的 BrowserLink 功能強大,能將HTML、JavaScript及CSS修改後...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 01-02-2015
  • 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: both宣告,如下: demo 不過,此種設計邏輯並不算乾淨俐落...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 11-02-2014
  • 【笨問題】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
第1頁,共4頁 (39個項目) 1 2 3 4 下一頁 >
Powered by Community Server (Non-Commercial Edition), by Telligent Systems