tutorial pengembangan web terbaru
 

W3.CSS Borders


Kelas perbatasan

Kelas perbatasan W3.CSS dapat digunakan pada setiap elemen HTML.

Saya memiliki batas di semua sisi.


Saya memiliki batas bawah merah


Saya memiliki batas bulat.


Saya memiliki leftbar biru.

Contoh

<div class="w3-border">
  <p>I have borders on all sides.</p>
</div>

<div class="w3-border-bottom w3-border-red">
  <p>I have a red bottom border.</p>
</div>

<div class="w3-border w3-round-xlarge">
  <p>I have rounded borders.</p>
</div>

<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
  <p>I have a blue leftbar.</p>
</div>
Cobalah sendiri "

menampilkan Catatan

Catatan sering ditampilkan dengan warna pucat dan bar berwarna:

London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.


London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.

Contoh

<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>
Cobalah sendiri "

menampilkan Panel

Panel dapat ditampilkan dalam satu juta cara yang berbeda:

London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.


London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.


London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.


London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.


London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.


London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.


London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.

Contoh

<div class="w3-container w3-light-grey w3-border">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div> 
Cobalah sendiri "

menampilkan Quotes

Kelas w3-kontainer dapat digunakan untuk menampilkan tanda kutip.

"Buatlah sesederhana mungkin, tetapi tidak sederhana."

Albert Einstein


"Buatlah sesederhana mungkin, tetapi tidak sederhana."

Albert Einstein


"Buatlah sesederhana mungkin, tetapi tidak sederhana."

Albert Einstein

Contoh

<div class="w3-container w3-leftbar w3-light-grey">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</div> 
Cobalah sendiri "

Jika Anda menggunakan HTML <blockquote>, ingat bahwa HTML akan menambahkan margin kiri ekstra:

"Buatlah sesederhana mungkin, tetapi tidak sederhana."

Albert Einstein

Contoh

<blockquote class="w3-container w3-leftbar w3-light-grey">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</blockquote> 
Cobalah sendiri "

Hoverable Borders

Kelas warna w3-melayang-border- mengubah warna perbatasan pada mouse-over:

perbatasan hoverable merah


perbatasan ungu yang berubah biru di hover


bar merah yang menyala hijau di hover.

Contoh

<div class="w3-container w3-border w3-hover-border-red">
  <p>Red hoverable border</p>
</div>
Cobalah sendiri "

menampilkan Kode

Contoh HTML

<div class="w3-code htmlHigh">

.. HTML code goes here

</div>
Cobalah sendiri "

CSS Contoh

<div class="w3-code cssHigh">

.. CSS code here

</div>
Cobalah sendiri "

Contoh JavaScript

<div class="w3-code jsHigh">

.. JavaScript code here

</div>
Cobalah sendiri "