hujung hadapan web
tutorial css
Gunakan kedudukan relatif dan offset untuk mencipta antara muka input yang cantik_CSS/HTML
Gunakan kedudukan relatif dan offset untuk mencipta antara muka input yang cantik_CSS/HTML
Menggunakan kedudukan relatif dan atribut mengimbangi, anda boleh melaksanakan antara muka yang memerlukan gambar sebelum ini, dan ia juga sangat mudah untuk dilaksanakan. Contohnya, apabila pengguna dikehendaki memasukkan maklumat tertentu, kami sering menggunakan struktur bar tajuk - kandungan - butang OK Berikut ialah antara muka input yang dibuat menggunakan kedudukan relatif dan mengimbangi gaya CSS. Ciri-ciri utama ialah:
Imej bar tajuk mempunyai ofset menaik. Gunakan gaya: top:-10px;position:relative; untuk memisahkan imej daripada bekas dan letakkannya di luar bekas (dalam contoh ini, bekas imej ialah div dengan class="main"). Tetapi satu perkara yang perlu diambil perhatian ialah walaupun kedudukan imej berada di luar bekas, ia masih menempati ruang tertentu dalam bekas Dalam contoh ini, tidak kira bagaimana atribut ketinggian .pemilih utama ditetapkan, ketinggian hijau jalur tidak akan kurang daripada 20px (ketinggian imej).
Saya juga menggunakan atribut offset atas, bawah, kiri dan kanan untuk teks dalam bar tajuk Pada mulanya, saya hanya mahu menggunakan atribut vertical-align:middle untuk memusatkan teks secara menegak gagal. Teks sentiasa sejajar dengan baris bawah , tetapi offset telah digunakan semula.
Jalur hijau menggunakan penapis CSS untuk menghasilkan kesan kecerunan, tetapi malangnya dikatakan hanya IE yang menyokongnya:-(
Butang "OK" pada penghujungnya juga menggunakan teknologi kedudukan relatif dan mengimbangi.
Kod CSS:
a:pautan,a:aktif,a:dilawati{}{
warna: #2H4D97;
hiasan teks: tiada;
}
a:tuding {}{
hiasan teks: tiada;
warna: #FF9900;
}
.tajuk{}{
warna:#006600;
paparan:blok;
tinggi:20px;
lebar:65%;
sempadan:tiada;
penapis:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorStr=#FFD9E7CB,endColorStr=#00FFFFFF);
}
.title rentang{}{
paparan:sebaris;
kedudukan:relatif;
atas:-4px;
}
.img tajuk{}{
kedudukan:relatif;
atas : -10px;
kiri: 5px;
display:inline;
margin:0px 10px 0px 0px;
padding:0px;
height:20px;
}
. utama{}{
jidar:10px 20px 30px 20px;
pelapik: 10px 20px 10px 20px;
lebar:100%;
jidar:#CCCCCC 1px pepejal;
}
.item utama{}{
vertical-align:middle;
margin:5px 0 5px 0;
}
.main .foot{}{
position:relative;
bottom :-10px;
kiri:80%;
paparan:blok;
sempadan:#CCCCCC 1px pepejal;
sempadan-bawah:tiada;
lebar:15%;
teks -align:center;
}
.utama .foot a{}{
background-color:#F3FCE0;
padding:2px;
width:100%;
}
.foot a utama:hover{}{
warna latar belakang:#D8EBFE;
padding:2px;
lebar:100%;
}
kod html: