HTML网页设计：导航栏

一、下拉导航栏

    

        

            

                首页
                

                    
1
                    
2
                    
3
                    
4
                
            
            

                我的订单
                

                    
1
                    
2
                    
3
                    
4
                
            
            

                购物车
                

                    
1
                    
2
                    
3
                    
4
                
            
            

                账单
                

                    
1
                    
2
                    
3
                    
4
                
            
            

                商品详情
                

                    
1
                    
2
                    
3
                    
4
                
            
            

                浏览记录
                

                    
1
                    
2
                    
3
                    
4
                
            
        
    

       *{
            padding: 0px;
            margin: 0px;
        }
        .nav{
            width: 100%;
            height: 60px;
            background-color: black;
        }
        .ul_one{
            background-color: crimson;
            /* width: 80%; */
            width: 1200px;
            height: 60px;
            margin: 0 auto;
        }
        .ul_two{
            display: none;
        }
        .li_one:hover .ul_two{
            display: block;
            background-color: cadetblue;
        }
        .li_one{
            width: 200px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            float: left;
            background-color: cadetblue;
            /* border-right: 1px solid white; */
        }
        .li_one:hover{
            background-color: bisque;
        }
        .li_one_right{
            border-right: none;
        }
        .ul_two li:hover{
            background-color: bisque;
        }
        li{
            list-style: none;
        }
        a{
            display: block;
            text-decoration: none;
        }

二、侧拉导航栏

    

        

            手机类型
            

                1
                2
                3
                4
                5
                6
            
        
        

            手机类型
            

                1
                2
                3
                4
                5
                6
            
        
        

            手机类型
            

                12
                23
                33
                45
                53
                65
            
        
        

            手机类型
            

                1
                2
                3
                4
                5
                67
            
        
        

            手机类型
            

                1
                2
                3
                4
                5
                61