Claire's Blog
I'm a mother of two precious kids and a professional programmer.
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…
Search
About Me
17年資歷女工程師，專精於動畫、影像辨識以及即時串流程式開發。經常組織活動，邀請優秀的女性分享她們的技術專長，並在眾多場合分享自己的技術知識，也活躍於非營利組織，辦理活動來支持特殊兒及其家庭。期待用技術改變世界。
