Selanjutnya kita akan membuat halaman xHTML, yang berisi dua area konten yang berisi DIV dengan ID fixedBox dan FlowBox. Keduanya adalah DIV dengan lebar tetap dan lebar tidak tetap .
Teori yang kami gunakan adalah ketika menambahkan latar belakang ke suatu elemen, gambar latar belakang selalu muncul di atas warna latar belakang; untuk membuat persegi panjang bulat warna solid, pertama-tama kita dapat membuat persegi panjang normal lalu menggunakan Gambar sudut membulat dengan warna yang sama dengan latar belakang empat sudut membulat elemen ini membentuk bingkai sudut membulat. Metode ini akan dijelaskan secara rinci di bawah dalam dua kasus - kotak berukuran tetap dan kotak streaming berukuran tidak tetap.
Menambahkan sudut membulat ke kotak berukuran tetap Langkah 1: Buat dokumen xHTML dasar dan tambahkan sedikit konten ke dalamnya
lihat salinan biasa ke cetak papan klip?
<div id="kotak tetap">
<h2>Pengujian Kotak Tetap</h2>
<p>Ini hanyalah halaman percobaan enpor.com.</p>
</div>
<div id="kotak tetap">
<h2>Pengujian Kotak Tetap</h2>
<p>Ini hanyalah halaman percobaan enpor.com.</p>
</div>Kami sekarang telah membuat dokumen xHTML, yang memiliki DIV dengan ID fixedBox. Kami akan membuat batas bulat untuk DIV ini. Kemudian tambahkan gaya dasar pada dokumen:
lihat salinan biasa ke cetak papan klip?
isi, html {
margin:0;
bantalan:0;
latar belakang:#a7a09a;
warna:#000;
}
badan, html {
margin:0;
bantalan:0;
latar belakang:#a7a09a;
warna:#000;
}Langkah 2: Atur lebar dan warna latar belakang DIV
lihat salinan biasa ke cetak papan klip?
div#kotak tetap {
lebar:340 piksel;
margin:40 piksel;
latar belakang:#E4ECF9;
}
div#kotak tetap {
lebar:340 piksel;
margin:40 piksel;
latar belakang:#E4ECF9;
}Langkah 3: Buat persegi panjang membulat berdasarkan lebar DIV. Karena saya mengatur lebar DIV menjadi 340px, sekarang saya perlu membuat persegi panjang membulat dengan lebar 340px. Setelah membuat persegi panjang, letakkan bagian atasnya dari seluruh persegi panjang dengan bagian bawah dipotong dan digunakan sebagai gambar DIV saya membuat dua gambar berikut:
Langkah 4: Terapkan gambar ke latar belakang DIV
lihat salinan biasa ke cetak papan klip?
div#kotak tetap {
lebar:340 piksel;
margin:40 piksel;
latar belakang:#E4ECF9 url(images/bottom.gif) tengah bawah tanpa pengulangan;
}
div#kotak tetap {
lebar:340 piksel;
margin:40 piksel;
latar belakang:#E4ECF9 url(images/bottom.gif) tengah bawah tanpa pengulangan;
}div#kotak tetap h2{
margin:0;
bantalan:2 piksel;
latar belakang:#E4ECF9 url(images/top.gif) pusat atas tanpa pengulangan;
}
Di atas kita terapkan gambar bernama Bottom.gif di bagian bawah DIV, lalu gunakan Top.gif pada elemen pertama H2 DIV. Tentu saja hal pertama yang perlu kita perhatikan di sini adalah kita tidak bisa menambahkan Margin ke h2. Nilai atau tambahkan Padding atau Border ke DIV.
Membuat kotak bulat dengan lebar tidak tetap. Apa yang kami katakan di atas adalah membuat kotak bulat dengan lebar tetap tetapi tidak tinggi tetap. Ini memerlukan dua gambar, atas dan bawah , pikirkan sejenak, Anda akan menemukan bahwa kali ini kita harus menggunakan 4 gambar, satu gambar di setiap sudut untuk membuat persegi panjang bulat yang dapat diperkecil dengan cara apa pun. Kita masih perlu membuat wadah DIV terlebih dahulu dan menambahkan konten dasar.
Langkah 1: Buat dokumen xHTML
lihat salinan biasa ke cetak papan klip?
<div id="kotak aliran">
<div kelas="untuk bantuan">
<div kelas="forhelp2">
<h2>Pengujian FlowBox</h2>
<p>Ini hanyalah halaman percobaan enpor.com.</p>
</div>
</div>
</div>
<div id="kotak aliran">
<div kelas="untuk bantuan">
<div kelas="forhelp2">
<h2>Pengujian FlowBox</h2>
<p>Ini hanyalah halaman percobaan enpor.com.</p>
</div>
</div>
</div>Saya menambahkan empat baris di atas langsung ke dokumen HTML sebelumnya, jadi saya tidak perlu lagi mengatur style sheet CSS untuk Body-nya.
Langkah kedua adalah membuat sudut membulat, buat empat sudut membulat berada pada arah kiri atas, kiri bawah, kanan atas, dan kanan bawah.
Langkah 3: Atur warna latar belakang salinan biasa DIVview
ke clipboardprint?
div#kotak aliran {
margin:40 piksel;
latar belakang:#C3D9FF;
}
div#kotak aliran {
margin:40 piksel;
latar belakang:#C3D9FF;
} Langkah 5: Tambahkan sudut membulat
. Untuk container DIV yang tidak memiliki lebar dan tinggi tetap, setiap sudut membulat harus dapat diubah posisinya sesuai dengan perubahan lebar dan tinggi DIV, jadi kita hanya dapat menambahkan sudut membulat pada yang tetap. -width DIV. Gambar dengan lebar tetap yang digunakan di sini diproses menjadi dua gambar kecil, dan dapat ditambahkan langsung ke elemen H2, sekarang setelah kita menambahkan elemen H2, kita hanya mendapatkan satu sisi sudut membulat, dan masih ada satu sudut membulat yang dapat digunakan dalam H2. Span diperoleh, sehingga dua sudut membulat diselesaikan, dan elemen p dapat memberikan satu sudut membulat, dan div itu sendiri memiliki satu sudut membulat, yang persisnya empat sudut membulat.
lihat salinan biasa ke cetak papan klip?
div#kotak aliran {
margin:40 piksel;
latar belakang:#C3D9FF url(images/bottom-left.gif) tanpa pengulangan di kiri bawah;
}
div#flowBox h2{
margin:0;
bantalan:0;
latar belakang:#C3D9FF url(images/top-left.gif) tidak ada pengulangan di kiri atas;
}
div#flowBox rentang h2{
margin:0;
tampilan:blok;
latar belakang:#C3D9FF url(images/top-right.gif) tidak ada pengulangan di kanan atas;
}
div#kotak aliran p{
margin:0;
bantalan:0;
latar belakang:#C3D9FF url(images/bottom-right.gif) tidak ada pengulangan di kanan bawah;
}