• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 網頁設計教程 ] 5個簡單但很實用的css屬性詳解—- 其他教程




    教學主題: 5個簡單但很實用的css屬性詳解

    大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

    今天的這個教學主題是: 5個簡單但很實用的css屬性詳解

    這教學的重點為這幾點 [ 詳解,屬性,實用,簡單,圖片,元素,代碼,高度,如下,最小, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    這5個有用的css屬性可能你是比較熟悉的,但是很少使用到它們。我這裡討論的不是css3的新屬性。

    這5個有用的css屬性可能你是比較熟悉的,但是很少使用到它們。我這裡討論的不是css3的新屬性

    。我提到的都是被所有瀏覽器支持的css2屬性比如:clip、min-height、white-space、cursor和display。千萬別錯過這篇文章,因為你會驚訝的發現他們是很有用的。

    一、css clip(裁切)

    clip裁切這個屬性有點像是遮罩。它允許你用特定的形狀遮罩相應的內容。裁切某元素之前,你必須先給該元素指定絕對定位屬性,然後給它的上下左右賦值。

    5個簡單但很實用的css屬性詳解

    圖片裁切舉例(演示)

    在接下來的這個例子裡面,主要展示如何給一個圖片應用裁切屬性。首先,指定div元素相對定位,然後給圖片賦予絕對定位屬性和相應的屬性值。

    5個簡單但很實用的css屬性詳解

    代碼如下:

    .clip {

    position: relative;

    height: 130px;

    width: 200px;

    border: solid 1px #ccc;

    }

    .clip img {

    position: absolute;

    clip: rect(30px 165px 100px 30px);

    }

    圖片調整和裁切

    在這例子裡面,我們將展示你如何調整圖片大小並裁切圖片。這個圖片的原始形狀是長方形的,我想把圖片縮小一半后在正方形里展示。我用width、height屬性改變圖片大小,然後通過裁切屬性讓其顯示為正方形,同時給left賦值使圖片向左移動15px距離。

    5個簡單但很實用的css屬性詳解

    代碼如下:

    .gallery li {

    float: left;

    margin: 0 10px 0 0;

    position: relative;

    width: 70px;

    height: 70px;

    border: solid 1px #000;

    }

    .gallery img {

    width: 100px;

    height: 70px;

    position: absolute;

    clip: rect(0 85px 70px 15px);

    left: -15px;

    }

    二、min-height最小高度(演示)

    最小高度屬性允許你給某個元素指定最小高度,對於網站布局來說它是十分有用的。我就在我的job board的內容區域應用了最小高度,確保內容區域的高度比邊欄要高些兒。

    5個簡單但很實用的css屬性詳解

    代碼如下:

    .with_minheight {min-height: 550px;}

    min-height(最小高度)在ie6下面的bug問題

    注意:ie6是不支持min-height的,但是一下方法可以解決這個ie6 bug問題。

    .with_minheight {

    min-height:550px;

    height:auto !important;

    height:550px;

    }

    三、White-space折行(演示)

    White-space屬性指定某一元素是如何自動折行的。比如,給一元素指定White-space屬性后,如果一行內的空間無法容下該元素的話,它將自動換到下一行。

    5個簡單但很實用的css屬性詳解

    代碼如下:em {white-space: nowrap;}

    四、光標(演示)

    如果您更改按鈕的行為,同時你也應該改變Cursor光標。例如,當一個按鈕被禁用時,光標應改為默認(箭頭),以表明它是無法點擊因此,cursor屬性對於網絡應用程序開發是非常有用的。

    5個簡單但很實用的css屬性詳解,PS教程,思緣教程網

    代碼如下:

    .disabled {cursor: default;}

    .busy {cursor: wait;}

    .clickable:hover {cursor: pointer;}

    五、Display inline / block(演示)

    塊狀元素是自己單獨在一行的,而內聯元素則會出現同一行裡面。div、h1、p標籤是默認的塊狀元素。em、span和strong則是內聯元素。你可以改變display的顯示樣式display:inline或display:block;改變它們的默認狀態。

    5個簡單但很實用的css屬性詳解

    代碼如下:

    .block em {display: block;}

    .inline h4, .inline p {display: inline;}

    看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 5個簡單但很實用的css屬性詳解 這教學會喜歡

    文章標題: 骨子愛創意- 5個簡單但很實用的css屬性詳解–轉載請註明來源處

    本教學分類為網頁設計教程中的 其他教程相關教學

    文章相關關鍵字為: 詳解,屬性,實用,簡單,圖片,元素,代碼,高度,如下,最小,

    本文永久連結 :5個簡單但很實用的css屬性詳解

    本文轉載自 :VIA