フロントエンド Web ページをデザインするときに、ナビゲーションバーを中央揃えにする方法 (コードテスト)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

フロントエンド Web ページをデザインするときに、ナビゲーションバーを中央揃えにする方法 (コードテスト)

藏色散人

Aug 09, 2018 am 09:57 AM

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 ページに表示されます:

フロントエンド Web ページをデザインするときに、ナビゲーションバーを中央揃えにする方法 (コードテスト) 関連の紹介タグ属性: