首頁  >  文章  >  web前端  >  分享CSS的八個小技巧

分享CSS的八個小技巧

零下一度
零下一度原創
2017-05-13 14:15:041486瀏覽

css有很多的功能,在這裡,小編跟大家分享css中的八個小技巧。

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

<div class="transparent"></div>
.transparent {
    filter: progid:DXImageTrans
for
m.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屬性去掉就可以達到效果。

<div id="wrap">
    <div class="column_
left
">
        <h1>Float left</h1>
    </div>
    <div class="column_
right
">
        <h1>Float right</h1>
    </div>
</div>
#wrap {
    b
ord
er: 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的固定高度問題

有時候我們需要設定某個元素固定高度,但是在firefox或opera下面只設定高度,在內容不夠多的時候,達不到預想的效果,這時候我們可以使用min-height

4、 使用media指令引入兩種css:列印版本的css和螢幕顯示的css

<link type="text/css" rel="stylesheet" href="url" media="screen" charset="utf-8">
<link type="text/css" rel="stylesheet" href="url" media="print" charset="utf-8">

5、用.fixTable{ table-layout: fixed; overflow:hidden; }加上nobr標籤實作隱藏

6、可以使用page-break-after,page-break- before控制列印時的分頁

7、*html{}的作用是為了相容6.0以下的IE版本,對html節點的選取,其他的瀏覽器都認為html標籤是文件的根節點,而ie6以下的ie版本卻認為在html標籤的上面還有一個根節點

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

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

【相關推薦】

1. 特別推薦「php程式設計師工具箱」V0.1版本下載

2. 免費css線上影片教學

3. php.cn獨孤九賤(2)-css影片教學

以上是分享CSS的八個小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn