6、常用网页布局方式

一、表格布局

  • 完整代码


    
        
        
        
        表格布局实例
        
    
    
        

表格布局实例

  • 运行结果


    表格布局

二、DIV+CSS布局

  • 完整代码


    
        
        
        
        div+css布局实例
        
    
    
![Snipaste_2019-03-16_20-14-59.png](https://upload-images.jianshu.io/upload_images/16493358-02017fe135da8e7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        

DIV+CSS布局实例

  • 运行结果


    Snipaste_2019-03-16_21-27-12.png

三、flex布局

注:flex布局是一维的,默认横向


    
        
        
        
        flex布局实例
        
    
    
        

flex布局实例

若要用flex布局,可在css中添加display:flex;
纵向的需添加flex-description:column;

  • 运行结果


    Snipaste_2019-03-16_20-14-59.png

四、grid布局

  • 完整代码


    
        
        
        练习
        
    
    
        
  • 运行结果


    Snipaste_2019-03-16_20-14-59.png

你可能感兴趣的:(6、常用网页布局方式)