興味深いカスタムタグを使用してページをレイアウト_交流体験

今日は、興味深いカスタム タグを使用してページをレイアウトする方法を学びます。友人の中には、何気なく定義したタグをブラウザが正しく認識するにはどうすればよいのかと疑問を持つ人もいるかもしれません。

ここではドキュメントの名前空間を使用しますが、名前空間とは何を指すのでしょうか?

XML の優れた機能の 1 つはスケーラビリティであることは誰もが知っています。独自のタグを作成することも、他の人が作成したタグを使用することもできます。ここで問題が発生します。つまり、定義したタグ

は他の人が定義したタグと同じである可能性がありますが、それぞれは同じ意味を表します。でも違います。

たとえば、Blue という名前の 2 人の人がいて、1 人は Classic にいて、もう 1 人は Tianya にいます。彼らを見つけたい場合は、次のように説明できます。Tianya: Blue、クラシック：青色なので迷うことはありません。

名前空間の意味は、このドキュメントが誰に属しているかを他の人に伝えることです。 xhtml は html から xml への移行の産物であり、ここで名前空間も提供します。

以下の例を見てください。blueidea という名前のプレフィックスを付けています。http://bbs.blueidea.com は、名前空間を記述するために使用される URL です。 xmlns は xhtml 名前空間を参照します

コードをコピー コードは次のとおりです:

興味深いことに、マークアップに中国語を使用することもできます (中国語ではエンコードの問題が発生する可能性があります)。このような文書は本当に一目瞭然です。

以下では、「ニュース タイトル」形式と呼ばれるタグを定義します。これは、「blueidea: ニュース タイトル」となります。

コードをコピー コードは次のとおりです:

latest updatetitle>
次に、CSS の形式で定義します:


blueidea: ニュース タイトル {

}

カスタマイズされたタグのデフォルト属性は、a や span などのインライン要素に少し似ていることに注意してください。

以下は私が書いた基本的なレイアウトです (IE5,6,7 FF2 OP9 対応) XML と同様に、カスタム タグも実際に使用されます。皆さん、急いで自分で試してみてください。練習を通じて多くのことが自分で探求されているからです。

<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="/static/imghwm/default1.png" data-src="http://bbs.blueidea.com/images/blue/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="興味深いカスタムタグを使用してページをレイアウト_交流体験"></blueidea:>站点标志> <blueidea:> <a href="#">ホーム</a> <a href="#">仕事</a> <a href="#">連絡先</a> </blueidea:>导航菜单> </blueidea:>页面上部> <blueidea:> <blueidea:> <blueidea:>最新アップデート</blueidea:>新闻标题> <blueidea:> <li>・ああああああああ</li> <li>・ああああああああ</li> <li>・ああああああああ</li> <li>・ああああああああ</li> <li>・ああああああああ</li> <li>・ああああああああ</li> </blueidea:>新闻列表> </blueidea:>主体左侧> </blueidea:>主体部分> <blueidea:>sssss</blueidea:>页面> <blueidea:>sssss</blueidea:>页面> <blueidea:>sssss</blueidea:>页面> <blueidea:></blueidea:>页面下部>
[Ctrl+A ですべて選択 注: 外部 Js を導入する必要がある場合は、それを更新して を実行する必要があります]