点击此处返回
未登录用户
每日可免费学习1个教程
酸梅干超人
关注人数：23182
1.线性图标设计-零基础学Figma
2.面型图标设计-零基础学Figma
3.玻璃拟态页设计-零基础学Figma
4.完整项目设计-零基础学Figma
5.交互动画设计-零基础学Figma
6.单屏网页设计-零基础学Figma
7.响应式网页设计-零基础学Figma
8.B端表格页设计-零基础学Figma
9.B端规范搭建-零基础学Figma
本次课程讲解Figma零基础系列课程-第八课【响应式网页设计】-响应式布局功能应用，同学们可以在视频下方评论区进行留言，老师会根据你们的问题进行回复。
那我们开始今天的教程吧。
1.本节课分享的案例是比较常规的长条形页面，比如各类品牌的官网页面，在拖拽网页的时候，页面内容会随着页面大小做一定适配的调节。
2.响应式网站并不在于输出界面，更多的是布局的原则和概念，需要先处理两个版本出来，首先创建【1280】的模块，打开栅格【Ctrl+G】/【24列】，置入元素头图一般都比较高【750】，导航栏高度【80】。
3.导航栏-【黑色】-透明度【40%】，置入文字元素以每两列为一个宽度做【居中】处理，置入logo和文字细节信息，手动加大字体的尺寸然后对齐处理。
4.头图下方再创建一个高度【750】-【Fill】透明度【60%】的背景图，上方再添加三个元素以及文字部分，栅格只是作为大致参照，放元素的时候不用完全依据栅格放置。
5.再往下是车系的图片和官网的基本信息，页面做完之后，需要再做一个比页面更宽更大的页面，实现响应式布局，响应式网页设计需要使用Figma的【Resize】功能，有【Clip content】的意思。
70000+教程，每天免费学一课
打开APP，离线免流量
