Susun atur halaman dengan tag tersuai yang menarik_Pertukaran pengalaman

Hari ini kita akan belajar cara menggunakan tag tersuai yang menarik untuk susun atur halaman. Sesetengah rakan mungkin mempunyai soalan ini, bagaimana penyemak imbas boleh mengecam dengan betul tag yang telah mereka takrifkan secara santai?

Di sini kita akan menggunakan ruang nama dokumen, jadi ruang nama merujuk kepada apa?

Semua orang tahu bahawa salah satu ciri hebat XML ialah kebolehskalaannya. Anda boleh membuat teg anda sendiri atau menggunakan teg yang dibuat oleh orang lain Terdapat masalah di sini, iaitu, teg yang anda takrifkan

mungkin sama dengan yang ditakrifkan oleh orang lain, tetapi masing-masing mewakili maksud yang sama. Tetapi berbeza.

Untuk memberikan analogi, contohnya, ada dua orang bernama Biru, seorang dalam Klasik dan seorang lagi dalam Tianya Jika anda ingin mencarinya, anda boleh menerangkannya seperti ini, Tianya: Biru, Klasik: Warna biru supaya tiada kekeliruan.

Maksud ruang nama adalah untuk memberitahu orang lain milik siapa dokumen ini. xhtml ialah hasil peralihan daripada html kepada xml, dan ia juga memberikan kami ruang nama di sini.

Lihat contoh di bawah, kami menamakan awalan bernama blueidea, http://bbs.blueidea.com ialah url yang digunakan untuk menerangkan ruang nama. xmlns merujuk kepada ruang nama xhtml

Salin kod Kod adalah seperti berikut:

Menariknya, kita juga boleh menggunakan bahasa Cina untuk markup (mungkin terdapat masalah pengekodan dalam bahasa Cina). Dokumen sedemikian kelihatan sangat jelas.

Di bawah kami mentakrifkan teg yang dipanggil format "tajuk berita" yang sepatutnya "blueidea: tajuk berita"

Salin kod Kod ini adalah seperti berikut:

& lt; Blueidea: Title News & GT; Kemas kini Terkini & lt;/Blueidea: Tajuk Berita & GT;
idea biru: Tajuk berita {

}
Perlu diingatkan bahawa atribut lalai bagi teg tersuai kami adalah sedikit seperti elemen sebaris seperti a dan span.

Berikut ialah reka letak asas yang saya tulis (Serasi dengan IE5, 6, 7 FF2 OP9) Bukankah ia sangat menarik Seperti XML, teg tersuai sebenarnya digunakan dalam xml. Semua orang, cepat-cepat mencuba sendiri, kerana banyak perkara telah diterokai oleh diri sendiri melalui latihan.

<style> * { padding:0; margin:0 } body{ text-align:center; } blueidea:页面上部 { position:relative; display:block; margin:0 auto; width:700px; height:150px; border-bottom:3px solid orange; background:black } blueidea:主体部分 { display:block; margin:0 auto; width:700px; text-align:left; background:#eee } blueidea:主体部分 blueidea:主体左侧 { display:block; width:220px; height:500px; border-right:1px solid #ddd; background:#f3f3f3 } blueidea:新闻标题 { display:block; padding-left:5px; height:25px; line-height:25px; background:#ccc } blueidea:新闻列表 { display:block; list-style:none; height:160px; background:#eee } blueidea:页面下部 { display:block; margin:0 auto; width:700px; height:100px; background:black } blueidea:站点标志 { position:absolute; top:20px; left:20px; padding-top:2px; display:block; width:90px; height:31px; background:#eee } blueidea:导航菜单 { position:absolute; top:124px; left:300px; display:block; } blueidea:导航菜单 a { float:left; margin-left:2px; width:60px; height:25px; font:12px/25px 宋体; color:white; text-decoration:none; border:1px solid orange; border-bottom:0; } blueidea:导航菜单 a:hover { border:1px solid #FDE201; border-bottom:0; } blueidea:页面 { border:1px solid #FDE201; } </style> <blueidea:> <blueidea:><img src="http://bbs.blueidea.com/images/blue/logo.gif" alt="Susun atur halaman dengan tag tersuai yang menarik_Pertukaran pengalaman"></blueidea:>站点标志> <blueidea:> <a href="#">rumah</a> <a href="#">kerja</a> <a href="#">hubungi</a> </blueidea:>导航菜单> </blueidea:>页面上部> <blueidea:> <blueidea:> <blueidea:>Kemas kini terkini</blueidea:>新闻标题> <blueidea:> <li>·aaaaaaaaaaaa</li> <li>·aaaaaaaaaaaa</li> <li>·aaaaaaaaaaaa</li> <li>·aaaaaaaaaaaa</li> <li>·aaaaaaaaaaaa</li> <li>·aaaaaaaaaaaa</li> </blueidea:>新闻列表> </blueidea:>主体左侧> </blueidea:>主体部分> <blueidea:>ssssss</blueidea:>页面> <blueidea:>ssssss</blueidea:>页面> <blueidea:>ssssss</blueidea:>页面> <blueidea:></blueidea:>页面下部>
[Ctrl+A untuk memilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semulanya untuk melaksanakan ]