網頁設計技巧:8個簡單和實用的CSS技巧
最好的解決方案往往是最簡單的,這裏列出8個CSS技巧,非常簡單,簡單到只需要寫一行代碼,只需要定義一個屬性參數。非常適合學習CSS的新手朋友閱讀。
- 使用line-height來達到垂直居中
- 使用overflow防止内容溢出
- 強制在同一行內顯示所有內文
- 始終顯示Firefox垂直捲軸
- 内容置中
- 移除IE的默認捲軸
- 強制列印時自動分頁
- 移除點擊鏈結時的虛線框
line-height:24px;當你有一個固定高度的區域,你可以通過把line-height和區域的高度設為相同的數值而達到垂直置中。 Demo
#main{ overflow:hidden; }這個應該基本都知道了。可以在限制內容塊的寬度的前提下,隱藏那些有可能溢出的文本或圖像。雖然會導致一些內容被隱藏,但總比溢出撐開影響頁面佈局要好。
a{ white-space:nowrap;}強制在同一行內顯示所有內文,直到內文結束或者< br>。
html{ overflow:-moz-scrollbars-vertical;}Firefox默認是不顯示垂直捲軸的,而這個參數設置將能讓它始終顯示垂直捲軸。
margin:0 auto;這個大家都應該知道了,但是這個設置並不是在所有流覽中都有效。並且,在相同的流覽器中,如果受其他影響,也很可能會失去效果。
textarea{ overflow:auto;}IE默認是顯示內文框的垂直捲軸,這個參數將移除這個捲軸,除非輸入的內容超過內文框的高度。
h2{ page-break-before:always;}這個屬性參數可以「始終在物件之前插入頁分割符」,主要用於需要列印的頁面設置。
a:active, a:focus{ outline:none;}大家都知道,點擊鏈結時,通常會出現虛線框,影響美觀。這個屬性設置可以移除點擊時的虛線框。
0 留言:
發佈留言