ホームページ > 記事 > ウェブフロントエンド > フロントエンド Web ページをデザインするときに、ナビゲーション バーを中央揃えにする方法 (コード テスト)
フロントエンド Web ページをデザインするときに、ナビゲーション バーを中央揃えにする方法 (コード テスト)
- 藏色散人オリジナル
- 2018-08-09 09:57:2714562ブラウズ
Web サイトのフロントエンドのデザインを始めたばかりの初心者の友人にとって、通常の状況では、ナビゲーション バーを中央揃えにすることがホームページを表示する最良の方法です。では、単純な div+css を使用してナビゲーション バーを中央揃えにするにはどうすればよいでしょうか?この記事では、ナビゲーションバーの中央揃えを実現する非常に簡単な方法を詳しく紹介しますので、ご参考になれば幸いです。
ナビゲーション バーの中央揃えのサンプル コードは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div+css做导航栏居中对齐示例</title>
</head>
<style>
body
{
text-align:center; /* 文字居中 */
}
ul
{
list-style-type:none; /* ul前面的点 */
}
*
{
margin:0px 0px; /* 到边框的距离 */
}
.menu
{
background: #029789; /* 导航条背景的颜色 */
}
.nav
{
margin:0 auto; /* 导航栏文字的位置 */
width:800px; /* 和文字宽度有关，不能小于文字宽度的总和 */
height:80px; /* 导航栏的宽度 */
}
.nav a
{
float:left; /* 导航栏的位置配置 */
width:140px; /* 选中的文字块的长度 */
line-height:80px; /* 选中的文字块的宽度 */
text-decoration: none; /* 去掉连接下划线 */
font-size:45px; /* 字体大小 */
color: #FFFFFF; /* 字体颜色 */
}
.nav li a:hover
{
background-color: #1094f2; /* 选中的文字块的颜色 */
text-decoration:none; /* 选中时去掉连接下划线 */
}
.nav li a:link{
text-decoration:none; /* 连接被点之后没有下划线 */
}
</style>
<body>
<div class="menu"> <!-- class选择器 -->
<div class="nav">
<ul> <!-- ul标签 -->
<li><a href="#">导航1</a></li> <!-- li标签 -->
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
</div>
</div>
</body>
</html>このコードはローカル テスト用に直接コピーでき、以下に示すように Web ページに表示されます:
関連の紹介タグ属性:
text-decoration 属性は、テキスト グルーミングに何を追加するかを指定します。可能な値と説明は以下のとおりです
【おすすめ関連記事】
CSSでナビゲーションメニューの水平方向の中央揃えを実現する5つの方法の詳細な例
以上がフロントエンド Web ページをデザインするときに、ナビゲーション バーを中央揃えにする方法 (コード テスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。