快訊!我的新書登上天瓏網路書店11月份暢銷榜第一名啦!看過的都說讚!歡迎大家前往訂購!
>>>> AI 職場超神助手:ChatGPT 與生成式 AI 一鍵搞定工作難題 <<<<

CSS

  • ,

    自適網頁RWD開發心得

    最近大家有發現部落格的樣子隨著日子在偷偷的改變嗎? 是的!最近我在進行部落格的版面小修改! 主要訴求是要將版面改版成具有專業感、清楚、易讀, 然後呀,本部落格現在開始支援Responsive Web Design囉!(灑花~~灑花!! 其實自適網頁說穿了,只是用多組的CSS,可以在不同瀏覽環境下切換畫面的CSS, 這可以讓同一個網頁在手機以及電腦上,呈現不一樣的樣子。 RWD一般最常見是使用media queries,利用條件設定去設定裡面所設定的CSS要在何種狀況被使用。 我的開發心得 那這次的改版過程中,下面幾點是我覺得在開發RWD時要去注意的 若有需要使用JS去做網頁動態,不要將CSS直接在JS裡面加,例如 類似上面的這種的作法都要通通避免,JS一定要避免掉所有和版面有關的設定。 像上面這種寫法,應改成: 這樣可以避免在切換為不同顯示方式時彼此互鄉干擾到。 CSS選擇器的優先順序: 因為在套用時,會有共通的、在某些解析度才要使用的CSS設定。 假如當今天總共有四種不同瀏覽裝置有四種不同版面,其中想在某一種特別的裝置上套用一系列不同的CSS(只是改字體什麼等)。會需要更清楚的了解各種選擇方法在執行時的優先順序,才能用不同的選擇器去覆蓋原有設定。 這邊有關於選擇器優先順序的詳細說明:如何撰寫有效率的CSS選擇器(CSS Selector) HTML格式架構: 因為要應付多種的CSS套版,HTML的格式設計就很重要,應要能夠清楚表達各元素之間的子從關係,並且符合W3C的規範,這樣子在換CSS時才可以順利在不更改HTML的狀況下去更動顯示方式。 Media Queries設定方式…

  • CSS Vertical Align(用純CSS解決div垂直置中)

    本文出處:http://blog.yam.com/hanasan/article/35806444 本次要介紹的是CSS垂直置中(Vertical Align with css)的完整解決整理。 說實話這並不太容易,雖然不像水平置中 {margin:0 auto;} 那樣單純, 但仍有幾種方式可以作到,以下共有五種方式一一介紹。 每種使用方式各有其優、缺點,端看自己要置中的內容是「區塊」或是「文字」來取捨。 方法一 使用CSS table-cell屬性來完成,什麼是table-cell?簡單說就是針對一些html object附于它table的屬性(詳見此), 如果曾經使用過table來排版的網頁開發者,應該知道td的既有屬性valign,古早以前根本不會有垂直置中的問題,因為td下個 valign=”middle”就行了。 而table-cell即是可以將div模擬成表格(table)的儲存格(td),讓原本不存在vertical-align的div可以使用。 Sample Code HTML <div id=”wrap”> <div id=”cell”>…

  • ,

    JQuery選擇器

    1. 選擇所有的table 2. 選擇第N行(若有很多table則只會選第一個table的第N行) 3. 選擇第N行(若有很多table則會選擇每個table的第N行) 4. 選奇偶行 3. 選第一個元素 下面是相關選擇器的一個小範例 下面是顯示的結果 1,0 2,0 3,0 4,0 5,0 1,1 2,1 3,1 4,1 5,1 1,2 2,2 3,2…


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!