仿携程网

HTML部分

    
    
    


    

        
    

    

        
酒店
        

            海外酒店
            假日酒店
        
        

            海外酒店
            假日酒店
        
    
    

        
酒店
        

            海外酒店
            假日酒店
        
        

            海外酒店
            假日酒店
        
    
    

        
酒店
        

            海外酒店
            假日酒店
        
        

            海外酒店
            假日酒店
        
    
    

        

            海外酒店
            假日酒店
        
        

            海外酒店
            假日酒店
        
        

            海外酒店
            假日酒店
        
    

CSS部分

*{
    margin:0;
    padding:0;
}
body{
    min-width:320px;
    max-width:540px;
    margin:0 auto;
}
ul{
    list-style:none;
}
header{
    height: 100px;
    width: 100%;
}
header img{
    width: 100%;
    height: 100%;
}
nav{
    padding:5px;
}
nav .row{
    height: 90px;
    width: 100%;
    background-color: #ff697a;
    border-radius: 8px;
    display: flex;
    margin-bottom:5px;
    
}
nav .row:nth-child(2){
    background-color: #3d98ff;
}
nav .row:nth-child(3){
    background-color: #44c522;
}
nav .row:nth-child(4){
     background-color: #fc9720;
 }
.row3{
    flex:1;
    border-left:1px solid #fff;
}
.row div:first-child{
    border:0;
}
.hotel{
    display: flex;
    flex-direction: column;
}
.hotel a{
    flex:1;
    text-align: center;
    line-height: 45px;
    text-decoration: none;
    color: #fff;
    font-size:14px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);

}
.hotel a:first-child{
    border-bottom:1px solid #fff;
}