| 導購 | 订阅 | 在线投稿
分享
 
 
 

css技巧-經典中的經典

2008-08-29 06:38:39  編輯來源:互聯網  简体版  手機版  移動版  評論  字體: ||

刪除鏈接上的虛線框

a:active, a:focus {

outline:none;

}

Firefox 默認會在鏈接獲得焦點(或者點擊時)加上條虛線框,使用上面的屬性可以刪除。

最簡單的 CSS 重置

* {

margin: 0; padding: 0

}

不讓鏈接折行

a {

white-space:nowrap;

}

上面的設定就能避免鏈接折行,不過個人建議長鏈接會有相應的這行(有關換行方面的討論,參看圓心的記錄)。

始終讓 Firefox 顯示滾動條

html {

overflow:-moz-scrollbars-vertical;

}

更多的 Mozilla/Firefox 私有 CSS 屬性可以參考這裏。需跨浏覽器的支持,也可以使用

body, html {

min-height:101%;

}

使用 line-height 垂直居中

line-height:24px;

使用固定寬度的容器並且需要一行垂直居中時,使用 line-height 即可(高度與父層容器一致),更多的垂直居中總結可以看這裏。

清除容器浮動

#main {

overflow:hidden;

}

使塊元素水平居中

margin:0 auto;

其實就是

margin-left: auto;

margin-right: auto;

這個技巧基本上所有的 CSS 教科書都會有說明,別忘記給它加上個寬度。Exploer 下也可以使用

body{

text-align: center;

}

然後定義內層容器

text-align: left;

恢複。

隱藏 Exploer textarea 的滾動條

textarea {

overflow:auto;

}

Exploer 默認情況下 textarea 會有垂直滾動條(不要問我爲什麽)。

設置打印分頁

h2 {

page-break-before:always;

}

page-break-before 屬性能設置打印網頁時的分頁。

刪除鏈接上的虛線框 a:active, a:focus { outline:none; } Firefox 默認會在鏈接獲得焦點(或者點擊時)加上條虛線框,使用上面的屬性可以刪除。 最簡單的 CSS 重置 * { margin: 0; padding: 0 } 不讓鏈接折行 a { white-space:nowrap; } 上面的設定就能避免鏈接折行,不過個人建議長鏈接會有相應的這行(有關換行方面的討論,參看圓心的記錄)。 始終讓 Firefox 顯示滾動條 html { overflow:-moz-scrollbars-vertical; } 更多的 Mozilla/Firefox 私有 CSS 屬性可以參考這裏。需跨浏覽器的支持,也可以使用 body, html { min-height:101%; } 使用 line-height 垂直居中 line-height:24px; 使用固定寬度的容器並且需要一行垂直居中時,使用 line-height 即可(高度與父層容器一致),更多的垂直居中總結可以看這裏。 清除容器浮動 #main { overflow:hidden; } 使塊元素水平居中 margin:0 auto; 其實就是 margin-left: auto; margin-right: auto; 這個技巧基本上所有的 CSS 教科書都會有說明,別忘記給它加上個寬度。Exploer 下也可以使用 body{ text-align: center; } 然後定義內層容器 text-align: left; 恢複。 隱藏 Exploer textarea 的滾動條 textarea { overflow:auto; } Exploer 默認情況下 textarea 會有垂直滾動條(不要問我爲什麽)。 設置打印分頁 h2 { page-break-before:always; } page-break-before 屬性能設置打印網頁時的分頁。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有