ホームページ  >  記事  >  ウェブフロントエンド  >  独自のナビゲーション ページを作成して、今すぐ行動してください。 _html/css_WEB-ITnose

独自のナビゲーション ページを作成して、今すぐ行動してください。 _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:34:351149ブラウズ

誰もがナビゲーション サイトを使用したことがあると思いますが、私も例外ではありません。しかし、ある日突然、自分でナビゲーションを作ってみようかと思いました。以前はローカル API やオンライン API がたくさんあり、それらを使用するたびに見つけるのに時間がかかりました。今では、小さなナビゲーションを構築しました。一目でわかるページですね(笑)!

これは私のナビゲーション ページのソース コードです。心からの贈り物です:

< html xmlns = "http://www.w3.org/1999/xhtml" >

< head >

< メタ http-equiv = "コンテンツ タイプ" コンテンツ = "text/html; charset=GB2312"

<マイ ホームページ / css" >

.main {

margin-top: 50px;

background-color: #D9FF99;

.title {

font-size: 40px;

color: #CC6633;

フォント- ファミリー: "Hanzhen Guangbiao"、"Youyuan"、"Microsoft Yahei"、サンセリフ;

text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5); : ブロック;

幅: 960px;

マージン: 0;

.content li {

;

幅: 192 ピクセル;

高さ: 100 ピクセル;

テキスト整列: 中央;

フォント サイズ: 24 ピクセル;

.content li a {

表示: ブロック;

高さ: 60 ピクセル;

テキスト整列: 中央;

背景-色: 緑;

マージン: 18px 25px;

.content li a:hover {

< ;/ スタイル >

< テーブル幅 = "960" セルスペース = "0" クラス = "メイン"整列 = "中央"

<

<テーブル幅 = "960" ボーダー = "0" セルスペース = "0" セルパディング = "0" >

< tr>

< td 幅 = "382" >< img

src = "http://images.cnitblog.com/blog/343602/201310/28113106-18da6293d7a44fed97ce8b1dadaa6c30.jpg"

width = " 382" 高さ = "101" 境界線 = "0" />< /td>

< td width = "578" align = "center" bgcolor = "#D5EDB3" >< span class = "title" >我 的 主 页

< tr 高さ = "10" >

< td bgcolor = "#004000" > > td >

< tr>

< td class = "コンテンツ" >

<ウル>

这就是最终效果:

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。