謝晒的PHP網頁設計

當我們幫一個html元素加上 page-break-after: always 這個CSS屬性，就代表當我們列印時，在這元素後要強制換頁，但要注意這個屬性只能加在區塊元素，且不能加在 空的div元素上。(參考來源: MDN web docs ) 正確用法： <div style="page-break-after: always;">內容內容內容</dv> 錯誤用法：(在空元素上使用) <div style="page-break-after: always;"></dv> 錯誤用法：(在行內元素上使用) <br style="page-break-after: always;"> ＊這種用法在 IE 瀏覽器上會有換頁效果，但在其它瀏覽器(例如: chrome)上是沒有作用的。

練習 CSS 選擇器 的小遊戲 參考: W3C CSS Selectors 參考網頁

html * {     font-family: 'Calibri Light',Helvetica,Arial,sans-serif !important; }

CSS中的多重選擇器（Multiple Selectors）包含空白或逗號 .one .two{}    /*必須要是在 one 裡面的 two，才會被選擇到*/ .one.two{}     /*同時具有 one 和 two 的 class 時，才能被 CSS 所選擇到到*/ .one, .two{}   /*有 one 或 two，都會被編輯器所選擇到*/

CSS中的多重選擇器（Multiple Selectors）包含空白或逗號 .one .two{}    /*必須要是在 one 裡面的 two，才會被選擇到*/ .one.two{}     /*同時具有 one 和 two 的 class 時，才能被 CSS 所選擇到到*/ .one, .two{}   /*有 one 或 two，都會被編輯器所選擇到*/

input 的 type="hidden"、或 jQuery 使用 hide()、或 CSS 賦予 display:none， 在 submit 後，還是會將值傳出，如果不想收到值，需要加上 disabled。 備註： type="hidden"、hide()、display:none 這三個行為都是將 css 的 display 值設為 none 範例

CSS 載入機制的未來趨勢

方法： css({"propertyname":"value","propertyname":"value",...}); 實作： $("p").css({"background-color":"yellow","font-size":"200%"});

W3 官網 寫得很清楚又有範例，請直接參考。 W3 官網

程式碼準則

善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度 短摘： table-layout: fixed 你如果利用 <table> 設定整個網頁版面，就會很容易發現網頁下載時會先看到白白的一片底色，最後才會突然出現網頁，這就是因為 table-layout 預設為 automatic 的關係。 只要將 <table> 的 table-layout 屬性設定成 fixed，並且再設定 width 屬性，就會明顯感覺到表格在下載 HTML 的過程中不會等待 </table> 讀完就會直接顯示表格內容，速度將會差非常多。

CSS教學－常用CSS簡寫大集合

font: 12px 'Helvetica Neue',Helvetica,Arial,'lucida grande',tahoma,verdana,arial,sans-serif;

學習 CSS 版面配置

文繞圖是常見的版面設計方式，如下： 語法也很簡單： <div>   <img src="..." style="float:right;" />   文字內容 </div> 但是，當文字較少時，就會發生圖片比 div 大，但是圖片卻無法將 div 撐開的情形，如下： 這時候就要靠一種叫 clearfix 的密技（hack），語法如下： <div style="overflow:auto;zoom:1;">   <img src="..." style="float:right;" />   文字內容 </div> 這樣就可以將 div 撐開了。 完整範例

div 的 display 預設值是 block ，所以他會自動撐滿容器，當我們設定 width 寬度時，預設是靠左的，所以需要靠 margin 來置中，如下： #div_id {   width:600px;   margin: 0 auto; } 因為現在手機上網很普及，當使用者螢幕小於 div 的 width 寬度，會造成閱讀上的困難，所以我們要稍微修改一下CSS，如下： #div_id {   max-width:600px;   margin: 0 auto; } 這樣就OK了～

最粗淺的算法 1cm = 38px

以蘋果官網的 CSS 為例 body{   font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } 其中 12px 代表字型大小，18px 則代表行高。

不用js寫出族譜

Bootstrap  簡潔，直覺，強大的前端框架，讓網頁開發更快速更簡單