HTMLナビゲーションバーの設定方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLナビゲーションバーの設定方法

coldplay.xixi

Jan 05, 2021 pm 04:12 PM

htmlナビゲーションバー

HTML ナビゲーションバーを設定する方法: 1. HTML5 のナビゲーションバーラベルを直接使用します [
]; 2. リストの順序を解除し、デフォルトのスタイル設定を削除できます。フローティングに; 3. ハイパーリンクを設定します。

HTMLナビゲーションバーの設定方法

#この記事の動作環境: Windows 7 システム、html5 バージョン、Dell G3 コンピューター。

推奨:

HTML チュートリアル

HTML ナビゲーションバーの設定方法:

1. まず、 HTML5 を直接使用できます

のナビゲーションバーのラベルは次のとおりです

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">新闻</a>
<a href="#">关于我们</a>
</nav>
</body>
</html>

これが実際の効果です。

HTMLナビゲーションバーの設定方法

#2 下線や色などを削除できます。次に、リストの順序を解除し、デフォルトのスタイル設定をフロートに削除できます。具体的なコードは次のとおりです

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul{
height: 100px;
width:100%;
list-style-type: none; //取消无序列表的固定样式
}
ul li{
float:left;
margin: 20px;  //设置三个元素的外间距
}
</style>
</head>
<body>
<ul>
<li><a href="">首页<a></li>
<li><a href="">新闻<a></li>
<li><a href="">关于我们<a></li>
</ul>
</body>
</html>

これが実際のレンダリングです。

HTMLナビゲーションバーの設定方法

3. ハイパーリンクを設定する

ここで言いたいことは、

のサブセット要素は次のことができるということです。

 だけであり、それ以外のことはできません。HTML のセマンティクスは非常に弱く、タグの使用は非常に重要です。実際の Web 開発では、さまざまなタグのセマンティクスと重みが重要になります。が異なるため、最適化も同じではありません。

4. ブートストラップを使用すると、具体的なコードと詳細なコメントを確認できます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrap的学习</title>
<!--导入基本样式-->
<link style="text/css" rel="stylesheet" href="css/bootstrap.css">  
<!--导入基本样式的压缩-->
<link style="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<!--导入主题样式  注意：顺序 不可变-->
<link style="text/css" rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>
<!--类nav清除列表的默认样式  nav-tabs定义tabs的标题栏-->
<ul class="nav nav-tabs">
<li><a href="#tab2" data-toggle=tab">首页</a></li>
<li><a href="#tab2" data-toggle=tab">关注</a></li>
<li><a href="#tab2" data-toggle=tab">个人中心</a></li>
</ul>
 
</body>
</html>

実際の効果は次のとおりです

HTMLナビゲーションバーの設定方法

プログラミング関連の知識について詳しくは、

プログラミング教育をご覧ください。！

以上がHTMLナビゲーションバーの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

See all articles