Javascript HTML+CSS はクラシックなオレンジ色のナビゲーション menu_javascript スキルを実装します
この記事では、JavaScript と HTML CSS を組み合わせてオレンジ色のナビゲーション メニューを実装する例を紹介します。具体的な内容は次のとおりです。
レンダリング:
<html >
<head>
<title>超漂亮的HTML导航菜单CSS代码</title>
<style>
#top {
display: block;
text-align: left;
height: 105px;
position: relative;
z-index: 0;
}
.m {
margin: 0 auto;
width: 970px;
}
body {
font-size: 12px;
}
a {
color: #333;
text-decoration: none;
}
a:link {
text-decoration: none;
}
/* Download by http://hovertree.com*/
a.blue:link, a.blue:visited {
color: #014cc9;
text-decoration: none;
}
a.blue:hover, a.blue:active {
color: #014cc9;
text-decoration: underline;
}
a.org:link, a.org:visited {
color: #ff4e00;
text-decoration: none;
}
a:hover, a:active, a.org:hover, a.org:active {
color: #ff4e00;
text-decoration: underline;
}
#navpart {
background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) repeat-x center top;
height: 105px;
width: 950px;
z-index: 0;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
clear: both;
position: relative;
}
#navpart .sideleft {
background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat left bottom;
float: left;
height: 105px;
width: 6px;
}
#navpart .sideright {
background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat right bottom;
float: right;
height: 105px;
width: 6px;
}
#navmenubar {
height: 32px;
float: left;
display: inline;
margin: 0 -6px;
width: 100%;
position: relative;
z-index: 3;
top: 0;
}
#hot {
background: url(http://hovertree.com/hvtimg/201508/7qmwfe9p.png) no-repeat left top;
height: 21px;
width: 19px;
position: absolute;
top: -5px;
right: 2px;
z-index: 666;
background:black;
}
#navmenubar .sideleft {
background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat left bottom;
float: left;
height: 32px;
width: 6px;
display: inline;
margin: 0 0 0 8px;
}
#navmenubar .sideright {
background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat right bottom;
float: left;
height: 32px;
width: 6px;
display: inline;
margin: 0 4px 0 -2px;
}
/* NAVMENU */
#navmenubar .navmenu {
background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) repeat-x center top;
height: 32px;
padding: 0;
margin: 0;
float: left;
display: inline;
}
#navmenubar .navmenu li {
float: left;
white-space: nowrap;
margin: 0px;
padding: 0px;
display: inline;
}
#navmenubar .navmenu li a {
background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 0;
width: 80px;
padding: 7px 2px 5px 0;
float: left;
line-height: 20px;
height: 20px;
text-align: center;
}
#navmenubar .navmenu li a:hover {
background-position: 0 -32px;
color: #602800;
text-decoration: none;
padding: 8px 2px 4px 0;
}
#navmenubar .navmenu .current a, #navmenubar .navmenu .current a:hover {
background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 -64px;
font-weight: 600;
color: #FFF;
font-size: 14px;
padding: 7px 2px 5px 0;
}
#top #navpart .content {
margin-top: 40px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 900px;
height: auto;
color: white;
}
#top #navpart .content a {
color: white;
display: inline-block;
margin-top: 0px;
height: 30px;
border: 0px solid white;
line-height: 30px;
padding: 10px;
}
.clear {
clear: both;
display: block;
font: 0px/0 sans-serif;
height: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="top" class="m">
<div id="navpart">
<div class="sideleft"></div>
<div class="sideright"></div>
<!--NavMenu-->
<div id="navmenubar">
<div class="sideleft"></div>
<ul class="navmenu">
<li class="current"><a href="#" target="_top" title="首页">脚本之家</a></li>
<li><a href="#"><span>编程资源</span></a></li>
<li><a href="#"><span>在新手册</span></a></li>
</ul>
<div class="sideright"></div>
<div class="sideleft"></div>
<ul class="navmenu">
<li><a href="#"><span>网页制作</span></a></li>
<li><a href="#"><span>网络编程</span></a></li>
<li><a href="#"><span>平面设计</span></a></li>
<li><a href="#"><span>操作系统</span></a></li>
</ul>
<div class="sideright"></div>
<div>
<div class="content">
<a href="#" target="_blank">特效代码</a>
<a href="#" target="_blank">特效代码</a>
<a href="#" target="_blank">特效代码</a>
<a href="#" target="_blank">特效代码</a>
<a href="#" target="_blank">特效代码</a>
<a href="#" target="_blank">特效代码</a>
<a href="#" target="_blank">特效代码</a>
<a href="#" target="_blank">特效代码</a>
<a href="#" target="_blank">特效代码</a>
<a href="#" target="_blank">特效代码</a>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</body>
</html>
皆さんの JavaScript プログラミングの学習に役立つことを願っています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
ブートストラップリストでデフォルトスタイルを削除する方法は？
Apr 07, 2025 am 10:18 AM
ブートストラップリストのデフォルトスタイルは、CSSオーバーライドで削除できます。より具体的なCSSルールとセレクターを使用し、「近接原理」と「重量原理」に従って、ブートストラップのデフォルトスタイルをオーバーライドします。スタイルの競合を避けるために、よりターゲットを絞ったセレクターを使用できます。オーバーライドが失敗した場合は、カスタムCSSの重量を調整します。同時に、パフォーマンスの最適化に注意を払い、重要な！の過剰使用を避け、簡潔で効率的なCSSコードを書いてください。
ブートストラップフレームワークを構築する方法
Apr 07, 2025 pm 12:57 PM
ブートストラップフレームワークを作成するには、次の手順に従ってください。CDN経由でブートストラップをインストールするか、ローカルコピーをインストールします。 HTMLドキュメントを作成し、ブートストラップCSSを＆lt; head＆gt;にリンクしますセクション。 bootstrap javascriptファイルを＆lt; body＆gt;に追加するセクション。ブートストラップコンポーネントを使用して、ニーズに合わせてスタイルシートをカスタマイズします。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップのレイアウト方法
Apr 07, 2025 pm 02:24 PM
Bootstrapを使用してWebサイトをレイアウトするには、グリッドシステムを使用してページをコンテナ、行、列に分割する必要があります。最初にコンテナを追加し、その中の行を追加し、行内の列を追加し、最後に列にコンテンツを追加します。ブートストラップのレスポンシブレイアウト関数は、ブレークポイント（XS、SM、MD、LG、XL）に従ってレイアウトを自動的に調整します。レスポンシブクラスを使用することで、異なる画面サイズの下の異なるレイアウトを実現できます。
ブートストラップにファイルをアップロードする方法
Apr 07, 2025 pm 01:09 PM
ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します（FormDataを使用してデータを収集し、サーバーに送信します）。カスタムスタイル（オプション）。
ブートストラップの日付を確認する方法
Apr 07, 2025 pm 03:06 PM
ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。
