Tutorial contoh kod penukaran tag CSS agak cantik_Pertukaran pengalaman

Reka bentuk kami semakin mengejar gaya ringkas, dengan harapan dapat memaparkan lebih banyak kandungan dalam ruang yang terhad. Pada masa yang sama, kami mendapati beberapa masalah Susunan kandungan yang mudah sentiasa menjadikan halaman itu sangat panjang. Ia memerlukan banyak penatalan untuk meletakkan kandungan yang dipaparkan. YAHOO dan NetEase mendahului dalam menggunakan kaedah susun atur penukaran tab, melanggar had susun atur konvensional dan membenarkan lebih banyak kandungan diletakkan dalam kawasan saiz yang sama. Kami hanya perlu mengklik pada tab atau pautan yang berbeza untuk mengembangkan kandungan Ini tidak memerlukan membuka halaman web baharu, ia hanya dilakukan dalam halaman yang sama.

1. Idea pelaksanaan keseluruhan penukaran label:

Terdapat banyak cara untuk melaksanakan reka letak pensuisan label ini, dan terdapat juga pelbagai kod yang beredar Kami menggunakan DIV CSS untuk susun atur. Pertama sekali Mari kita susun idea dan cara untuk mencapai kesan penukaran label:
1. Pertama, letakkan bekas untuk penukaran label, yang boleh dalam bentuk tab atau pautan; 2. Letakkan kandungan tertentu, dan Secara lalai, salah satu daripadanya dipaparkan. Kandungan lain disembunyikan;
3. Apabila pengguna mengklik tab atau pautan, gunakan JavaScript untuk beralih ke lapisan yang ditentukan untuk paparan, manakala lapisan kandungan lain disembunyikan
4. Jalankan secara mendalam, untuk contoh, Alih keluar garis putus-putus pautan dan cantikkan grafik dan teks lapisan kandungan, dsb.

Mari lihat gambar kesan akhir contoh ini:

2. Berdasarkan idea di atas, kami mula menyusun kod HTML. Kami membuat rancangan berikut:

>

1. Kami menyusun bekas umum dan menggunakan woaicss kelas.
2. Sediakan senarai UL yang tidak tersusun sebagai bekas untuk tab atau pautan (butiran di bawah).
3. Kami menyediakan empat lapisan masing-masing sebagai lapisan kandungan (kami mengandaikan terdapat empat suis). Sila beri perhatian khusus kepada penggunaan kelas
woaicss_con kepada keempat-empat lapisan. Pada masa yang sama, ID yang berbeza diberikan kepada mereka. Ini supaya javascript boleh mengawal. Kami menetapkan gaya lapisan
kepada elemen blok, yang memaparkan lapisan kandungan. Tiga lapisan yang lain semuanya tersembunyi.

3. Kami mula menambah baik kod HTML. Tambahkan beberapa pautan pada senarai tidak tertib UL:

• 52CSS.com


• 
   

Contoh reka letak CSS
• 
    

Penyawaian WEB

1. Kami menggunakan dua kelas woaicss_title dan woaicss_title_bg1 pada senarai tidak tertib UL Kelas pertama boleh mengawal penampilan keseluruhan pautan UL, LI dan

. Untuk mencapai kesan kecantikan keseluruhan. Kami juga telah menetapkan id sebagai woaicsstitle untuk senarai UL yang tidak tersusun, supaya JavaScript boleh digunakan untuk kawalan gaya.
2. Kami menambah empat pautan dan menetapkan sasaran pautan sebagai: javascript:void(0). Kita harus faham bahawa apabila pautan ialah "#
", penyemak imbas akan kembali ke bahagian atas halaman. Kami tidak mahu melihat hasil seperti itu di sini, kerana dalam banyak kes, kotak pensuisan kami
tidak semestinya pada skrin pertama halaman web Jika anda mengklik pautan untuk kembali ke bahagian atas, pelawat tidak akan melihatnya dengan serta-merta perubahan pada lapisan kandungan. Maksud
mencipta kesan penukaran label hilang.
3. Kami menetapkan onclick action avascript:woaicssq(x) untuk pautan. Di sini kami menghantar parameter kepada javascript untuk
melaksanakan skrip yang berbeza untuk mencapai kesan pensuisan.

4. Mula menulis skrip javascript:


function woaicssq(num){
for(var id = 1;id {
var MrJin="woaicss_con"+id;
if(id==num) document.getElementById(MrJin).style.display="block";
other
document (MrJin).style.display="none";
}
if(num==1)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1"
if ( num==2)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2";
if(num==3)
document.getElementById("woaicsstitle").className=" woaicss_title woaicss_title_bg3";
if(num==4)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4";
}
Penjelasan ringkas tentang prinsip kerja skrip javascript:
(Memandangkan laman web ini 52CSS.com hanya membincangkan CSS, kami tidak akan menganalisis skrip ini secara terperinci di sini)
1. Tetapkan fungsi woaicssq dan dapatkan parameter daripada pautan pensuisan label, seperti: javascript:woaicssq (2)
2. Nyatakan id pembolehubah mempunyai nilai 1 dan kurang daripada atau sama dengan 4. Ini adalah nilai untuk empat lapisan kandungan kami.
3. Isytiharkan pembolehubah MrJin sebagai "woaicss_con"+id; (Sila ambil perhatian bahawa kami menetapkan id lapisan kandungan dalam langkah pertama, seperti:
id="woaicss_con2".) Apabila id adalah nilai yang ditentukan , maka atribut lapisan ini ialah display="block";. Jika tidak, atribut lapisan ialah
display="none". Iaitu, fungsi penukaran untuk memaparkan dan menyembunyikan lapisan kandungan direalisasikan.
4. Apabila id pembolehubah ialah nilai antara 1 dan 4, takrifkan gaya bekas dengan id woaicsstitle, seperti:
woaicss_title woaicss_title_bg3. Dengan cara ini, kita boleh menentukan gaya yang berbeza untuk menukar pautan melalui kelas yang berbeza Apabila lapisan tertentu dipaparkan, kita boleh memberikan beberapa arahan kepada pautan yang sepadan dengan lapisan tersebut. Seperti keadaan tab yang diserlahkan, dsb.

5. Mula menulis CSS:


* {
list-style-type:none; tiada;
margin:0;
padding:0;
}
Pernyataan susun atur umum, keluarkan tanda lalai item senarai, tetapkan saiz teks kepada 12px, keluarkan baris hiasan teks dan jidar dalam Margin semuanya
sifar.


.woaicss {
lebar: 438px;
tinggi: 300px;
limpahan: tersembunyi; Tukar takrif gaya tetingkap, tetapkan lebar dan tinggi, tetapkan limpahan kepada tersembunyi, tetapkan jidar atas dan bawah kepada 50px, tetapkan jidar kiri dan kanan kepada automatik dan capai penjajaran tengah
mendatar.


.woaicss_title {
lebar: 438px;
tinggi: 30px;
url(btn_bg.png) tidak berulang; }
Gaya senarai UL tidak tertib, lebar dan tinggi ditetapkan dan imej latar belakang ialah btn_bg.png.


.woaicss_title li {
paparan:sekat;
apungan: kiri;
jidar: 2px 0 0; :center;
}
Gaya item senarai dalam senarai tidak tersusun, ditetapkan sebagai elemen blok dan gunakan apungan ke kiri, dengan jidar kanan 2px. Jadikan item senarai sebaris, dengan teks
dijajarkan di tengah.


.woaicss_title li a {
paparan:blok;
lebar: 90px
tinggi: 30px
tinggi baris: 34px; fff;
}
　Gaya pautan item senarai ditetapkan kepada elemen blok dan lebar dan tinggi ditetapkan ialah 34px dan warnanya ialah warna putih:#fff; >
.woaicss_title li a:hover {
color:#f0f0f0;
text-decoration:underline;
}
Gaya tuding pautan item senarai, warnanya ialah #f0f0f0, dan garis bawah digunakan sebagai garis hiasan.


.woaicss_title_bg1 {background-position:0 0;}
.woaicss_title_bg2 {background-position:0 -30px;}
.woaicss_title_bg3 {background-position;}0 -60px
.woaicss_title_bg4 {background-position:0 -90px;}
Sila hubungi skrip javascript dalam langkah 4 untuk definisi empat gaya ini. Iaitu, apabila nilai fungsi berubah, gaya
senarai tidak tersusun ditakrifkan semula dengan sewajarnya. Di sini kami melaraskan kedudukan imej latar belakang untuk mencapai keadaan kad tab yang menonjol.


.woaicss_con {
paparan:blok;
lebar:438px;
tinggi: 270px
latar belakang:url(con_bg.png) tiada ulangan 0 0; overflow:hidden;
}
　Definisi gaya lapisan kandungan, nyatakan lebar dan tinggi, dan tetapkan imej latar belakang con_bg.png. 52CSS.com sila beri perhatian khusus kepada fakta bahawa imej latar belakang
di sini harus digabungkan dengan lancar dengan imej latar belakang senarai UL yang tidak tersusun. Iaitu, mereka kelihatan sebagai satu keseluruhan.

6. Pengayaan kandungan:

Kami mengisi lapisan kandungan dengan kandungan tertentu dan mencantikkannya, contohnya: (Hanya satu yang dijelaskan, tiga lagi adalah sama.)

• Tutorial pemalam Pembangun Web Alat reka bentuk tambahan susun atur halaman web CSS! Penerangan grafik terperinci
  !


• Saluran Templat CSS dikemas kini pada 5 April, menambah 22 set templat


• Klasik peringkat kemasukan XHTML dan CSS bermula dari awal Siri tutorial!


• Contoh Bermula Reka Letak DIV+CSS (Jadual Kandungan)

>
•  
DIV Contoh susun atur CSS: Sepuluh langkah menggunakan reka letak tapak web css! (Jadual Kandungan)

• 
   
Tutorial Standard WEB2.0 Dua belas hari pembelajaran asas langkah demi langkah!

•  
Tutorial reka letak web Div+CSS!

Lapisan kandungan kami yang diperkaya ialah senarai UL tidak tersusun dan kami mentakrifkan gayanya:

.woaicss_con ul {
lebar:418px ;
tinggi:250px;
jidar: 12px auto; ;
white-space:nowrap;
text-overflow: elipsis;
limpahan: tersembunyi; text-decoration:underline;
}
Ini bukan fokus artikel ini, jadi saya tidak akan menerangkan secara terperinci untuk pengetahuan, sila rujuk: >>> Artikel 52CSS.com pada senarai UL pengeluaran
Tujuh: Pengubahsuaian terperinci

Pautan di sini tidak memainkan peranan sebenar dalam pengalihan URL Ia hanya label, jadi kami boleh mengalih keluar bingkai bertitik untuk
dibuat page kami lebih kemas dan natural. Simpan kod berikut sebagai fail xuxian.htc:






Kami menambah kod ini dalam gaya CSS: a {behavior:url(xuxian. htc )}
Dengan cara ini, bingkai bertitik pautan boleh dialih keluar (sila ambil perhatian bahawa kesan ini tidak sah dalam FF).

Lapan: Kesan akhir dan inferens:
Kami akhirnya boleh mencapai kesan ini, anda boleh >>> klik di sini untuk melihat
Dalam pelaksanaan kami Anda mungkin menghadapi situasi lain di tempat kerja:
Kita perlu menukar apabila tetikus bergerak melintasinya dan membuka pautan ke kandungan yang sepadan apabila tetikus mengklik.
Kita boleh mencapai ini dengan mengubah suai senarai UL tidak tertib seperti berikut:





52CSS.com



Tutorial CSS Div


 

Contoh Reka Letak CSS

 
• Piawaian WEB

🎜> Kami mencapai kesan ini melalui sedikit pelarasan.