Baca Selengkapnya..Panduan Belajar HTML untuk Pemula

Membuat Layout Website Sederhana (Part 5)

Advertisement

Terakhir dari seri belajar membuat layout website sederhana, kita akan coba buat layout dengan 2 kolom siderbar yang terletak di kiri dan kanan kolom artikel, dan empat kolom footer, seperti gambar berikut ini.

Seri Belajar HTML:

Seri Belajar Membuat Layout Website Sederhana:

Kode HTML

Kode CSS

#1 Style pada element body:

  • fyleont-family: serif
  • background-color: #dcdcdcd
  • font color: #111

#2 Style pada element container:

  • width: 1200px
  • margin: auto

#3 Style pada element header:

  • background-color: #4682b4
  • padding: 40px 30px
  • color: #f5fffa

#3.1 Style judul pada element header:

  • font: bold 40px monospace
  • margin-bottom: 10px

#3.2 Style tagline pada element header:

  • font: italic 15px serif

#4 Style pada element menu:

  • background-color: #483d8b

#4.1 Style list pada element menu:

  • display: inline-block
  • padding 10px 0px 10px 30px

#4.2 Style anchor text pada element menu:

  • text-decoration: none
  • font color: #fff

#5 Style pada element content:

  • background-color: #f0fff0

#5.1 Style heading 2 pada element content:

  • font: bold 20px monospace
  • margin-bottom: 10px
  • text-transform: uppercase

#5.2 Style menu pada element content:

  • margin-bottom: 20px (jarak antara menu dengan element di bawahnya)

#5.3 Style list menu pada element content:

  • margin-bottom: 10px (jarak antar list pada menu)

#5.4 Style achor text pada element content:

  • text-decoration: none
  • font color: #111

#5.5 Style kolom sidebar kiri:

  • width: 220px
  • float: left
  • padding: 30px 20px 10px 30px

#5.6 Style tombol kategori (label) pada sidebar kiri:

  • display: inline-block
  • padding: 7px
  • margin-right: 5px
  • background-color: #7fffda
  • font color: #000

#5.7 Style kolom artikel:

  • width: 600px
  • float: left
  • padding: 30px 20px 10px 20px
  • background-color: #fffff0

#5.8 Style meta data pada kolom artikel:

  • font-size: 12px

#5.9 Style paragraf pada kolom artikel:

  • font: normal 15px/22px serif
  • margin-bottom: 15px

#5.10 Style tombol readmore pada kolom artikel:

  • Posisi tombol (text-align): right
  • Style anchor text:
    • font: bold 12px sans-serif
    • background-color: #008080
    • font color: #fff
    • padding: 7px

#5.11 Style kolom sidebar kanan:

  • width: 220px
  • float: left
  • padding: 30px 20px 10px 30px

#5.12 Hapus style float:

  • clear: both

#6 Style pada element footer:

  • background-color: #696969
  • font color: #fff
  • padding 30px

#6.1 Style heading 2 pada element footer:

  • font: bold 20px monospace
  • color: #dcdcdc
  • margin-bottom: 10px

#6.2 Style anchor text pada element footer:

  • text-decoration: none
  • font color: #fff

#6.3 Style menu dan list menu:

  • margin-bottom: 20px (jarak antara menu dengan element di bawahnya)
  • margin-bottom: 10px (jarak antar list pada menu)

#6.4 Style footer kiri (footer1):

  • width: 360px
  • float: left
  • padding-right: 15px

#6.5 Style footer tengah (footer2):

  • width: 360px
  • float: left
  • padding: 0px 15px

#6.6 Style footer kanan (footer3):

  • width: 360px
  • float: left
  • padding-left: 15px

#6.7 Style footer bawah (footer4):

  • background-color: #111
  • font color: #fff
  • text-align: center
  • padding: 10px 30px

#7 Kode CSS lengkap:

Layout website setelah ditambahkan kode CSS

0 0 votes
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
2 days ago

[…] Membuat Layout Website 3 Kolom Konten (1 Artikel & 2 Sidebar) & 4 Kolom Footer […]

trackback
2 days ago

[…] Membuat Layout Website 3 Kolom Konten (1 Artikel & 2 Sidebar) & 4 Kolom Footer […]