Layoutseiten mit interessanten benutzerdefinierten Tags_Erfahrungsaustausch-CSS-Tutorial-php.cn

Layoutseiten mit interessanten benutzerdefinierten Tags_Erfahrungsaustausch

WBOY

Freigeben： 2016-05-16 12:10:20

Original

2555 Leute haben es durchsucht

Heute lernen wir, wie man interessante benutzerdefinierte Tags zum Layouten von Seiten verwendet. Einige Freunde haben möglicherweise die Frage: Wie kann der Browser die von ihnen beiläufig definierten Tags korrekt erkennen?

Hier verwenden wir den Namensraum des Dokuments. Worauf bezieht sich der Namensraum also?

Jeder weiß, dass eine der großartigen Eigenschaften von XML seine Skalierbarkeit ist. Sie können Ihre eigenen Tags erstellen oder von anderen erstellte Tags verwenden. Das Problem besteht darin, dass die von Ihnen definierten Tags

möglicherweise dieselben sind wie die von anderen definierten, aber sie haben jeweils die gleiche Bedeutung. Aber anders.

Um eine Analogie zu geben: Es gibt zum Beispiel zwei Personen namens Blue, eine ist in Classic und die andere in Tianya. Wenn Sie sie finden möchten, können Sie es so erklären, Tianya: Blue, Klassisch: Blaue Farbe, damit es keine Verwechslungen gibt.

Die Bedeutung des Namensraums besteht darin, anderen mitzuteilen, wem dieses Dokument gehört. xhtml ist das Produkt des Übergangs von HTML zu XML und stellt uns hier auch einen Namensraum zur Verfügung.

Sehen Sie sich das Beispiel unten an. Wir benennen ein Präfix namens blueidea. http://bbs.blueidea.com ist die URL, die zur Beschreibung des Namespace verwendet wird. xmlns bezieht sich auf den xhtml-Namespace

Code kopieren Der Code lautet wie folgt:

Interessanterweise können wir sogar Chinesisch für Markup verwenden (auf Chinesisch kann es zu Codierungsproblemen kommen). Ein solches Dokument sieht wirklich selbsterklärend aus.

Nachfolgend definieren wir ein Tag namens „News Title“-Format, das „blueidea: News Title“ lauten sollte

Code kopieren Der Code lautet wie folgt:

latest updatetitle> Dann definieren Sie ihn mit CSS, Format:

blueidea: Nachrichtentitel {

}
Es ist zu beachten, dass die Standardattribute unserer benutzerdefinierten Tags ein wenig wie Inline-Elemente wie a und span sind.

Das Folgende ist ein grundlegendes Layout, das ich geschrieben habe (kompatibel mit IE5, 6, 7 FF2 OP9). Ist es nicht sehr interessant? Wie XML werden benutzerdefinierte Tags tatsächlich in XML verwendet. Beeilen Sie sich alle und probieren Sie es selbst aus, denn viele Dinge haben Sie selbst durch Übung erforscht.

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="Layoutseiten mit interessanten benutzerdefinierten Tags_Erfahrungsaustausch"></blueidea:>站点标志>

<blueidea:>
<a href="#">Zuhause</a>
<a href="#">Arbeit</a>
<a href="#">Kontakt</a>
</blueidea:>导航菜单>

</blueidea:>页面上部>

<blueidea:>
<blueidea:>

<blueidea:>Neuestes Update</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:>页面下部>

[Strg+A, um alle auszuwählen. Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen ]