n-grid主图公式

首先我们右键打开主图指标啊，选择主图指标公式管理，这个里面我们新建一个， 然后我们把这个指标公式复制进来， 那分别填上对应的均线指标的参数啊，这个就分面对应的五日线、十日线、六十日线以及这个一百二十日线啊。 好，这个时候要把这个副图改成主图叠加， ok， 这个时候我们就添加好了。 然后回到这个主图界面，我们选择叠加主图指标，选择刚刚新建的这个指标， ok， 这个就变黄了啊。

大家好啊，今天给大家分享点干货啊，就是如何去通过优化我们特母产品的这个主图图片，去提高你产品的点击率和转化率啊，然后呢，呃，大伙都知道，呃， 电商平台呢，就是做电商，就是用户最直观的就是通过我们的产品图片来下载，明白吧？然后呢，用同样的产品，同样价格，为什么用户会选择你而不选择别人呢？就是因为你的产品图片，产品主图能够在第一时间的呃 找到用户的痛点，找满足用户的需求，所以才会展产生了点击和转化，明白吧，我今天给大家分享四点就是主图的一个制作经验啊，这是通我们通过实战总结出来的，效果立竿见影，大伙记得收藏一下，一定要去好好看，然后立马去落实， 会大大提高你的转化率，点击率，转化率，成交率啊，非常好用。然后废话不多说，今天我直接给大家分享四点啊，四点主图的爆款公式啊，大伙一定要去多翻看几遍啊。第一点就是细节展示法啊，然后我我在这个视频当中给大家附一张图啊，然后 什么叫细节呢？就是你产品的一个细节展示，细节突出，突出你产品的一个优势来，你像这款图片，他是卖一款毛巾啊，然后这款毛巾呢，他通过这款照片直接在主图用小图片加文字的形式， 清晰的列出了这个毛巾的优点，比如说护肝，吸汗、透气，核心优点，然后直达用户的需求，用户一目了然，就能看到这个产品的一些优势，视觉上而且是生动不枯燥啊。然后我们再看这款产品啊，就是一款这个运动手套，这款手套通过这个放大镜的方式啊， 呃，直接能够体现出这款手套他是泡沫填充、防滑材质等等一些细节，然后配上简短的英文注示介绍，既凸显了他的专业性，又降低了用户的这个决策成本， 所以说这个方法是非常关键的，基本上可以适合我们所有的一些普货，甚至我们一些，呃，定制品，一定要突出你直白的去突出你产品的一些优势啊， 这是第一点啊，细节展示法。第二点呢，就是关键词放大法，我同样我也给大家去列举了一个例子，在这个视频当中啊，大伙可以看见在这款图片呢，用这个主图的左上角用醒目的一个英文，他的意思是智能断电，这款充电线智能断电 直接就是列出了我们这款呃，快充线的他的一个独特的一个优势啊，然后这种图片的总体布局呢，他既符合用户从左向右的浏览习惯，又能与产品形成这个视觉平衡啊，不响气，但是能够足够的吸眼睛。然后明白吧，这就是一个关键词， 简洁直白啊，不推测，我们直接用简洁的语言去突出这个产品用户的需求点，然后达成一个高点击，高转化，明白吧？然后第三个方法呢，就是场景设置法， 我同样在视频给大家列出了这款产品，做的非常好啊，就是通过场景化主图的核心唤醒需求啊，还原场景，让用户直观的感受到这个产品的价值，明白吧，你像这款金属壁虎的这个墙面装饰这个主图啊，然后他把这个图片安装在这个木质房屋的外墙上， 瞬间让用户能够联想到我这款产品放到我自己家的外墙上，能出现一个什么样的美化效果啊，刺激用户能够批量多去批量化的购买，而不是，哎，我只买一个，你像他展示了三个，用户可能想象，哎，我家的墙放三个或者放五个可能会更好更美观，而不是说我只在这个图上放一，放一个壁虎，让用户想象，哎，我放一个壁虎啥样，明白吧？ 能让用户跟你的这个主图产生共鸣，让用户觉得这正是我需要的。第四点就是高密度法，这种方法呢，特别适合 组合装或者套装的产品，我同样也给大家举例这个，这个圆珠笔的这个案例啊，就是他通过这种呃，将圆珠笔陈列在画面中心，形成视觉上的一个强烈冲击啊，让用户感觉到，哎，低价多件的优惠力度，明白吧？然后，但是像这种情况呢，我们一定要注意点，就是标题与 f k u 必须严格的对应，避免出现图文不符，让用户，哎，你比如我 产品图上我列出了一百个，但实际上我们售卖的是十个，容易对用户产生一种误导，容易产生这个售后啊，所以说，呃，我们一定就是视觉上的冲击，加上配合你的标题，主图一定要跟用户讲明白，我们是卖了，比如说二十 pdf， 三十 pdf， 明白吧？ 以上四点就是我给大家去总结，我们在生产经验中总结出了四点的这个，呃，主图的一个爆款公式啊，呃，我可能讲出来大家觉得非常简单，讲的也比较简洁啊，但是 大伙一定要去多看几遍，深入的去学习这四种方法应用到你的哪一款产品上，甚至或者我一款产品，我可以结合其中的两种或者三种或者四种这个图片方法，综合方法去把你的产品打爆，明白吧？ 当然了，这个主图图片只是我们产生转化的第一步，产生爆款的第一步啊，当然也要需要结合你的产品，结合你的这个产品的定价优势等等一系列，才能综合的去把你的产品打爆。但但是图片一定是第一步，因为只有图片你形成一个视觉的冲击，或者是呃找到用户的痛点和需求，我们才能产生一个 点击，有了点击我们才有转化的这个可能啊。然后以上四点就是今天我给大家分享就是呃，爆款公式，基本上是总结了我们图片优化的，呃，这四点基本上可以覆盖所有的图片优化啊，如果大家觉得有帮助的话，点赞关注收藏一下啊，大伙一定要去多看几遍。

你可以去搜一下，我们家是做专业线运动鞋的，那这双鞋极具功能性，以及我们的外部的观感为一体，有那种复古潮流穿越到 y g u k 一 九九几年港风的一个效果。

主图三，连阳以上标出连阳数字，在公式管理器中输入以下代码就可以喽。

hello， 小 伙伴们好，好久不见，我是 pink 老师。今天呢， pink 老师带来了二零二五版最新的前端基础与实战课程，这次课程可不一样哦， 第一个，我们这次课程的编辑器用的是 ai 开发工具 tree， 可以 让我们的开发更便捷和高效。 我们再也不用担心单词记不住的问题，我们也不用担心代码写错找不到原因的问题，我们更不用担心写代码没有思路的问题。 ai 工具帮我们做了很好的解决，我们把注意点都放在，哎，为什么这么写， 我还能怎么写，怎么写会更好等等的。哎，这个应该是全网首套的 ai 工具的前端基础课程喽。同时，这一次可不是我一个人讲课了，我请了一个助教老师一起来学习，接下来有请猪爸爸。 嗨，猪爸爸你好呀，我可是从小看你的视频长大的。接下来的课程总结，辛苦猪爸爸来喽！嗨，苹果老师，我也一直看你的前段视频哦，没问题，接下来我会好好的做一下总结，让同学们学的更好的。 嘿嘿，那咱俩就不要再相互的商业互吹了，那接下来就让我们一起和同学们愉快的学习了。 好的同时，这道课程啊，会有更好的用户体验，比如我给视频添加了字幕，因为以前的视频啊，都是网站自动生成的，那生成的不是那么好，特别是当英语单词特别多的情况下。最不能让我忍受的，明明我是 pink 老师，结果给我翻译成了 pig 老师， 所以我一怒之下，呃，就一怒了一下之后给同学们把所有的视频都添加字幕了，这样同学们看视频会更加的方便，甚至不用戴耳机也可以来学习哦。 其次就是趣味性学习嘛，容易枯燥，所以课程里面我会尽量的增加了趣味性，那除了拼个老师的个人特点，里面也加了一些很多的小技巧，让我们写代码也可以快乐起来，希望同学们能够喜欢哦。 刚才呀， pink 老师主要讲了三个部分，我们一个一个来看，鼠标离开，再这样鼠标经过，再这样能看明白吗？其实啊，就是这样的一个旋转的一个盒子。 最后啊，本次课程的内容更加的全面，包含了 it 码， c s s， 移动端响应式，一套视频全部都覆盖了。好，那接下来我们就来看一看这套课程。我们一共分成了八大模块， 第一个模块儿，我们讲解一下 html 五的语义标签，学习一下常见的布局标签。好，第二个我们学习一下 css 三的核心技术，学习精灵图啊，字体图标和时差滚动。 好了，有了前两个的铺垫，第三个我们就可以来布局我的网页喽，所以我们学习第三个现代网页布局，我们会学习到 flex 布局， grade 布局，定位布局、多列布局等等的 好，网页写好了，我们还可以让网页变得更漂亮。所以第四个模块我们学习一下交互动效设计，我们会学习二 d， 三 d 变换动画过度，还有有很多的动效案例哦， 好，动效也会了，那接下来我们的第五篇，我们会学习一下最新的前端技术，我们讲解前沿技术拓展，我们会学习到 svg 动画， clip pass 滤镜动画，时间线变量计算函数，还有相关的案例。 好了，那前五个篇章我们主要做的是 pc 端的网页制作。那第六章我们开始进入移动端，移动网页开发，我们会学习到两种设备方案， v w v me 设备方案以及 r e m 设备方案，同时每个方案都会有案例来支撑。哦， 那接下来就是我们第七个篇章，我们讲解响应网页开发，也说让我们的网页变得具有响应式。我们会讲解媒体查询，还有第三方框架 but stop。 同时我们还会有两个专门的响应式项目，带着同学们去案例书写。 好了，那到此为止，我们的网页已经写完了，同学们想不想把它发布到网上，让别人通过网址来访问我们呢？ 可以，这就是我们的。第八章，学习前端网页托管。我们会通过 deepcloud 呀，把我们做的网页发布到网上去，然后你就把你的网址发给朋友，他们就可以看到你做的网页喽，而且全部都是免费的。 那我们了解了到底需要哪些内容，那到底能做出什么效果来呢？好的，接下来我们去看一下部分案例。 好的，刚才只是展示了部分案例，我们很快就能学到喽，制作不易啊，小伙伴们，你们知道怎么做吗？ 求求啦， 多一句没有少一句不行，用更短的时间教会更实用的知识，我们黑马一直在努力。好的小伙伴们，那接下来让我们一起进入这套课程吧，咱们下个视频见。

hello， 大家好，我是方格，那么在这个系列里面呢，我们就系统地学习 css 布局，我们会从一维布局 flex 说起，然后到二维常用的工具 grid layout。 在 这个课程里面呢，我们会参考这个 m d n 文档，我会把这些知识点掰开了，揉碎了去讲。然后同时呢，呃，对于布局，我也给大家推荐一些小游戏，比如这个 grid garden， 你 可以在上面去交互式地学习 grid 布局。 以及呢，我会推荐给大家一些比较经典的脖脖啊，比如这位 jose camo， jose camo 他 是一个前端大神，然后在他的脖脖里面呢，我们可以学习到很多有用的前端知识，还可以进行一些交互式的演习，这对于我们去学习一些前端知识是非常有帮助的。 以及呢，我给想准备前端面试的朋友啊，提供了一份非常完整的文档，那么在这个文档里面呢，我们会有最全的八股文，以及一些场景题的准备，以及一些面试的心得。以上这些资料呢，都是完全免费的，你可以找我的小助手在评论区留言领取。 那我们话不多说，就开始这个系列的学习吧。今天我们就来聊一聊一个非常重要的前端布局技术 css。 那 么很多同学在面试时被问到复杂布局的问题的时候，总是想着用 flashbox， 结果呢，它的代码写的非常复杂。其实呢，当你遇到二维布局需求的时候啊， grade 才是你的最佳选择。 所以到今天，我们不会讲特别复杂的语法，而是要帮大家建立一个正确的心智模型。相信我，你一旦理解了 read 的 本质，后面的学习都会变得非常通畅，所以让我们开始吧。 呃，首先我们来看一下今天的学习路线，我们会从四个维度来掌握 css grid。 首先第一个维度就是理解 grade 的 本质。那么很多同学学 grade 的 时候啊，总是呢把它当做更加强的 flexbox 的 工具去理解，那么这是错误的呀，因为 grade 有 它独特的设计哲学， 我们要从根本上去理解它和 flexbox 的 区别。然后第二点就是我们要建立一个完整的心智模型， 那么 grade 涉及到容器啊啊，轨道啊，网格线啊这些很多概念，那么这些概念是如何关联起来的？我们需要建立一个非常清晰的认知。然后第三，我们会动手实践去创建第一个 grade 布局，让我们的理论落地 啊。大家要记住啊，今天啊 grade 的 学习呢啊，你可能不是一天就能完全掌握的，但是我们今天的基础概念你必须要搞清楚。好，我们话不多说，就开始吧。 那么在学习 grade 之前，我们要明确一个问题，就是啊， flexbox 已经非常强大了，那我们为什么还要学习 grade 呢？我们先来看看 flexbox 的 强项在于什么，在于依维布局的能力，它可以沿着 单轴排列元素，它提供了非常灵活的空间分配，而且呢，它对响应式的设计是非常友好的。 但是呢，当我们遇到更加复杂的布局需求的时候， black box 就 开始力不从心了。比如说，你要做一个仪表盘，需要去精确控制每个组件在第几行一起列， 或者呢，你要做一个复杂的布局，哎，它的头部、侧边栏，主内容区，然后底部都要精确定位，这时候呢，如果你还用 flexbox， 你 就会发现啊，你的代码非常复杂，需要嵌套，还要各种去 hack， 所以 这就是为什么我们需要 grid， grid 天生就是为了解决二维布题，二维布局这个问题去设计的。 好，我们讲完了上面的概念，现在来深入两，深入理解两个东西，一个一维布局，一个是二维布局，那么这两个概念非常重要啊。我们先来看 flashbox， flashbox 是 一维布局，什么意思呢？就是它一次只能沿着一个方向排列元素 啊，比如说你设置了一个 flux duration 是 low， 那 么呢啊，它就是一个水平排列啊，这个此项目会沿着这个水平轴去排列，然后你设置 coline 的 话，就是垂直排列嘛，然后它第二个特点就是 沿着单轴排列，有一个主轴，有一个交叉轴，我们元素如果过多的话， 它会怎么样？它会自动换行。所以呢，我喜欢用一个书架去类比这个 flashbox， 就 像你把书 一本一本的放在这个书架上，如果书太多了，就自动换下一层，那么这个过程是自动的，你无法非常精确的去控制每一本某一本书啊，一定要放在这个，比如说啊，第二层第三个位置，你是没办法非常精确的做到。 那我们再来看 grid， grid 的 话就是二维布局了，它可以同时定义行和列哎，比如说这段代码呢，我们就定义了一个三行三列两行的网格结构。 然后 grid 的 特点呢，就是啊，行列双向控制了啊，你可以同时定义行和列，去创建 精比较精确的网格单元格啊，而且呢，这个元素是可以跨越多个格子的，所以我就比较喜欢用书柜去类比这个柜，就像你预先定制好了一个一个多行多列的书柜， 每个格子呢都有明确的坐标系，你可以精确的指定某本书在第几行第几列。嗯， 所以这就是它们的根本区别啊。 flashbox 是 内容驱动的，它自动排列，然后 grid 呢？是啊，结构驱动的，它是用来精准定位元素的。嗯， 好，我们理解了一维布局和二维布局的概念之后呢，我们现在来学习一下 grid 的 布局的三个核心要素啊，那么这三个概念呢，是 grid 的 基础，大家必须要搞清楚。首先第一个概念就是 grid 的 容器啊，很简单啊，我们给 一个元素设置这个 display grid， 那 么这个元素呢，就变成了一个 grid 容器，一旦我们声明之后，这个容器的内部啊，它的直接子元素就自动的会成为 grid 项，哎，注意，大家注意啊，一定要是直接子元素， 如果是孙子元素的话，哎，它是不会成为 grid 的 项，不会受这个 grid 的 容器影响的。 然后第二个概念就是网格轨道啊，我们他非常他非常形象，就是我们用这个网格线去划分我们的网格，对吧？那么在这个呃，线与线之间呢，就形成了像轨道一样的东西， 然后我们我们这个列轨道就是垂直方向的嘛，然后航轨道就是水平方向的，他们就像走廊一样去啊，走廊一样，我们的内容就在这些走廊里面去排列， 而我们的第三个概念叫做网格线，那么这个网格线呢，就是分割轨道的坐标系啊， 这里呢有一个非常重要的数学关系啊，就是我，我们如果有 n 列网格，那它就是有 n 加一条垂直的网格线，如果呢，你们有 m 行的网格，那就有 m 加一条水平的网格线。 那么呃，为什么，为什么是 n 加一和 m 加一呢？我们来看一下，假设我们有三列，比如说有三列网格，一二三 对，那我们看一下二三，这是三列网格，那么这时候呢，我们是不是要有四条垂直线去啊，形成这 三列的网格，所以这就是 n 列网格，对应 n 加一条垂直线，那么同理呢， m 行网格也是对应 m 加一条水平线的，这是一个非常重要的数学关系。嗯， 好，那么这三个概念是怎么协调工作的呢？我们来看一下这张流程图， 那么这张流程图里面呢，首先 grid 容器啊，它负责创建这个网格轨道系统，哎，我们只要声明了这个 display grid， 那 么它里面呢就是一个网格轨道系统了， 那么这个轨道系统会包含航轨道和列轨道，然后列轨道呢啊，轨道呢，是被网格线分割的，最终呢就形成了我们的网格单元格，所以大家一定要记住这个层次关系啊，他是一个层层递进的关系，是你们理解格瑞的布局的基础 好，那么呃，在我们进入一个实战环节之前，我们先深入了解一下定义网格结构最最核心的几个属性啊，最最基础的几个属性， 他们就像，就像我们盖房子嘛，先要画一个图纸，我们先要画一个骨架。首先呢，我们来看这个属性， great template collis， 那 么这个属性呢，就是用来定义网格的裂轨道，也就是啊， 决定了你的网格有多少列，每一列有多宽。所以大家看这个例子，我们现在定义了三列，因为有三个数字，对吧？然后第一列是固定宽度，两百像素， 哎，第二列呢？是啊，中间这一列呢是 efr， 第三列呢是一百像素，然后大家注意这个中间这个属性啊， f， 这个我们后面也会讲，我这里简单提一下， fr 是 一个非常强大的单位啊，它代表分数，它会自动地计算，并且啊，占据剩余空间里的一份，注意啊，剩余空间中的一份是 efr， 所以 这对于我们啊，后面的响应式网格的设计啊，它是非常有用的。 嗯，那么第二个属性， great tempered rose， 它的用法呢？其实啊，非常等，其实和这个 great tempered collins 是 一模一样的，只不过呢，它定义的是行轨道的高度哎，你可以精确地控制每一行有多高。嗯， 那么最后呢，是我们的 gap 属性，它是用来设置这个轨道之间的间距的，哎，可以让这个布局看起来更舒服，更加不拥挤。你可以用一个值去同时设置行和列的间距，也可以用两个值分别设置行间距和列间距。 嗯，所以大家要掌握好这几个属性哎，那么就掌握了我们创建格的布局的基础。 好，刚才说了很多理论了，我们来看一下。呃，现在就用代码去创建第一个 great 布局。 首先呢，我们看一下我们的 html 结构，就非常简单，一个容器里面有五个词元素，然后呢我们就开始写一些 css 啊，第一步要干嘛？要声明 great 容器，对吧？我们，呃给这个 great container 一个 great 属性， 然后呢给这些艾特一个基本样式，那么现在我们的容，我们的这些艾特是怎么排列的呢？ 哎，聪明同学应该已经想到了，应该现在是啊，一二三四五这样垂直排列下去的，为什么呢？因为我们还没有给这个网格定义任何的行列，对吧？所以接下来呢，我们要定义行列，接下来我们就用刚才的学的属性来定义这个网格结构， 好，我们看一下啊，呃，这里面呢， great template， 对 吧？就定义了三列，然后这个宽度分别是两百像素，一百像素和两百像素，哎，然后 great template row 就 定义了两行，哎，分别是高度都是一百像素， 然后这个 gap 呢，它定义了行和列之间的间距都是十像素，哎， 所以大家看右边这个效果，这个五个元素前，前面三个占据第一行的三列，然后第四个，第五个元素自动的换到第二行，并且呢占据前两个格子， 所以这就是我们过滤的的布局啊。你定义好这个结构之后啊，我们的一二三四五这个内容是自动填充的，哎，还有大家注意啊，我们前面只是定义了五个元素，哎，这第六个格子呢，是空的就完全没有问题，那么如果说 这个我们定义的元素超过了啊，这个格子数怎么办呢？那么格林他也会啊，自动的帮我们创建新的行，比如说我们定义七个元素，他在这里又多了一个新的行，去接纳第七个元素。好，那么这就是我们的实践环节啊。 好，那么在视频的最后呢，我想跟大家分享一些啊，学习 grade 的 心得。首先呢，我觉得大家一定要转变思维，我们从 grade 到，呃， flashbox 到 grade， 不 仅仅是语法的变化，更重要的就是思维的转变。 那么我们的 flashbox 呢，是内容驱动的，你放什么内容，它就怎么排列。而我们的 grade 是 结构驱动的，你只要先定义好，规划好蓝图，然后 往里面填充内容就行了。所以这个过程啊， grid 就 像我们盖房子嘛，布局是这个，我们页面的布局呢，是按我们预先规划好的图纸去施工的。嗯， 然后第二个转变就是要从一维到二维，从用 flexbox 的 时候，你主要就考虑一个方向就行了。然后用 grid 的 时候呢，你同时还要考虑行和列， 所以你要把你这个网格啊，想象成一个画布，然后元素呢，可以在这个画布上去精确定位 啊，我们的 great 布局，其实它实际的应用场景是非常广泛的，比如说啊，仪表盘需要多个组建精确定位，然后响应的是网格，需要适配不同的屏幕尺寸，以及一些复杂的表单，需要 啊，标签和书框完美对齐。所以大家啊，后面用用好了，学好了这个 grade， 你 在布局方面就不用发愁了。好，以上就是本期的内容，谢谢大家的观看，我是方格，我们下期再见，拜拜。