html笔记-多层导航栏

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;
}