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

text-decoration 属性は、テキストグルーミングに何を追加するかを指定します。可能な値と説明は以下のとおりです

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

DIVとCSSを使用して作成する方法ナビゲーションバー

div +css で第一レベルのナビゲーションを作成

CSS を使用して DIV を中央に配置する方法

以上がフロントエンド Web ページをデザインするときに、ナビゲーションバーを中央揃えにする方法 (コードテスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

GraphQLキャッシングの使用Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

上品でクールなカスタムCSSスクロールバー：ショーケースMar 10, 2025 am 11:37 AM

この記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます

最初のカスタムSvelteトランジションを作成しますMar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

ショー、Don＆＃039; t TellMar 16, 2025 am 11:49 AM

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか？新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

Redwood.jsと動物相を使用してイーサリアムアプリを構築しますMar 28, 2025 am 09:18 AM

最近のビットコインの価格が20k $ $ USDを超えており、最近30Kを破ったので、イーサリアムを作成するために深く掘り下げる価値があると思いました

NPMコマンドは何ですか？Mar 15, 2025 am 11:36 AM

NPMコマンドは、サーバーの開始やコンパイルコードなどの1回限りのプロセスまたは継続的に実行されるプロセスとして、さまざまなタスクを実行します。

特異性について話すために（x、x、x、x）を使用しましょう（x、x、x、x）Mar 24, 2025 am 10:37 AM

先日、エリック・マイヤーとおしゃべりをしていたので、形成期のエリック・マイヤーの話を思い出しました。 CSS特異性に関するブログ投稿を書きました

CSSを使用して、テキストシャドウやグラデーションなどのテキスト効果を作成しますか？Mar 14, 2025 am 11:10 AM

この記事では、影やグラデーションなどのテキスト効果にCSSを使用し、パフォーマンスのために最適化し、ユーザーエクスペリエンスの向上について説明します。また、初心者向けのリソースもリストしています。（159文字）

See all articles

ホットAIツール

ホットツール

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。