Maison >interface Web >tutoriel CSS >Pages de mise en page avec des balises personnalisées intéressantes_Échange d'expérience

Pages de mise en page avec des balises personnalisées intéressantes_Échange d'expérience

WBOYoriginal: 2016-05-16 12:10:202538parcourir

Aujourd'hui, nous allons apprendre à utiliser des balises personnalisées intéressantes pour mettre en page des pages. Certains amis peuvent se poser cette question : comment le navigateur peut-il reconnaître correctement les balises qu'ils ont définies avec désinvolture ?

Ici, nous utiliserons l'espace de noms du document, alors à quoi fait référence l'espace de noms ?

Tout le monde sait que l’une des grandes fonctionnalités de XML est son évolutivité. Vous pouvez créer vos propres balises ou utiliser des balises créées par d'autres. Il y a un problème ici, c'est-à-dire que les balises que vous définissez

peuvent être les mêmes que celles définies par d'autres, mais elles représentent chacune la même signification. Mais différent.

Pour donner une analogie, par exemple, il y a deux personnes nommées Blue, l'une est dans Classic et l'autre dans Tianya. Si vous voulez les trouver, vous pouvez l'expliquer comme ceci, Tianya : Blue, Classique : Couleur bleue donc il n'y a pas de confusion.

La signification de l'espace de noms est de dire aux autres à qui appartient ce document. xhtml est le produit de la transition du HTML vers le XML, et il nous fournit également ici un espace de noms.

Regardez l'exemple ci-dessous, nous nommons un préfixe nommé blueidea, http://bbs.blueidea.com est l'url utilisée pour décrire l'espace de noms. xmlns fait référence à l'espace de noms xhtml

Copier le code Le code est le suivant :

Fait intéressant, nous pouvons même utiliser le chinois pour le balisage (il peut y avoir des problèmes d'encodage en chinois). Un tel document semble vraiment explicite.

Ci-dessous, nous définissons une balise appelée format "titre de l'actualité" qui doit être "blueidea : titre de l'actualité"

Copier le code Le code est le suivant :

latest updatetitle> 
Puis définissez-le avec CSS, format : 

blueidea : Titre de l'actualité { 

}

Il est à noter que les attributs par défaut de nos balises personnalisées ressemblent un peu à des éléments en ligne tels que a et span.

Ce qui suit est une mise en page de base que j'ai écrite. (Compatible avec IE5, 6, 7 FF2 OP9) N'est-ce pas très intéressant ? Comme XML, les balises personnalisées sont en fait utilisées en XML. Tout le monde, dépêchez-vous et essayez-le vous-même, car beaucoup de choses ont été explorées par vous-même grâce à la pratique.

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="Pages de mise en page avec des balises personnalisées intéressantes_Échange dexpérience"></blueidea:>站点标志>

<blueidea:>
<a href="#">maison</a>
<a href="#">travail</a>
<a href="#">contact</a>
</blueidea:>导航菜单>

</blueidea:>页面上部>

<blueidea:>
<blueidea:>

<blueidea:>Dernière mise à jour</blueidea:>新闻标题>

<blueidea:>
<li>·aaaaaaaaaaa</li>
<li>·aaaaaaaaaaa</li>
<li>·aaaaaaaaaaa</li>
<li>·aaaaaaaaaaa</li>
<li>·aaaaaaaaaaa</li>
<li>·aaaaaaaaaaa</li>
</blueidea:>新闻列表>

</blueidea:>主体左侧>

</blueidea:>主体部分>

<blueidea:>ssssss</blueidea:>页面>
<blueidea:>ssssss</blueidea:>页面>
<blueidea:>ssssss</blueidea:>页面>
<blueidea:></blueidea:>页面下部>

[Ctrl+A pour tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter ]

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse des points clés de compatibilité CSS_Experience ExchangeArticle suivant：Analyse des points clés de compatibilité CSS_Experience Exchange

Articles Liés

Voir plus