masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Antara muka pengguna CSS3

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:

resizebox-sizingoutline-offset

CSS3 Resize

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)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div
{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>

Saiz Kotak CSS3

sifat bersaiz kotak Membolehkan anda menentukan dengan tepat apa yang sesuai untuk sesuatu zon. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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占据了左边的一半。.</div>
<div class="box">这个div占据了右边的一半。</div>
</div>
</body>
</html>

Pengubahsuaian garis besar CSS3 (garis luar-offset)

Sifat garis luar mengimbangi mengimbangi garis besar dan melukis garis besar melepasi tepi sempadan.

Garis berbeza daripada sempadan dalam dua cara:

Garis tidak mengambil ruang Garis besar mungkin bukan segi empat tepat

Div ini mempunyai garis besar 15 piksel di luar sempadan.

Kod CSS adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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>
<p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>

Ciri UI Baharu


Atribut 🎜> Atribut membolehkan anda membuat elemen kelihatan seperti elemen UI standard 3

saiz kotak membolehkan anda menyesuaikan kawasan menentukan unsur-unsur tertentu dalam beberapa cara 3


pencipta dengan keupayaan untuk menetapkan elemen kepada objek setara ikon. 3

nav-down Menentukan tempat untuk menavigasi menggunakan kekunci navigasi anak panah ke bawah 3

nav-index Menentukan susunan tab untuk elemen                                                 Tentukan tempat untuk menggunakan kekunci navigasi anak panah kiri untuk menavigasi                                                                                                                                                                                                                                                       S di mana Navigasi apabila menggunakan kekunci navigasi anak panah ke atas                                                                                                                                                            saiz Menentukan sama ada elemen diubah saiz oleh pengguna >

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } </style> </head> <body> <p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p> <div>调整属性指定一个元素是否由用户可调整大小的。.</div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492837 permainan