导航条菜单的制作_技术问答

首页免费课导航条菜单的制作问答

导航条菜单的制作

全部评论问答未解决精华

这里为什么要对a设置hover属性而不是li呢

最新回答 / Hello_see_you

因为 a：hover 指的是当光标指到链接上面的样式，a还有另外三种设置: a:link a:visited a:active; 他们的用法可以去百度下

3 回答 1424 浏览 1-1 垂直菜单的制作

2017-06-03

风飘叶摇

我是看完JS进阶才发现还有这个课程，纯粹想练习下CSS排版的，居然发现还有JS！
首先，下拉菜单不应该设置高度，预防没那么多选项或者选项更多；其次那么复杂的JS代码就为了实现个CSS一句话能实现的效果，这违背了学习IT的初衷，IT要求的就是效率！
我的实现思路是，下拉菜单的过渡效果交给CSS，隐藏显示交给JS。
其实，都可以直接用CSS实现的，连JS都用不上。
首先设置.subNav的display为none;去除高度限制；然后设置a:hover>.subNav{dispaly:block};即可实现鼠标移入即显示下拉菜单的效果。

0 6-2 编程挑战

2017-06-01

小白鼠丨

为啥孤月还那么多人赞。自己写写不就知道行不行了么

3 1-3 编程练习

2017-06-01

小董君同学

.nav > li:hover .subNav{
height:120px;
}一行CSS代码即可，但没有动的过程，只有结果，如果要有动的过程就需要css3

0 6-2 编程挑战

2017-06-01

小董君同学

a 设置成块级元素之后，文字依然能居中，证据在此 https://codepen.io/taosang1992/pen/qmzOqJ。
想一想就明白了，h1~h6，p这都是块级元素，不是照样可以居中，因为居中的不是元素本身，而是里边的字。

0 1-3 编程练习

2017-06-01

小董君同学

0 1-3 编程练习

2017-06-01

qq_天子道_0

a.on, a:hover { background: #F60; color: #fff; width:160px; }

0 5-2 编程练习

2017-05-31

qq_天子道_0

ul li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px;
transition:width 1s;
-moz-transition:width 1s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 1s; /* Opera */
}

0 5-2 编程练习

2017-05-31

qq_天子道_0

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
CSS3里面的过渡效果就可以实现，暂时不需要javascript，可以去将上一段代码拿去复制试试...随便建立一个div就可以了

4 5-1 伸缩菜单的制作——水平方向

2017-05-31