Rumah  >  Artikel  >  hujung hadapan web  >  Ringkasan reka letak css+div di bawah XHTML Super recommendation_Experience exchange

Ringkasan reka letak css+div di bawah XHTML Super recommendation_Experience exchange

WBOY
WBOYasal
2016-05-16 12:09:391516semak imbas

Dengan kemunculan xml (Extensible Markup Language), dokumen dan data berstruktur mempunyai format universal dan boleh disesuaikan, yang boleh digunakan bukan sahaja di web, tetapi juga di mana-mana sahaja. Piawaian dipanggil mungkin.
XHTML ialah singkatan kepada Bahasa Penanda HyperText Extensible. Berdasarkan HTML4.0, ia dilanjutkan dengan peraturan XML untuk mendapatkan XHTML. Ia melaksanakan peralihan daripada HTML kepada XML.
CSS ialah singkatan dari Cascading Style Sheets. Gabungan reka letak CSS tulen dan XHTML berstruktur boleh membantu pereka bentuk memisahkan rupa dan struktur, menjadikan tapak lebih mudah untuk diakses dan diselenggara. 1) Tambahkan DOCTYPE yang betul pada halaman
DOCTYPE ialah singkatan jenis dokumen. Terutamanya digunakan untuk menunjukkan versi XHTML atau HTML yang anda gunakan. Penyemak imbas mentafsir kod halaman mengikut DTD (Definisi Jenis Dokumen) yang ditakrifkan oleh DOCTYPE anda.
XHTML1.0 menyediakan tiga pilihan DOCTYPE:
(1) Peralihan - sangat biasa digunakan.

(2) Ketat (Ketat)

(3) Frameset (Frameset)
2) Tetapkan ruang nama (Namespace)
Tambah kod berikut terus selepas pengisytiharan DOCTYPE:

Ruang nama ialah DTD terperinci yang mengumpulkan jenis elemen dan nama atribut Pengisytiharan ruang nama membolehkan anda mengenal pasti ruang nama anda melalui penuding alamat dalam talian. Hanya masukkan kod seperti biasa.

3) Isytiharkan bahasa pengekodan anda

Untuk ditafsirkan dengan betul oleh penyemak imbas dan lulus pengesahan teg, semua dokumen XHTML mesti mengisytiharkan bahasa pengekodan yang mereka gunakan. Kodnya adalah seperti berikut:

Bahasa pengekodan yang diisytiharkan di sini ialah Bahasa Cina Ringkas GB2312 Jika anda perlu menghasilkan kandungan Cina Tradisional, anda boleh mentakrifkannya sebagai BIG5.
4) Tulis semua teg dalam huruf kecil
XML sensitif huruf besar-besaran, jadi XHTML juga sensitif huruf besar. Semua elemen XHTML dan nama atribut mestilah huruf kecil. Jika tidak, dokumen anda akan dianggap tidak sah oleh pengesahan W3C. Contohnya, kod berikut tidak betul:

5) Tambahkan atribut alt pada imej

Tambah atribut alt pada semua imej. Atribut alt menentukan bahawa teks gantian dipaparkan apabila imej tidak dapat dipaparkan Ini boleh diketepikan untuk pengguna biasa, tetapi ia adalah penting untuk pelayar teks sahaja dan pengguna yang menggunakan pembaca skrin. Hanya apabila atribut alt ditambahkan, kod akan lulus semakan ketepatan W3C. Ambil perhatian bahawa kita perlu menambah atribut alt yang bermakna Menulis seperti berikut tidak bermakna:

Tulisan yang betul:


6) Tambahkan semua nilai atribut Petikan

Dalam HTML, anda tidak perlu memetik nilai atribut, tetapi dalam XHTML, ia mesti dipetik. Atribut juga mesti dipisahkan oleh ruang.
Contoh: Ini juga tidak betul

7) Tutup semua teg

Dalam XHTML, setiap teg yang terbuka mesti ditutup. Teg kosong juga harus ditutup, menggunakan garis miring ke hadapan "/" di hujung teg untuk menutup sendiri. Contohnya:

8) Ikon kecil kegemaran
Contohnya: Mula-mula buat ikon 16x16, namakannya favicon.ico, dan letakkannya dalam direktori akar. Kemudian benamkan kod berikut ke dalam kawasan kepala:

9) Gunakan CSS untuk menentukan penampilan elemen
Satu faedah menggunakan reka letak CSS ialah anda boleh mengubah suai halaman dalam kelompok , yang boleh mengubah struktur dokumen Asingkan daripada lapisan pembentangan untuk mengurangkan beban kerja dan beban pelayan, dan meningkatkan keupayaan pengembangan dan aplikasi tapak.
CSS tidak membezakan antara ruang dan huruf besar berikut ialah beberapa ringkasan asas
(1) Nilai warna
Nilai warna boleh ditulis dalam nilai RGB, contohnya: warna: rgb(255,0,0). ), ia juga boleh ditulis dalam perenambelasan, sama seperti warna:#FF0000 dalam contoh di atas. Jika nilai heksadesimal diulang secara berpasangan, ia boleh disingkatkan dengan kesan yang sama. Contohnya: #FF0000 boleh ditulis sebagai #F00. Walau bagaimanapun, ia tidak boleh disingkatkan jika ia tidak berulang Contohnya, #FC1A1B mesti diisi dengan enam digit.
(2) Tentukan fon
Piawaian web mengesyorkan kaedah definisi fon berikut:
badan { font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif };
Fon dipilih dalam susunan yang disenaraikan. Jika komputer pengguna mengandungi fon Lucida Grande, dokumen itu akan dinamakan Lucida Grande. Jika tidak, ia ditetapkan sebagai fon Verdana, jika tiada Verdana, ia ditetapkan sebagai fon Lucida, dan seterusnya
Fon Lucida Grande sesuai untuk Mac OS X
Fon Verdana sesuai untuk semua Windows; sistem;
Lucida sesuai untuk pengguna UNIX
"Song Ti" sesuai untuk pengguna Cina ringkas
Jika tiada fon tersenarai tersedia, fon sans-serif lalai boleh dijamin dipanggil;
(3) Pemilih Kumpulan
Apabila beberapa elemen mempunyai atribut gaya yang sama, pernyataan boleh dipanggil bersama, dan elemen dipisahkan dengan koma:
p, td, li { font-size: 12px; }
(4) Pemilih terbitan
Anda boleh menggunakan pemilih terbitan untuk mentakrifkan gaya untuk elemen anak dalam elemen, contohnya:
li kuat { font-style: font-weight: normal;}
adalah untuk elemen kanak-kanak di bawah li strong mentakrifkan gaya condong tetapi tidak berani.
(5)sélecteur d'identifiant
La mise en page CSS est principalement implémentée à l'aide du calque "div", et le style du div est défini via le "sélecteur d'identifiant". Par exemple, on définit d'abord un calque
puis on le définit comme ceci dans la feuille de style :
#menubar {MARGIN : 0px;BACKGROUND : #FEFEFE;COLOR : #666;}
où "menubar" est défini par votre nom d'identification. Notez le signe "#" devant.
Le sélecteur d'identifiant prend également en charge la dérivation, par exemple :
#menubar p { text-align : right; margin-top : 10px }
Cette méthode est principalement utilisée pour définir les calques et ceux qui sont plus complexes. et ont de nombreux éléments dérivés.
(6) Sélecteur de catégorie
Utilisez un point en CSS pour indiquer la définition du sélecteur de catégorie, par exemple :
.14px {color : #f60 ;font-size:14px ;}
sur la page , utilisez la méthode class="category name" pour appeler :
Taille de police 14px
Cette méthode est relativement simple et flexible, et peut être créée et supprimée à tout moment en fonction des besoins de la page.
(7) Définir le style du lien
Quatre pseudo-classes sont utilisées en CSS pour définir le style du lien, à savoir : a:link, a:visited, a:hover et a:active, pour exemple :
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
Les déclarations ci-dessus définissent respectivement les styles de "liens, liens visités, lorsque la souris est survolée et lorsque la souris est cliquée". Notez que vous devez écrire dans l’ordre ci-dessus, sinon l’affichage pourrait être différent de ce à quoi vous vous attendiez. N'oubliez pas qu'ils sont dans l'ordre "LVHA".
(8) Utilisez des sélecteurs en combinaison pour créer des effets de design exquis
Remplacez les points noirs ennuyeux devant les listes ordinaires non ordonnées par de beaux motifs. Sitehttp://marine.happycog.com...
Utilisez d'abord les règles CSS pour indiquer la liste non ordonnée de l'inventaire des attributs de catégorie.
ul.inventory{
list-style:disc url(/images/common/lister2.gig) inside;}
Son tag d'appel :
Angelfish(67 items)
Anges/ Frogfish (35 articles)
Angelfish(5526 articles)
Angelfish(15 articles)
(9) Les abréviations sont dans le sens des aiguilles d'une montre
margin:25px 0 25px 0;
(10) Hauteur de la ligne
hauteur de ligne : 150 % indique que l'espacement des lignes est de 150 % de la normale
10) Code structuré div (division), identifiant, classe
Utilisez-les pour écrire du xhtml compact, utilisez le CSS plus judicieusement.
(1) Les balises d'identification structurées sont différentes de celles de classe :
Si votre page d'attributs contient un div avec un identifiant "content", elle ne peut pas avoir un autre div ou un autre élément portant le même nom. . En revanche, l’attribut class peut être utilisé encore et encore sur une page.
(2) Règles pour l'identifiant
Une valeur d'identifiant doit commencer par une lettre ou un trait de soulignement. Elle ne peut pas commencer par un chiffre puis suivre des lettres, des chiffres et des traits de soulignement. Espaces et tirets : les deux ne sont pas autorisés.
11) Le site Web terminé peut aller au w3c pour une correction standard
http:validator.w3.org
http://jigsaw.w3.org/css-v ...

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn