Isi

• Instruksi
• Situs Anda
• spanduk {}
• banner {margin: 0 auto;}
• banner {margin: 0 auto
• Apa yang kamu butuhkan

Membuat spanduk adalah bagian penting dari desain web. Banyak desainer pemula menggunakan tabel untuk membuat spanduk dan tata letak situs web. Namun, menggunakan CSS, Anda dapat mengatur latar belakang, warna, ukuran, dan batas spanduk. Tabel membuat manajemen desain sulit seiring berjalannya waktu, sementara CSS memungkinkan Anda untuk mengubah elemen sesuai kebutuhan. Anda memerlukan pengetahuan dasar tentang HTML untuk menjalankan tutorial kecil ini. Meskipun ada banyak cara untuk membuat spanduk dengan CSS, dalam tutorial ini kita akan membuat spanduk kanan-rata, kanan-tengah.

Instruksi

Diperlukan pengetahuan dasar tentang HTML untuk tutorial ini (gambar internetseite oleh FX Berlin dari Fotolia.com)

1. Buka file HTML. Setelah tag BODY, tambahkan DIV, diikuti oleh ID. Beri nama tag sebagai "spanduk":

2. Masukkan teks spanduk di antara tag DIV yang baru saja Anda buat:

   Situs Anda

   Tutup dengan label H1:

   Situs Anda

   Ini akan menyebabkan teks Anda lebih besar dari ukuran default lebih dari empat poin.

3. Buka file CSS Anda. Konfigurasikan gaya spanduk dengan mengetik:

   spanduk {}

   Tag "#banner" akan memberi tahu browser mencari gaya "id =" banner "" - jadi tag itu disebut "banner".

4. Di antara {}, Anda harus memasukkan gaya. Ada banyak gaya di CSS. Kami hanya akan menggunakan beberapa dari mereka. Pertama, kami ingin memusatkan spanduk di halaman:

   
   

   banner {margin: 0 auto;}

   Dengan demikian, spanduk dipusatkan di situs, dengan margin otomatis titik nol dalam kaitannya dengan bagian atas dan bawah garis.

5. Tambahkan gaya lain:

   banner {margin: 0 auto

   Lebar: 780px Tinggi: 300px Batas: # ff0000 solid 10px Latar Belakang: #ffffff Warna: # ff0000 Ukuran font: 18px Perataan teks: kanan Padding-kanan: 10px;}

   Lebar dan tinggi menentukan ukuran spanduk. Perbatasannya adalah garis 10 piksel padat di sekitar karton. Itu akan berwarna merah, seperti yang didefinisikan oleh kode heksadesimal, yaitu oleh enam angka dan huruf yang mengikuti simbol "#". "Background" diatur ke putih. Tag "Warna" mengatur warna teks, yang merah lagi, agar sesuai dengan perbatasan. Tag "font-size" menentukan ukuran teks. "Text-align" mendefinisikan penentuan posisi teks - dalam hal ini, penyelarasan kanan kotak telah dipilih. "Padding" menciptakan ruang antara konten, seperti teks, di dalam kotak dan perbatasan. "Padding-right" diatur untuk memberikan 10 piksel ruang antara teks dan tepi kanan.

   
   

6. Simpan file.

Apa yang kamu butuhkan

• Editor teks
• Situs
• Pemilih warna