ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLナビゲーションバーの設定方法
HTMLナビゲーションバーの設定方法
- coldplay.xixiオリジナル
- 2021-01-05 16:12:3048932ブラウズ
HTML ナビゲーション バーを設定する方法: 1. HTML5 のナビゲーション バー ラベルを直接使用します []; 2. リストの順序を解除し、デフォルトのスタイル設定を削除できます。フローティングに; 3. ハイパーリンクを設定します。
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>これが実際の効果です。
<!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 のセマンティクスは非常に弱く、タグの使用は非常に重要です。実際の 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ナビゲーションバーの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。