6. 水平或垂直居中元素

你以前也許遇到過(guò)這個(gè)問(wèn)題:水平或垂直居中頁(yè)面元素. 在CSS中垂直居中是非常困難的, 特別是你想支持所有主流瀏覽器的情況下.非常幸運(yùn),現(xiàn)在已經(jīng)有了解決方案,其中一個(gè)方式就是從高度與寬度中取得元素左邊與頂部頁(yè)邊距值再除以2,得到的便是要居中元素的margin-left與margin-top.(這句話理解不知道有沒(méi)有問(wèn)題)

6.1 居中頁(yè)面元素插件

這個(gè)插件可以居中頁(yè)面的任何元素,使用了水平與垂直上減去頁(yè)邊距的辦法.

$("element").center(); //vertical and horizontal$("element").center({    horizontal: false // only vertical});

• 查看演示
• 源文件下載

6.2 我如何垂直居中頁(yè)面元素?

在這個(gè)視頻教程中,Jeffrey Jordan Way會(huì)向你展示如何利用CSS與jQuery組合的威力,在瀏覽器垂直居中圖片.

7. 在IE中顯示Q標(biāo)簽

表現(xiàn)引號(hào)應(yīng)該使用Q標(biāo)簽而不是blockquote標(biāo)簽.然而,windows下的IE不支持這個(gè)標(biāo)簽,因此,很多開(kāi)發(fā)都不使用Q標(biāo)簽.

7.1QinIE

當(dāng)你把這段腳本引入到你的網(wǎng)頁(yè)文檔頭部,它就可以自動(dòng)地把頁(yè)面中的Q標(biāo)簽替換成引號(hào)(包括對(duì)應(yīng)的結(jié)束引號(hào)). 如果將來(lái)IE支持Q標(biāo)簽,你可能要修改它,加上瀏覽器版本的判斷.

• 源文件下載

8. 增大點(diǎn)擊目標(biāo)的范圍以獲得更直接的切換

對(duì)厭煩的‘Read More…'說(shuō)再見(jiàn),使你整個(gè)內(nèi)容塊都可以點(diǎn)擊進(jìn)入目標(biāo)鏈接!

• 源文件下載

9. Lazy loader

這是一個(gè)jQuery插件. 它可以使(內(nèi)容較長(zhǎng)的)頁(yè)面的圖片延遲加載.在viewport(頁(yè)面的可見(jiàn)部分)之外的圖片不會(huì)被加載,直到用戶拖動(dòng)滾動(dòng)條到它們的時(shí)候.這與 圖片預(yù)載 是截然相反的.

• 查看演示
• 源文件下載

10. bgiframe

這個(gè)jQuery插件可以輕松解決IE z-index的問(wèn)題.

• 查看演示
• 源文件下載

11. ieFixButtons

這個(gè)jQuery插件可以修復(fù)button元素在IE6 與IE7下的怪異行為.

• 查看演示
• 源文件下載

12. Fix Overflow

這個(gè)插件修復(fù)IE下的水平溢出問(wèn)題.特別地,IE會(huì)自動(dòng)為溢出的元素添加滾動(dòng)條,如果元素只有一行,那這個(gè)滾動(dòng)條就會(huì)覆蓋在元素的上面.這個(gè)插件通過(guò)調(diào)整元素的填充來(lái)修復(fù)這個(gè)問(wèn)題.

• 查看演示
• 源文件下載

最新評(píng)論