Question

我想创建一个自定义导航栏，如我模拟的图像所示。

到目前为止我写过这个 -

我的HTML：

<nav class="navbar navbar-default">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Play Video</a></li>

                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

我的CSS：

.navbar {
    background: url(../images/pattern.png) repeat;
    background-color: white;
}

.navbar-brand,
.navbar-nav li a {
    font-family: 'Josefin Sans';
    font-size: 14px;
    font-weight: 700;
    line-height: 80px;
    height: 80px;
    padding-top: 0;
    -webkit-font-smoothing: antialiased;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #808080;
}

这看起来像普通的导航栏应该。我不知道如何定位“播放视频”部分和链接（家庭，约等）部分与它们之间的分隔符。关于我应该如何进行的任何想法？

Answer 1

播放视频

将任何类添加到此li，例如

<li class="play"><a href="#">Play Video</a></li>

Nex写这段代码

.play::before {
    color: gray;
    content: "|";
    float: left;
    margin-right: 23px;
}

并将播放图标/图像放在此列表项中，例如

<li class="play"><a href="#"><img src="play-icon.png"> Play Video</a></li>
//place play icon path on play-icon.png place

希望这会有所帮助。感谢

使用Bootstrap创建自定义导航栏

1 个答案: