Cara Membuat Div Styles dan Macam-Macamnya

Contoh div

pada artikel kali ini saya akan membagikan tips blogging tentang div. sebenernya apa sih div? div itu seperti kotak diatas itu lo

udah langsung aja dilihat dibawah

• Kode :

  <div style="border: 2px solid blue;"> <div style="border: 3px solid red;"> <div align="center"> Teks</div> </div> </div>
  Hasilnya :
  Teks
• Kode :

  <div style="border: 4px solid yellow;"> <div align="center"> <span style="color: coral;">Teks </span></div> </div>
  Hasilnya
  Teks
• Kode :

  <div style="border: 3px double #ff0000; padding: 5px;"><div align="center">Teks </div></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border: 3px double #0000ff; padding: 5px;"><div style="border: 2px solid #0077ff; padding: 5px;"><div align="center">Teks </div></div></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border-color: lime; border-style: dotted; border-width: 2px; margin: 1px; padding: 1px;"><center>Teks </center></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border-style:inset;border-width:5pt;border-color:black" align="center">Teks </div>
  Hasilnya :
  Teks
• Kode :

  <div style="background: #bbddff; border: 5px outset#c0c0c0; margin: 0px; padding: 5px;"><div align="center">Teks </div></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border: 2px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 4px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 2px solid#220000;"><div align="center"><span style="color: red;">Teks </span></div></div></div></div></div></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="background-color: #44ccff;"><div align="center"><span style="color: red;">Teks </span></div></div></div></div></div></div></div></div></div></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border: 3px solid#2222ff;"><div style="background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/linerbn.gif'); border: 0px; margin: 2px; padding: 2px;"><div style="background-color: #cccccc;"><div align="center"><span style="color: red;">Teks </span></div></div></div></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border: 1px solid#001100;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#00aa00;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#001100;">
  <div align="center"><span style="color: red;">Teks </span></div>
  </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
  Hasilnya :
  Teks

kyknya segitu dulu gan. silakan dicoba yak

ARTIKEL TERKAIT: