Antara muka pengguna CSS3
Antara Muka Pengguna CSS3
Dalam CSS3, beberapa ciri antara muka pengguna baharu telah ditambah untuk melaraskan saiz elemen, saiz kotak dan sempadan luar.
Dalam bab ini, anda akan mempelajari tentang sifat antara muka pengguna berikut:
saiz semula
saiz kotak
outline-offset
saiz CSS3 (Ubah Saiz)
Dalam CSS3, atribut ubah saiz menentukan sama ada elemen perlu diubah saiz oleh pengguna.
Elemen div ini diubah saiz oleh pengguna. (Dalam Firefox 4+, Chrome dan Safari)
Kod CSS adalah seperti berikut:
Contoh
Pengguna menentukan saiz elemen div:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<div>調(diào)整屬性指定一個元素是否由用戶可調(diào)整大小的。.</div>
</body>
</html>Jalankan atur cara dan cuba
Saiz Kotak CSS3
Sifat bersaiz kotak membolehkan anda menentukan dengan tepat cara kandungan sesuai dengan kawasan tertentu.
Contoh
Nyatakan dua kotak bersempadan sebelah menyebelah:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">這個div占據(jù)了左邊的一半。.</div>
<div class="box">這個div占據(jù)了右邊的一半。</div>
</div>
</body>
</html>Jalankan atur cara dan cuba
Pengubahsuaian garis besar CSS3 (garis luar-offset)
Sifat garis luar mengimbangi garisan dan lukiskan garisan di luar tepi sempadan.
Terdapat dua perbezaan antara garis besar dan sempadan:
Garis tidak menggunakan ruang yang tidak berbentuk segi empat tepat
Kejadian.
Nyatakan garis besar 15 piksel di luar tepi sempadan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
</style>
</head>
<body>
<div>這個 div有一個輪廓邊界15 px邊境外的邊緣。</div>
</body>
</html>Jalankan program dan cuba
Ciri UI baharu
| 屬性 | 說明 | CSS |
|---|---|---|
| appearance | 允許您使一個元素的外觀像一個標準的用戶界面元素 | 3 |
| box-sizing | 允許你以適應(yīng)區(qū)域而用某種方式定義某些元素 | 3 |
| icon | 為創(chuàng)作者提供了將元素設(shè)置為圖標等價物的能力。 | 3 |
| nav-down | 指定在何處使用箭頭向下導(dǎo)航鍵時進行導(dǎo)航 | 3 |
| nav-index | 指定一個元素的Tab的順序 | 3 |
| nav-left | 指定在何處使用左側(cè)的箭頭導(dǎo)航鍵進行導(dǎo)航 | 3 |
| nav-right | 指定在何處使用右側(cè)的箭頭導(dǎo)航鍵進行導(dǎo)航 | 3 |
| nav-up | 指定在何處使用箭頭向上導(dǎo)航鍵時進行導(dǎo)航 | 3 |
| outline-offset | 外輪廓修飾并繪制超出邊框的邊緣 | 3 |
| resize | 指定一個元素是否是由用戶調(diào)整大小 | 3 |
