42-折叠菜单上（布局界面）
感想： 在布局中学到了
1.text-indent: 2em;即可以将li的文本做缩进
2.background: url("images/arrow_right.jpg") no-repeat center center;即在背景中插入url
3.学习了display: inline-block;
回顾知识：
一.inline：（1）使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行
（2）不能改变元素的height，width的值，大小由内容撑开
（3）可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行
二.block：（1）使元素变成块级元素，独占一行，在不设置自己宽度的情况下，块级元素会默认填满父级的宽度
（2）能够改变元素的height和width的值
（3）可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果
三.inline-block：（1）结合了inline和block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点
（2）通俗地讲就是不独占一行的块级元素。
（3）需要注意是inline和float：left的比较，详看：https://www.cnblogs.com/Ry-yuan/p/6848197.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>42-折叠菜单上（布局界面）</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
background: rgb(252,252,252);
list-style: none;
width: 300px;
margin: 100px auto;
/*border: 1px solid #000;*/
}
.nav>li{
border: 1px solid #000;
line-height: 35px;
border-bottom: none;
text-indent: 2em;
position: relative;
}
.nav>li:last-child{
border-bottom: 1px solid #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.nav>li:first-child{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.nav>li>span{
background: url("images/arrow_right.jpg") no-repeat center center;
display: inline-block;
width: 32px;
height: 32px;
position: absolute;
right: 10px;
top: 5px;
}
.sub>li{
list-style: none;
background: mediumpurple;
border: 1px solid white;
}
.sub>li:hover{
background: red;
}
</style>
</head>
<body>
<ul class="nav">
<li>一级菜单<span></span>
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单<span></span></li>
<li>一级菜单<span></span></li>
<li>一级菜单<span></span></li>
<li>一级菜单<span></span></li>
<li>一级菜单<span></span></li>
<li>一级菜单<span></span></li>
<li>一级菜单<span></span></li>
</ul>
</body>
</html>