html笔记-多层导航栏
1.html文件连接外部样式表CE.css
<link href="./CE.css" rel="stylesheet">
2.去除链接(a标签)默认的下划线
text-decoration:none
3.在li标签的CSS样式中添加float:left
才可以使标签中文字横向排列,添加在ul标签的CSS样式中不行
4.a标签是行内元素(内联元素),不能设置上下间距,只能设置左右间距。若要设置上下间距,需用display:block
把它转化成块级元素,再进行设置。
5.去除ul标签的圆点
list-style:none
6.权重问题,若样式1的权重比样式2的大,则样式1的CSS样式会覆盖样式2的。
7. 当鼠标移动到“我是一个导航”时,字体颜色从黑变紫
<!--选中 类nav 的 ul标签中 的 类名为leader的li标签 里的 a -->
.nav > ul:hover li.leader a{
color:purple;
}
<div class="nav">
<ul>
<li class="leader"><a href="#">我是一个导航</a></li>
</ul>
</div>
8..nav > ul:hover li.leader a
中,ul:
和hover
间不能有空格
9.代码要对齐,要习惯用tab
键,不用空格
10.类名要规范
11.把二级导航栏隐藏
display:none;
12.鼠标移到一级导航栏(class=“nav_one”)时二级导航栏(class=“nav_two”)弹出
.nav > .navcontent > .nav_one:hover .nav_two{
display:block;
}
<div class="nav">
<ul class="navcontent">
<li class="nav_one">
<ul class="nav_two">
<li></li>
</ul>
</li>
</ul>
</div>
13.鼠标移动到一级导航时,导航条背景颜色变灰
.nav > .navcontent > li:hover{
background:grey;
}