小米二级菜单的初步练习

tech2022-08-07  133

项目场景:

小米二级菜单的初步练习

问题描述:

1.相对定位加到谁身上的问题 2.margin-top 把父元素带下来 3.层级不够 4.检查里面查看别人项目的字体 字号等

原因分析:

```css *{margin:0;padding:0;} img{vertical-align:top;} ul li{list-style:none;} a{text-decoration:none;color:inherit;} html{font:12px/24px "微软雅黑";color:#5c5c5c;} .w{width:1225px;margin:auto;} .main{height:460px;background:url(../images/1.jpg);background-size:100% auto;} .nav{width:234px;height:460px;background:rgba(147,153,155,.5);position:relative;} .nav ul{width:100%;height:420px;float:left;margin-top:20px;:20px;} .nav ul li{width:234px;height:42px;line-height:42px;text-indent:30px;font-size:14px;font-family:"Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;color:#ffefe4;} /* .li1{margin-top:20px;} .li10{margin-bottom:20px;} */ .nav span{float:right;margin-right:24px;} .nav li:hover{background:#ff6700;} .nav .hide{width:234px;height:460px;background-color:white;border:1px solid #e0e0e0;position:absolute;left:234px;top:0;display:none;} .nav li:hover .hide{display:block;} # 解决方案: 1.相对定位加到谁身上的问题-- 为了保持二级菜单的框子不变 这次相对定位加在爷爷身上 2.margin-top 把父元素带下来 在ul上加了浮动 3.多带了几个父元素 祖先元素的选择器

总结

坚持多练习

最新回复(0)