HTML+CSS实现的入门选项卡

        直接进入主题，实现一个最基本入门的选项卡，采用HTML+CSS的方式制作，关于这个我觉得最核心的就是页面载入时候对ul标签下的Li元素添加事件，比如选中选项卡一的时候内容一显示，内容二display:none即不显示就好了;还有我觉得比较重要的要用Float属性，往左浮动。

（最终效果图）

首先上界面代码：

    

        

            
   选项卡一
        
            
   选项卡二
        
        

            
内容一
                    
            
内容二
                
        
    

样式：

最开始时候运行：

    （图1）是这样  此时只加了一个 ul,li{list-style:none;} 样式去掉圆点，下面开始加样式。

开始包装：

    1）.li节点的样式，li{border-top:1px solid #999;border-left:1px solid #999;border-bottom:1px solid #999;height:30px;width:100px;margin-top:10px; } 给li元素加边框。

（图2）

        2）.给Div加边框，.box{border-top:1px solid #999;border-left:1px solid #999;border-bottom:1px solid #999;border-right:1px solid #999; width:200px;height:300px;float:left;}  同时向左浮动。

（图3）

    3）.接下来加入 ul{float:left;} 让ul标签也向左浮动差不多效果图就出来了，鼠标移上选项卡的时候内容一所在的div显示，就是调用.hidden{ display:none;} 即可，选中的样式 .select{ background-color:#20B19F;}

（图4）

    基本到这里就差不多了，这时候只需要添加事件就行啦。

完整代码：

    样式：

li{border-top:1px solid #999;border-left:1px solid #999;border-bottom:1px solid #999;height:30px;width:100px;margin-top:10px; }
ul,li{list-style:none;}
.box{border-top:1px solid #999;border-left:1px solid #999;border-bottom:1px solid #999;border-right:1px solid #999; width:200px;height:300px;float:left;}
ul{float:left;}
.hidden{ display:none;}
.select{ background-color:#20B19F;}

    主体：

    	

        	
   选项卡一
		
            
   选项卡二
        
        

            
内容一
					
            
内容二
				
        
    

    事件：

下载链接：https://download.csdn.net/download/qq_38967576/10482081