网页标准化设计规范

——-页面常用布局——-

注：页面基于WP古腾堡(Gutenberg)编辑器的GreenLight构建

常用1栏布局

分栏占比：100%

模块宽度：700px 素材宽度：800px

常用2栏布局

分栏占比：50%

模块宽度：700px 素材宽度：800px

分栏占比：50%

模块宽度：700px 素材宽度：800px

分栏占比：60%

模块宽度：850px
素材宽度：900px

分栏占比：40%

模块宽度：560px
素材宽度：600px

分栏占比：66.66%

模块宽度：1000px
素材宽度：1050px

分栏占比：33.33%

模块宽度：500px
素材宽度：550px

分栏占比：75%

模块宽度：1050px
素材宽度：1100px

分栏占比：25%

模块宽度：350px
素材宽度：400px

常用3栏布局

分栏占比：33.33%

模块宽度：480px
素材宽度：500px

分栏占比：33.33%

模块宽度：480px
素材宽度：500px

分栏占比：33.33%

模块宽度：480px
素材宽度：500px

分栏占比：25%

模块宽度：350px
素材宽度：400px

分栏占比：50%

模块宽度：700px 素材宽度：800px

分栏占比：25%

模块宽度：350px
素材宽度：400px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：60%

模块宽度：850px
素材宽度：900px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：40%

模块宽度：560px
素材宽度：600px

分栏占比：30%

模块宽度：480px
素材宽度：500px

分栏占比：30%

模块宽度：480px
素材宽度：500px

常用4栏布局

分栏占比：25%

模块宽度：350px
素材宽度：400px

分栏占比：25%

模块宽度：350px
素材宽度：400px

分栏占比：25%

模块宽度：350px
素材宽度：400px

分栏占比：25%

模块宽度：350px
素材宽度：400px

分栏占比：40%

模块宽度：560px
素材宽度：600px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：20%

模块宽度：280px
素材宽度：300px

常用5栏布局

不推荐作内容展示和图标展示，不利于三端适配

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：30%

模块宽度：480px
素材宽度：500px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：30%

模块宽度：480px
素材宽度：500px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：40%

模块宽度：560px
素材宽度：600px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：25%

模块宽度：350px
素材宽度：400px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：20%

模块宽度：280px
素材宽度：300px

分栏占比：20%

模块宽度：280px
素材宽度：300px

常用6栏布局

常用于图标展示，不推荐作内容展示

分栏占比：16.6%

模块宽度：280px
素材宽度：300px

分栏占比：16.6%

模块宽度：280px
素材宽度：300px

分栏占比：16.6%

模块宽度：280px
素材宽度：300px

分栏占比：16.6%

模块宽度：280px
素材宽度：300px

分栏占比：16.6%

模块宽度：280px
素材宽度：300px

分栏占比：16.6%

模块宽度：280px
素材宽度：300px

分栏占比：25%

模块宽度：280px
素材宽度：300px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：15%

模块宽度：280px
素材宽度：300px

分栏占比：15%

模块宽度：280px
素材宽度：300px

注： 1.【模块宽度】指网页模块的设计宽度(基于页面内容宽度为1400px)； 2.【素材宽度】指建议为该模块准备的图片宽度，通常略微大于【模块宽度】，以确保图片清晰(基于页面内容宽度为1400px)；

—图片&视频常用比例—

横图常用比例

绿色边框为常用

竖图常用比例

绿色边框为常用

竖图常用比例

绿色边框为常用

注：图片常用格式 JPG(传统图片压缩格式)，PNG(常用于透明背景图片的格式)，Webp(最新图片压缩格式，可以替代JPG和PNG)。