css的知识点

  
Coffee

  

    
 
       
11
       
22
       
 
       

            
88
            
99

            

               

               
123
               
234
               
       
       
  
 

  
Tea
  
Milk

文件目录靠它实现 。

image.png

水平导航栏
有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法

image.png

image.png

image.png

image.png

 // 下拉框点击事件
        function dropClick(dom){
            // 切换样式状态
            if(dom.className.indexOf("to__roate") > -1){
                dom.className = ""
            }
            else{
                dom.className = "to__roate"
            }
            
            // 显示隐藏内容
            var domShow = dom.parentNode.parentNode.nextElementSibling
            if(domShow.className.indexOf("to__show") > -1){
                domShow.className = "to__subItem"
            }
            else{
                domShow.className = "to__subItem to__show"
            }
        }

对应的css分别为

.to__block .to__left>div .to__subItem {
    padding-left: 20px;
    display: none;  //主要这个属性控制显示
}

.to__block .to__left>div .to__show {
    display: block;
}

.to__block .to__left .to__item .to__dropdownList i svg {
position: absolute;
z-index: 2;
}

 // 节点单击事件
        function domClick(e){
            // 选中子元素所有input框
            var subItem = e.parentNode.nextElementSibling
            var inputList = subItem.querySelectorAll(".to__item")
            for(var i = 0; i < inputList.length; i++){
                var item = inputList[i]
                item.querySelector("input").checked = !e.querySelector("input").checked
                var subName = item.querySelector(".to__name").innerHTML
            }
            

这个单击事件对输入框和标签都有效因为，单击事件在span中

image.png

div的 display: inline-block; 改变了盒子的样式

image.png