[郑州|结业弟子]JS-高世豪|2019年12月09日的日报-技能树.IT修真院

发表于： 2019-12-09 22:22:15

1 4444

一、今天完成的事情

任务十中也有bootstrap导航栏的使用，所以我又学习了一下

1.基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav
2.导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form
3.导航条中的按钮，文本，链接navbar-btn、bavbar-text、navbar-link
4.导航条中的项目进行左右浮动navbar-left、navbar-right
5.顶部固定或底部固定nacbar-fixed-top、navbar-fixed-bottom
6.响应式导航条

100

101

102

103

104

105

<!DOCTYPE html>

<head>

<title>Bootstrap 101 Template</title>

</head>

<body>

<!-- 基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav

创建一个默认的导航栏的步骤如下：

1.向 <nav> 标签添加 class .navbar、.navbar-default

2.向上面的元素添加 role="navigation"，有助于增加可访问性。

3.向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

4.为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可-->

</div>

<div>

<li><a href="">js高级程序设计</a></li>

<li><a href="">js设计模式</a></li>

</ul>

</li>

</ul>

</div>

</nav>

<!-- 导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form

步骤如下：

1.向 <nav> 标签添加 class .navbar、.navbar-default

2.向上面的元素添加 role="navigation"，有助于增加可访问性。

3.向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

4.navbar容器内放置form元素，在form元素上应用navbar-form样式即可，同事navbar-left和navbar-right可用-->

<a href="#" class="navbar-brand">Brand</a>

</div>

</div>

</form>

</div>

</form>

</nav>

<!-- 导航条中的按钮，文本，链接：

普通导航栏中使用navbar-brand样式得a元素

还有：navbar-btn、bavbar-text、navbar-link(这些象征性的设置了margin和颜色)-->

<a href="href-"#"" class="navbar-brand">Brand</a>

</div>

</ul>

<button class="btn btn-class navbar-btn">和ul一起使用的button</button>

</nav>

<!-- 导航栏中的文本：

如果需要在导航中包含文本字符串，请使用 class .navbar-text-->

</div>

<div>

<p class="navbar-text">Runoob 用户登录</p>

</div>

</nav>

<!-- 响应式导航条：

一个导航条默认情况下都是全屏100%显示，所以通常有很多菜单，但在小屏幕上可能显示不全。

通常需要根据尺寸隐藏或者去除一部分菜单内容。-->

</body>

</html>

以上就是一种导航栏的写法，虽然不是每次都会用到这样的，但是提供一种修改的思路，可以加深对于修改组件导航栏的熟练度，比较值得学习的。

对于hover效果的理解

尤其是对于引用组建的时候，对于a标签的修改还是很有帮助的。尤其是对于初学者。

a：hover表示当鼠标选定在a标签上时a标签的样式变化。

这是css中伪类的使用格式。

伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value; }，简单地用一个半角英文冒号（:）来隔开选择符和伪类。CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类：

:link用在未访问的连接上。

:visited用在已经访问过的连接上。

:active用于获得焦点（比如，被点击）的连接上。

:hover 用于鼠标光标置于其上的连接。

二、遇到的困难

暂时没有

三、明天要做的事情

把任务十做完

四、收获

对于导航栏还有hover效果的理解更加深入