学前段半个月的一些心得（四）_学习上半个月能改变什么-CSDN博客

本文链接：https://blog.csdn.net/D_debag/article/details/76341074

当在同一个盒子中使用多个相同的标签时，又不想命名太多的类，则可以使用：

.conter_r_four p:nth-of-type(2){
margin-right: 10px;
} 这个代表的是.conter_r_four类中的第二个p标签，指定必须是p标签

.conter_r_four p:nth-child(2){
margin-right: 10px; 这个是指.conter_r_four类中的第二个标签是p，但是如果不是p则无效果。
}

定位：相对定位（position：relative），绝对定位（positio：absolute），固定定位（positio：fixed）

使用口诀：子绝父相：子用绝对定位，父用相对定位；

共同点：四个值：上右下左：top right bottom left （只能同时使用两个值）

相对定位占有空间，一般不单独使用，会配合绝对定位来使用。

二级菜单：

通过使用：ul>li>ul>li；进行ul的嵌套使用；

第一个ul>li为一级菜单

第二个ul>li为二级菜单

给一级菜单li设置浮动；给二级菜单ul设置display：none；隐藏起来；

然后设置第一个ul中的li标签hover事件（当鼠标移动到li时发生），使二级菜单中的ul标签为：displ：block；例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
div .li{
width: 100px;
float: left;
margin-left: 30px;
background: #ccc;
}
div .li:hover .one{
display: block;
}
ul.one{
width: 100px;
display: none;
background: #ccc;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div>
<ul>
<li class="li">
<a href="">一级菜单</a>
<ul class="one">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="li">
<a href="">一级菜单</a>
<ul class="one">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>

</li>
<li class="li">
<a href="">一级菜单</a>
<ul class="one">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>

</li>
</ul>

</div>
</body>
</html>