最新的Web開發教程
 

W3.CSS公用事業(助手)


實用工具類

最W3.CSS的是圍繞工具類建提供填充,邊距,大小和定位。

注意:實用工具類通常被稱為輔助類。


填充類

W3-padding- 大小類添加填充任何HTML元素:

在W3-填充巨無霸類增加32PX頂部和底部64PX左右。

W3號 - 填充 - xxlarge類添加24px的頂部和底部48像素的左側和右側。

W3號 - 填充 - XLARGE類增加16像素的頂部和底部,32PX左右。

在W3-填充大型類增加12像素的頂部和底部,24px的左側和右側。

在W3-填充介質類增加留下8像素頂部和底部16px的兩側。

在W3-填充小類增加4PX頂部和底部8像素左右。

在W3-填充纖巧類添加2px的頂部和底部,4PX左右。

<div class="w3-container w3-padding-xlarge">

<p>I have 16px top and bottom padding and 32px left and right padding.</p>

</div>
試一試»

W3號-填充-賀- 類增加了橫向(頂部和底部)填充,以任何HTML元素:

在W3-填充-HOR-4類增加4PX頂部和底部填充。

在W3-填充-HOR-8類增加8像素頂部和底部填充。

在W3-填充-HOR-16類增加16像素的頂部和底部填充。

在W3-填充-HOR-32類增加32PX頂部和底部填充。

在W3-填充-HOR-64類增加64PX頂部和底部填充。

<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
試一試»

W3-填充-ver- 類加上垂直(左和右)填充,以任何HTML元素:

在W3-填充-VER-4類增加4PX左右填充。

在W3-填充-VER-8類增加8像素左右填充。

在W3-填充-VER-16級增加了16倍左右填充。

在W3-填充-VER-32類增加32PX左右填充。

在W3-填充-HOR-48類增加64PX左右填充。

<div class="w3-container w3-padding-ver-16">
  <p>I have 16px left and right padding</p>
</div>
試一試»

保證金類

W3的利潤率類添加利潤率元素:

W3的利潤率類增加16px的保證金到一個元素的所有邊。

W3的利潤率底級增加了一個16像素下邊距的元素。

W3的利潤率左類增加留有餘量一個元素的16像素。

W3的利潤率右類添加16px的右邊距為一個元素。

W3的利潤率 - 一流的增加了一個16像素的上邊距為一個元素。

<div class="w3-container w3-margin">
I have 16px margin on all sides
</div>
試一試»

施膠類

w3- 大小課改元素的字體大小:

我很小的(使用W3-微小)

我小的(使用W3小)

我網上平台。 默認。

我大(使用W3-大)

我XLARGE(使用W3-超大)

<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using w3-xlarge)</p>
試一試»

你可以閱讀更多有關章節上漿類W3.CSS印刷術


四捨五入類

W3-圓頭大小類添加圓角邊框元素:

回合
多面手
多面手
圓的

<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
試一試»

Circle類

<img class="w3-circle" src="img_car.jpg" alt="Car">
試一試»

該中心類

W3中心級中心元素:




<div class="w3-container w3-center w3-green">
  <img class="w3-circle" src="img_car.jpg" alt="Car">
</div> 
試一試»

浮動班

W3類浮到左邊的元素,則W3-正確的類浮動到右邊的元素:

左浮動
右浮動

<div class="w3-container w3-light-grey">
  <div class="w3-left w3-red">Float left</div>
  <div class="w3-right w3-blue">Float right</div>
</div>
試一試»

顯示/隱藏類

W3隱藏小|中|大類隱藏在一個特定的屏幕大小的元素。

注:調整瀏覽器窗口來了解它是如何工作:

我會在小屏幕上被隱藏(手機)

我將在中型屏幕被隱藏(片)

我將在大屏幕上被隱藏(筆記本電腦/台式機)

<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden on large screens (laptop/desktop)</p>
試一試»