CSS技巧

testHs 發(fā)布于2019-08-29 12:22 / 2958人閱讀

摘要：兼容所有瀏覽器顯示半透明效果的方法的作用使用解決的不閉合的問題，可以將屬性去掉就可以達(dá)到效果。

1、兼容所有瀏覽器顯示半透明效果的方法

.transparent {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: .5;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: url("../img/pic.jpg");
}

2、_height,_width的作用

使用_height解決float的div不閉合的問題，可以將_height屬性去掉就可以達(dá)到效果。


    
        Float left
    
    
        Float right

#wrap {
    border: 6px solid #ccc;
    overflow: auto;
    _height: 1%;
}

.column_left {
    width: 20%;
    padding: 10px;
    float: left;
}

.column_right {
    float: right;
    width: 75%;
    padding: 10px;
    border-left: 6px solid #ccc;
}

3、使用min-height min-width解決div，或者span的固定高度問題

有時(shí)候我們需要設(shè)定某個(gè)元素固定高度，但是在firefox或者opera下面只設(shè)置高度，在內(nèi)容不夠多的時(shí)候，達(dá)不到預(yù)想的效果，這時(shí)候我們可以使用min-height

4、使用media指令引入兩種css：打印版本的css和屏幕顯示的css

5、用.fixTable{ table-layout: fixed; overflow:hidden; }加上nobr標(biāo)簽實(shí)現(xiàn)隱藏

6、可以使用page-break-after，page-break-before控制打印時(shí)的分頁(yè)

7、*html{}的作用是為了兼容6.0以下的IE版本，對(duì)html節(jié)點(diǎn)的選取，其他的瀏覽器都認(rèn)為html標(biāo)簽是文檔的根節(jié)點(diǎn)，而ie6以下的ie版本卻認(rèn)為在html標(biāo)簽的上面還有一個(gè)根節(jié)點(diǎn)

8、使用text-indent顯示圖片，而隱藏文字

h1 {
    background: url(../img/pic.jpg) no-repeat;
    width: 200px;
    height: 200px;
    text-indent: -2000px
}

云服務(wù)器 GPU云服務(wù)器 css技巧應(yīng)聘技巧運(yùn)營(yíng)技巧配置技巧

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111849.html

相關(guān)文章

[譯]148個(gè)資源讓你成為CSS專家

摘要：層疊樣式表二修訂版這是對(duì)作出的官方說明。速查表兩份表來(lái)自一份關(guān)于基礎(chǔ)特性，一份關(guān)于布局。核心第一篇一份來(lái)自的基礎(chǔ)參考指南簡(jiǎn)寫速查表簡(jiǎn)寫形式參考書使用層疊樣式表基礎(chǔ)指南，包含使用的好處介紹個(gè)方法快速寫成高質(zhì)量的寫出高效的一些提示。迄今為止，我已經(jīng)收集了100多個(gè)精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設(shè)計(jì)脫穎而出。 CSS3 資源 20個(gè)學(xué)習(xí)CSS3的有用資源 C...

impig33 2019-08-29 11:10 評(píng)論0 收藏0
CSS技巧

摘要：技巧使你的更加專業(yè)這是上關(guān)于技巧的一篇譯文，另外你也可以在本項(xiàng)目看到原文。列舉了一些很實(shí)用的技巧，比如給空內(nèi)容的標(biāo)簽添加內(nèi)容，逗號(hào)分隔列表等等。排序算法看源碼，把它背下來(lái)吧排序算法的封裝。主要幫助初學(xué)者更好的掌握排序算法的實(shí)現(xiàn)。成為專業(yè)程序員路上用到的各種優(yōu)秀資料、神器及框架成為一名專業(yè)程序員的道路上，需要堅(jiān)持練習(xí)、學(xué)習(xí)與積累，技術(shù)方面既要有一定的廣度，更要有自己的深度。 Java...

DangoSky 2019-08-22 11:15 評(píng)論0 收藏0
CSS技巧

摘要：技巧使你的更加專業(yè)這是上關(guān)于技巧的一篇譯文，另外你也可以在本項(xiàng)目看到原文。列舉了一些很實(shí)用的技巧，比如給空內(nèi)容的標(biāo)簽添加內(nèi)容，逗號(hào)分隔列表等等。排序算法看源碼，把它背下來(lái)吧排序算法的封裝。主要幫助初學(xué)者更好的掌握排序算法的實(shí)現(xiàn)。成為專業(yè)程序員路上用到的各種優(yōu)秀資料、神器及框架成為一名專業(yè)程序員的道路上，需要堅(jiān)持練習(xí)、學(xué)習(xí)與積累，技術(shù)方面既要有一定的廣度，更要有自己的深度。 Java...

zgbgx 2019-08-29 14:01 評(píng)論0 收藏0
CSS14個(gè)實(shí)用技巧的精選和推薦

摘要：此文章主要為大家介紹了個(gè)實(shí)用技巧的精選推薦，具有一定的參考價(jià)值，學(xué)習(xí)覺得挺不錯(cuò)的，分享給大家。設(shè)計(jì)的同時(shí)就可以把這個(gè)設(shè)成顯示來(lái)檢查它的效果。塊元素居中對(duì)齊如果想做個(gè)固定寬度的網(wǎng)頁(yè)并且想讓網(wǎng)頁(yè)水平居中的話，通常是這樣你會(huì)使用來(lái)圍上所有元素。此文章主要為大家介紹了CSS14個(gè)實(shí)用技巧的精選推薦，具有一定的參考價(jià)值，學(xué)習(xí)覺得挺不錯(cuò)的，分享給大家。創(chuàng)業(yè)項(xiàng)目 2018優(yōu)選本頁(yè)技巧目錄： 1...

elisa.yang 2019-08-30 11:22 評(píng)論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問答，但會(huì)議的視頻目前都還沒放出來(lái)，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

mikasa 2019-08-01 18:18 評(píng)論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問答，但會(huì)議的視頻目前都還沒放出來(lái)，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

李世贊 2019-08-29 14:08 評(píng)論0 收藏0