感想： 在布局中学到了 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>