Home >Web Front-end >CSS Tutorial >Create first-level navigation with div+css

Create first-level navigation with div+css

零下一度Original: 2017-04-28 11:01:371976browse

This article mainly shares how to make a simple navigation bar. It has a certain reference value, let’s take a look with the editor below

Today I will share how to make a simple navigation bar:

Step one: Introduce the css style sheet and create a new A layer with the id nav uses ff6d136ddc5fdfeffaf53ff6ee95f185, 25edfb22a4f469ecb59f1190150159c6, 3499910bf9dac5ae3c52d5ede7383485 tags to create the finished effect.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>
    </head>
    <body>
        <p id="nav">
            <ul>
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
            </ul>
        </p>
    </body>
</html>

The second step is to set the CSS style:

1. Set the attributes of nav

#nav{
    width: 500px;
    height: 50px;
    border: 1px solid red;
}

The display effect is as follows:

##2. Clear the dot in front of the ff6d136ddc5fdfeffaf53ff6ee95f185 tag

#nav ul{
    list-style: none;
}

3. Set the properties of the 3499910bf9dac5ae3c52d5ede7383485 tag contained under ff6d136ddc5fdfeffaf53ff6ee95f185

#nav ul li a{
    width: 98px;
    height: 50px;
    float: left;
    border: 1px solid red;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
}

4 .Set the mouse over effect

#nav ul li a:hover{
    background-color: #ABCDEF;
}

Final effect:

Complete HTML code part :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>
    </head>
    <body>
        <p id="nav">
            <ul>
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
            </ul>
        </p>
    </body>
</html>

Complete the CSS style code part:

*{
    margin: 0;
    padding: 0;
}
#nav{
    width: 500px;
    height: 50px;
    border: 1px solid red;
    margin: 30px;
}
#nav ul{
    list-style: none;
}
#nav ul li a{
    width: 98px;
    height: 50px;
    float: left;
    border: 1px solid red;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
}
#nav ul li a:hover{
    background-color: #ABCDEF;
}

The above is the detailed content of Create first-level navigation with div+css. 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

Previous article：Use css to implement a transparent triangle special effect codeNext article：Use css to implement a transparent triangle special effect code

See more

Create first-level navigation with div+css

Related articles