DIV CSS 佈局教程網

使用在WebKit中可用的CSS高級特性，可以為你的網站或網絡應用帶來一個新的更令人興奮的東西。

在閱讀下面文章前，你可以先了解下破洛洛以前介紹的WebKit文章：浏覽器Apple Safari和Google Chrome內核webkit

WebKit是Safari和Google Chrome浏覽器的渲染引擎。所以，本文中的訣竅在Safari3/4和Chrome1.0/2.0中都是支持的。

因為浏覽器會簡單的無視他們不支持的CSS屬性，所以在其他浏覽器中，這些訣竅中的大部分可能會無效。使用只有WebKit支持的CSS屬性的網頁在基於WebKit的浏覽器中會有非常出色的視覺效果和體驗，並且在其他浏覽器中也可能會有某些效果——至少不會有負面的影響。

注意: 你在本文中看到的-webkit前綴是一個浏覽器生產商通常使用的一種方式，它暗示該CSS屬性或規則尚未成為W3C標准的一部分。比如，box-shadow屬性還只是開發中的CSS3標准的一部分。基於Mozilla的浏覽器使用-moz前綴。

1.簡單的陰影

讓我們從向你展示為網頁中的任意元素添加陰影效果是多麼的簡單開始吧。下面的代碼片段將演示一個輕微旋轉並有陰影的圖片，這兩個效果都是使用CSS添加的。

1

<img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />

上面的代碼中，transform CSS 屬性實現圖片旋轉，box-shadow屬性為圖片添加陰影效果。你可以改變旋轉的角度，或者是陰影的參數，僅僅調整那些參數就OK了。

嘗試一下，你將看到下面演示的旋轉圖片效果。

截圖1.圖片選擇和陰影

上面的CSS寫在一個img標簽的style屬性中，當然你可以把它們作為一個類放到一個style標簽或獨立的樣式文件中。

過去，常常使用服務器端代碼來處理圖片以實現陰影效果，現在使用簡單的CSS樣式你就可以在客戶端浏覽器中實現它，而且看起來很棒。

2.翻轉與彈出

下一個示例將演示當你把鼠標放到一張圖片上時，它會彈出的效果。實現這些只需要使用一個hover樣式和一個度數改變。該效果的CSS如下所示。

1
2
3
4

<style>
	img { -webkit-transform: scale(0.5); }
	img:hover { -webkit-transform: scale(1); }
</style>

1

<img src="megan.jpg" />

鼠標滑過圖片，它就會彈出並變大，如下所示。

截圖2.翻轉後的圖片

將鼠標從圖片上挪開，圖片又會恢復原狀。

截圖3.翻轉之前的圖片

正如你所能看到的那樣，你可以使用幾行CSS來實現這個效果。

3.帶動畫效果的圖片翻轉

前端工程師常見的另外一個現象是，當用戶將鼠標放到圖片上時，變換為另一張圖片。在這個技巧中，讓我們看看如何讓圖片從一個到另一個漸變切換，而不是直接簡單的交換兩張圖片。實現這個效果的CSS和HTML如下：

1
2
3

	div.swapper img { -webkit-transition: opacity 1s ease-in-out; }
	img.img1, div.swapper:hover img.img2 { opacity: 1.0; }
	div.swapper:hover img.img1, img.img2 { opacity: 0; }

1
2
3
4

<div class="swapper">
	<img class="img1" style="position: absolute;" src="megan.jpg">
	<img class="img2" src="megan2.jpg">
</div>

在這裡，”transition”屬性使用簡化符號來指定（圖片）過渡的所有參數。第一個參數將屬性指定為動畫，第二個參數指定時間，第三個參數為簡便指定時間功能。”ease-in-out”只是眾多你可以自由支配的時間功能中的一個。你還可以指定一個線形變換、漸入、漸出或高級的立體貝塞爾曲線效果！

你可以自己親身體驗一下這個效果，如下圖所示：

截圖4. 一個CSS只能制定一個漸變效果

設想: 純CSS的漸變效果！

4.CSS 多卷布局

使用純CSS，而不用HTML的table來實現多卷是件相當棘手的事情。但是，由於CSS3用於多卷布局的屬性在WebKit中已經被支持，你可以通過明確的定義卷數，正確實現你所想要的效果。先看一下下面的CSS和HTML代碼：

1
2
3
4
5
6
7
8

#columns {
	-webkit-column-count: 3;
	-webkit-column-gap: 25px;
	-moz-column-count: 3;
	-moz-column-gap: 25px;
	column-count: 3;
	column-gap: 25px;
}

1
2
3
4
5

<div id="columns">
	<p>Column A</p>
	<p>Column B</p>
	<p>Column C</p>
</div>

這些代碼定義了這個DIV應該被分成3卷。HTML中的每個段落正好就在他們自己的卷裡面(這並不是說必須要用3個

來顯示每個卷，事實上卷數和P標簽是無關的。)。

這些代碼同樣說明了在使用尚未成為W3C標准的部分CSS樣式時的一種可靠機制。這段代碼指定了”column-count”和”column-gap”屬性，並帶有”-webkit”和”-moz”前綴，以及沒有前綴的情況。這意味著這段代碼將會像Mozilla核心浏覽器一樣可以在WebKit的浏覽器中運行，而且一旦CSS3標准被最終確定下來之後，那些前綴就可以去掉了，而沒有前綴的代碼也將可以被執行。

你可以在下面看到效果：

截圖5. 多卷

使用這種方法後，如果浏覽器不支持多卷布局，段落將一個接著一個顯示，就像沒有設置多卷一樣。正如本文前面提到的，這些方法在不支持它們的浏覽器中會被降級（也就是無效）。

5.簡單的CSS圓角

圓角可能會給頁面的實現帶來一些難度，比如，它可能需要為每個角使用一張圖片，但是這可能會引起某些表現上的問題（比如不同的浏覽器可能表現上會有細微的差別）。在WebKit中被支持的CSS3的”border-radius”屬性讓實現圓角變得非常簡單，它只需要幾行簡單的CSS代碼。如下所示：

1
2

	#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px;
		text-align:center; background:#eee; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="boxes">
	<div style="-webkit-border-radius:15px;">
		All sides
	</div>
	<div style="-webkit-border-bottom-left-radius:15px;-webkit-border-top-right-radius:15px;">
		Opposite corners
	</div>
	<div style="-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;">
		Top
	</div>
	<div style="-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;">
		Side
	</div>
</div>

這段樣式代碼定義所有的在boxes裡面的DIV都要有一個比較大的border（邊框）、邊距、寬度、背景等。然後每個div標簽的border-radius被設置為不同的方式。你可以在下面看到運行結果：

截圖6. 純CSS圓角

第一個div中border-radius被設置為所有的角，然後第二個div只有左下角和右上角，第三個div就像一個tab，只有上面的角被設置為圓角，最後一個div被設置為單邊的圓角，只有右邊的兩個角是圓角。

6.全新的表單控制

WebKit同樣提供一些可用於你的頁面全新的控制。下面的例子演示一個水平滑動條、一些新樣式的按鈕以及一個很像Safari工具欄的搜索框

1
2
3
4

<input type="range" style="-webkit-appearance:slider-horizontal;"><br/><br/>
<button style="-webkit-appearance:button;width:200px;height:30px;">gradient button</button><br/><br/>
<button style="-webkit-appearance:push-button;width:200px;">aqua button</button><br/><br/>
<input type="text" style="-webkit-appearance:searchfield;" value="kitten"></input><br/>

運行效果：

截圖7. WebKit可用的一些新的按鈕

新的滑動控制條尤其好用，因為這個滑動控制條的確不太好用JavaScript來寫，並且還要在每個浏覽器中都兼容。

7.一個簡單的Pop-out

最後的例子是一個簡單的使用了一些在WebKit中可用的視覺效果的彈出框。

CSS和JavaScript 代碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#box1 {
	z-index: 100;
	position:absolute;
	top:5px; left:5px;
	width:100px;
	height:250px;
	padding:5px;
	-webkit-border-radius:10px;
	border: 2px solid black;
	background: #dddddd;
	z-index: 200;
}
#slider {
	z-index: 100;
	position:absolute;
	top:30px; left:5px;
	height:200px;
	width:90px;
	padding-top:10px;
	padding-left:15px;
	-webkit-border-radius:10px;
	border: 1px solid black;
	background: #eeeeee;
	-webkit-transition: -webkit-transform 0.5s ease-in;
}

1
2
3
4
5

<script>
function popout() {
	document.getElementById('slider').style.webkitTransform = 'translate(105px,0)';
}
</script>

這裡有個父級盒子，以及在它下面的一個滑動層。滑動層上的”transition”屬性定義動作將花費半分鐘，並使用一個”ease-in”時間特效。 通過JavaScript設置”transform”屬性到滑動層，從而在用戶點擊一個鏈接時引發動作。也就是說，動畫只是在用戶執行一個像點擊鏈接一樣的動作之後才會運行。

這個例子的HTML代碼如下：

1
2
3
4
5
6

<div id="slider">
	Slider<br/>Content
</div>
<div id="box1">
	<a href="javascript:popout();">Popout</a>
</div>

運行結果：

截圖8. 滑動層在彈出之前。

如果你在鏈接上點擊，那麼這個滑動元素就會很快的滑出。

截圖9. 滑出之後的滑動層

這些例子的絕大部分功能是由CSS實現的，只是有很少的JavaScript。

未來走向

關於在WebKit中使用新的和獨特的CSS，這篇文章只是描述了一個一小部分。有各種各樣的新的CSS特性可以用來創建獨特的、有視覺沖擊力的效果，你可以單獨的實現他們，也可以聯合使用，前端開發社區等不及你來跟進了！

題記：這篇文章來自於Apple開發者社區，專門介紹WebKit核心的浏覽器的一些新的特性，其中最主要的是對CSS3的支持。如果你想開發一些很酷的界面效果，前端觀察建議你使用WebKit核心的浏覽器，因為目前來說，無論是Safari還是Chrome，都可謂是浏覽器中的先鋒——對W3C的支持最好，JS引擎的效率最高，浏覽器的執行效率和反應速度也是最快的。我們不能被落後的浏覽器拖住了我們前進的步伐，我們固然要考慮比較落後的浏覽器，但是對於前端開發人員來說，進步更重要。