章节
问答
课签
笔记
评论
占位
占位

反色导航条

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条,与默认的导航条相比,使用方法并无区别,只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。如下:

<div class="navbar  navbar-inverse" role="navigation">
<div class="nav bar-header">
      <a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
      <li class="active"><a href="">首页</a></li>
      <li><a href="">教程</a></li>
      <li><a href="">关于我们</a></li>
</ul>
</div>

运行效果如下:

对应的源码,请查看bootstrap.css文件第4023行~第4111行(注意这个所说的Bootstrap版本是3.1.1,其它版本位置是不一致的),这80多行代码已从原文中节取出来,存放在右侧代码顶部“bootstrap.css”文件中,小伙伴们可以查看。

任务

我来试试:完成下面任务

编写代码实现“固定网页顶部反色导航条”,效果图如下:


备注:这一小节没有正确性验证,请查看结果窗口,从而判断输入代码是否正确。

 

?不会了怎么办

参考代码如下:

<div class="navbar  navbar-inverse navbar-fixed-top" role="navigation">
  <div class="navbar-header">
      <a href="##" class="navbar-brand">慕课网</a>
  </div>
     <ul class="nav navbar-nav">
         <li class="active"><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>
</div>
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?