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>

<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ナビゲーションバーの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。