When designing a front-end web page, how to center-align the navigation bar? (Code test)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

When designing a front-end web page, how to center-align the navigation bar? (Code test)

藏色散人

Aug 09, 2018 am 09:57 AM

For those who are new to designing the front-end of a website, it is inevitable that the navigation bar will be messed up. Generally, aligning the navigation bar in the center is the best way to display the homepage. So how to use simple div css to make the navigation bar center aligned? This article will introduce in detail a very simple method to achieve center alignment of the navigation bar. I hope it will be helpful to you!

The sample code for centering the navigation bar is as follows:

<!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>

This code can be copied directly for local testing, and the following image will be displayed on the web page:

When designing a front-end web page, how to center-align the navigation bar? (Code test) Introduction to related tag attributes:

text-decoration attribute specifies the decoration added to the text. The possible values and descriptions are as follows

When designing a front-end web page, how to center-align the navigation bar? (Code test)

[Related article recommendations]

Detailed examples of five methods in CSS to achieve horizontal centering of navigation menus

How to use DIV and CSS to make a navigation bar

div css to make a first-level navigation

How to Use CSS to center the DIV

The above is the detailed content of When designing a front-end web page, how to center-align the navigation bar? (Code test). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.

See all articles