html加css实现简易导航栏

迷南。 2022-06-08 00:45 186阅读 0赞

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简易导航栏</title>
        <style type="text/css">
    
            #nav {
                width: 730px;
                height: 50px;
                background-color: #DFD4B5;
                margin: auto;
            }
    
            /*子类选择器 > */
            #nav > ul {
                font-weight: bold;
                font-size: small;
                line-height: 50px;
                margin: auto;
            }
    
            #nav > ul > li {
                list-style-type: none;
                float: left;
            }
    
            #nav span {
                padding-left: 10px;
                padding-right: 10px;
            }
    
            li:hover {
                color: blue;
                text-decoration: underline;
                cursor: pointer;
            }
    
            li:active {
                color: red;
            }
        </style>
    </head>
    <body>
    <div id="nav">
        <ul>
            <li>首页<span>|</span></li>
            <li>团队简介<span>|</span></li>
            <li>收费标准<span>|</span></li>
            <li>招聘信息<span>|</span></li>
            <li>站点地图<span>|</span></li>
            <li>会员注册<span>|</span></li>
            <li>友情链接<span>|</span></li>
            <li>建议留言<span>|</span></li>
            <li>使用说明</li>
        </ul>
    </div>
    </body>
    </html>

**截图：**

![Center][]

[Center]: /images/20220608/fc32d1a349c4491f846e828e654c1d21.png

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML+CSS制作导航栏

一.效果展示 1.1效果展示 ![5a265be7407d49bc968708b1421c6c7a.png][] 二.项目代码 2.1HTML <

我不是女神ヾ/ 2024年02月22日 09:21/ 0 赞/ 74 阅读

相关 HTML+CSS设计简单导航栏

1 运行效果 ![c659f520fc444382934249a6189b1719.png][] 2 资源图片 2.1 logo.png ![5e317b1

柔情只为你懂/ 2024年02月18日 11:27/ 0 赞/ 43 阅读

相关简约好看导航栏(HTML、CSS)

简约好看导航栏(HTML、CSS) <!DOCTYPE html> <html lang="en"> <head> <m

迷南。/ 2023年10月03日 12:39/ 0 赞/ 13 阅读

相关 css实现子集导航栏

一、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

梦里梦外;/ 2023年09月29日 16:30/ 0 赞/ 15 阅读

相关 HTML、CSS实现导航栏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

红太狼/ 2023年02月16日 06:03/ 0 赞/ 31 阅读

相关 HTML&CSS实现导航栏滑动背景效果

大家可以先看一下背景滚动的效果 ![在这里插入图片描述][20201230172825172.png] ![在这里插入图片描述][20201230172715552.gi

今天药忘吃喽~/ 2023年01月01日 02:48/ 0 赞/ 317 阅读

相关使用 HTML/CSS 实现 Educoder 顶部导航栏

使用 HTML/CSS 实现 Educoder 顶部导航栏任务描述相关知识使用flex布局justify-content: space-be

Love The Way You Lie/ 2022年11月15日 11:49/ 0 赞/ 262 阅读

相关 html导航栏自动调间距,HTML CSS导航栏间距

我做了一个CSS导航栏，但是在每个“navbar-item”之间，都有一点空间。我不希望那里有任何变化！有没有办法做到这一点，而不改变每个navbar-item的余裕？HTML

谁借莪１个温暖的怀抱￠/ 2022年10月05日 15:59/ 0 赞/ 202 阅读

相关 html加css实现简易导航栏

代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

迷南。/ 2022年06月08日 00:45/ 0 赞/ 187 阅读

相关 CSS+HTML 顶部导航栏实现

导航栏的实现、固定顶部导航栏、二级菜单实现效果图： ![在这里插入图片描述][70] -------------------- 2018/11/16更新：最

川长思鸟来/ 2021年09月16日 10:08/ 0 赞/ 533 阅读