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>

Copy after login

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 of this Website

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