JQuery

  • ,

    自適網頁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設定方式…

  • ,

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