標有‘css’的文章

自適網頁RWD開發心得

最近大家有發現部落格的樣子隨著日子在偷偷的改變嗎? 是的!最近我在進行部落格的版面小修改! 主要訴求是要將版面改版成具有專業感、清楚、易讀, 然後呀,本部落格現在開始支援Responsive Web Design囉!(灑花~~灑花!! 其實自適網頁說穿了,只是用多組的CSS,可以在不同瀏覽環境下切換畫面的CSS, 這可以讓同一個網頁在手機以及電腦上,呈現不一樣的樣子。 RWD一般最常見是使用media queries,利用條件設定去設定裡面所設定的CSS要在何種狀況被使用。 我的開發心得 那這次的改版過程中,下面幾點是我覺得在開發RWD時要去注意的 若有需要使用JS去做網頁動態,不要將CSS直接在JS裡面加,例如 $(“.content”).css(“display”,”none”);//js 類似上面的這種的作法都要通通避免,JS一定要避免掉所有和版面有關的設定。 像上面這種寫法,應改成: $(“.content”).addClass(“display-none”);//js .display-none{display:none;}/*CSS*/ 這樣可以避免在切換為不同顯示方式時彼 […]

繼續閱讀...

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= […]

繼續閱讀...