粉丝1.3万获赞5.0万

同学们,老爷爷手里这个一捏就变形,一翻就变脸的小东西,居然是个活了几百岁的老网红,他火的时候别说手机游戏机了,连电视都还没出生呢。明清时期的街头巷尾,小贩们挑担子一吆喝,纸帆花直接就成了顶流爆款。那时候的年轻人人手一朵,逛庙会赶大集,手里不算这个,能变花样的纸帆花都不好意思跟人打招呼,妥妥的古代朝完天花板,更牛的是,这玩意现在可是正儿八经的非物质文化遗产。 说白了,咱们今天亲手做他玩,他不是在做手工,是在跟几百年前的同龄人隔空互动啊!这波操作是不是瞬间觉得手里的纸帆花酷到起飞了? 今天我们一起来学习分宜纸分花。先来看一下需要准备的材料,有正方形彩纸十张,双面胶剪刀、雪糕棍两个。我们先将正方形彩纸对折, 再对折,再进行对折,压出折痕后展开。我们得到八个小长方形,然后用剪刀剪开,我们将小长方形对折,再对折,压出折痕展开。 接下来我们来学习贴双面胶的两种方法。第一种方法,我们用双面胶分别贴在长方形的上中、下的位置,一共贴三条双面胶。第二种方法, 我们分别把双面胶贴在第一个折痕和第三个折痕的位置,一共贴两条双面胶。接下来我们将十张彩纸都像这样三二三二的贴好,贴好以后整理出来,要注意最后一张不贴双面胶。接下来我们要将这些彩纸用三二的方法交替的将它粘好,注意在粘贴的时候一定要对齐, 这个步骤一定要有耐心,最后的这张纸贴上我们就完成了,我们打开看一下效果,接下来我们要将棒棍固定在彩纸上,我们将前后分别贴好双面胶, 然后我们将棒棍贴在上面,打开看一下效果吧,这样的一个好玩又好看的纸板花就做好了。


hello, 大家好,我是多多鱼,这个视频是 html 加 css, 非遗文化主题网页。第四个视频,之前三个视频我们分别讲了顶部导航部分和大图部分。第二个视频我们讲了非遗概览, 这个左右图纹布局啊,然后在第三个视频我们讲了非遗分类。这个视频呢,我们来讲一下非遗故事部分,首先还是和之前一样啊, 我先这个画一个东西啊,首先我们还是一样把它看成什么,一个什么呢?整体的一个什么呢?大盒子对不对?那大盒子里面分为什么呢?是不是分为两个小盒子呀?也就是我们上面这个什么呢?标题部分 和这个下面的部分对不对?那有人说了,为什么不左右分呢?那,那我们来看一下,你左右分怎么分?是不是分不分不了呀?这没办法,是不是盖住它了对不对? 那盖住它肯定没办法,所以说只能上下分。那一个大盒子里面分为两个小盒子,那第一个小盒子里面呢?它其实很简单,它就是一个非遗故事对不对?没有别的东西啊,那之前我们视频也讲过像非遗故事呀,非遗传承人啊,这些东西 他都是什么呢?样式都是一样的,我们已经写了什么呢?固定的什么呢? css 名了,然后呢?到时候一会写代码的时候给大家看一下啊,他直接运用就行了啊。那下面这块盒子呢,是不是也很简单?他其实就分为什么呢?两个什么的小盒子 对不对?那两个小盒子对不对?那两个小盒子我们可以看一下,那小盒子是不是还可以去拆分呀?那两个小盒子里面是不是分为左右两部分?那为什么不是上下呢?是不是因为他也是这样盖不住呀,对不对?所以是分为了什么呢?图片部分和这个什么呢?文本部分对不对? 那同理,下面一样的,别看他的这个顺序不一样,他其实他写法是一样的,很简单啊,样式就是写一种就可以了啊,那这样的话是不是很明了呀? 那我们就是首先看一下,它分为一个最外层的一个大盒子,一个大盒子里面分有两个小盒子,一个顶部的这个标题,一个下面内容部分,然后呢,内容部分是不是又分有两个盒子,然后每个盒子里面又分有两个小盒子,对不对?像这种这个里面是不是 h 三标签标题标签啊,对不对?还有什么呢? p 标签段落呀,对不对? 那这样是不是就很细分了?好,细分了以后呢,我们来看一下,我们把这个工具退出了啊,然后呢,我们直接去实现这个啊, 网页啊,还是一样打开我们之前的网页啊,我们接着往下写就 ok 了,对不对?那之前我们说到这个标题对不对?分析分类这个标题我们直接附用就可以了,对不对?好,我们先运行啊, 我们来看一下啊,这是运行效果啊,然后分析分类是不是在这,那我们接着往下面写就可以了,我们这个是什么故事,对不对?故事吧,也很简单啊,那写一个 d r v 的 一个什么呢?盒子对不对? 好,然后呢,我先给大家注示一下非遗故事。 好,然后这个名字你可以起个名字,把它这个 s d o r y, 对, 对不对?故事对不对?然后咱们把我们标题复制过来,它这个是不是非遗故事呀?好,我们来看一下啊,把这个移过去, 那非遗故事是不是就出来了,对不对?就很简单啊,然后呢?我再写下面的盒子就行了,对不对?然后是不是内容区域的盒子? 我刚才说了一个大盒子,一个最外层的这个,呃,大盒子是不是里面分为两个小盒子,一个是标题,一个是内容,对不对?那个内容我们给它起个名字叫什么呢? s t o r y 杠 book, 单起其他名字也行啊,最好用语义化一点就可以了。 然后里面刚才说了,是不是分了两个小盒子,也就是两个 drv, 对 不对?但是我们先写一个,因为它 drv 刚才讲的是不是一样的呀?那我们就给它起名字叫什么? sto, 呃, box, 我 们就给它起名叫 gmail 的, 对不对? 然后里面我刚才说了,里面是不是分两个?一个是以卖的对不对?一个是另外的一个文本,那我们就给他写一个 drv, 对 不对?那文本部分我们刚才说了, 看了他是不是分为两个部分,一个标题一个什么的段落,对不对?但是我们的段落不止一个,对不对?也没问题啊,几个都没问题。然后呢?啊, h 三,这个是标题对不对? 然后下面是段落,就是文本的这个段落,对不对?好,段落,那这样的话效果是不是就出来了?我我我先用其他的图片代替啊,一会我再把其他再截个图进去就 ok 了。好,我们来看一下效果, 那是不是他已经出来了段落和标签,那为了这个段落和标签多一些呢?然后呢我把这个什么呢?呃,这个文本我给他复制一下,给大家看一下啊, 我把这个文本给复制出去啊, 把文本复制去,我就不打了啊,打字的话太慢了,影响咱这个视频进度,对不对?大家看了一下,然后呢把这个复制好以后,然后下面这个第一行的这个昆剧啊, 好复制,它其实就放 p 标签里面就可以了,对不对?这是一段,然后呢下面这一段它是不是第二段? 好,第二段的话我们直接也复制过来就可以了,再加一个 p 标签是不是就 ok 了?记着一定要写在什么呢?这个 text 的 文本这个里面啊,一定要注意啊。 然后呢我们先写第一段啊,那它是一个中间的一个盒子,对不对?我们来看一下它中间的盒子是不是有一个背景颜色,有一个什么呢?白色的背景,然后有个阴影,对不对? 那也很简单啊,白色的背景和阴影,那还有弧度,对不对?这个我们都讲过啊。然后这个后面的这个背景呢,我们先写一下 后面的这个背景是什么颜色,我们取一下啊,是一个渐变色或者是一个背景,先把它取一下吧,但是这个颜色呢,随便你自己去选啊。然后呢我们来看一下,我们在这个地方去写一下它的样式啊, 回忆故事,对不对?好,然后我们在这里标上就可以了,还是一样,一定要记住你起的名字是什么,你就写什么名字啊。呃,遇到一个就是就是比较这个 奇怪的问题啊,就是他明明在这里写的是什么呢?派姐他,我写的是派姐杠他一头,他在这边呢,又写一个派姐杠他一头,那肯定不生效,对不对? 一定要记住不要用点啊,用杠啊,因为你本身它前面就是点,如果你在这上面你再加个点它,其实它就不识别了,知道吧? 然后呢? story, 然后呢?我们给它起个这个 background 的, 就我们刚才复制的啊,就是背景颜色啊,因为我这个是背景颜色,我看是什么背景颜色啊, 或者用取色去取也行。我直接用这个背景颜色吧,一样的你,当然你用其他的颜色也是可以的。 background 它其实就是背景色,对不对?我们来看一下背景色是不是已经改了, 那这背景色其实它是有区别于这个上面的,对不对?上面它是有渐变色的,那我们下面这个背景色呢?就很奇怪啊,然后,嗯,背景色它就不是很,我看一下啊, 你看他的背景色和他的差别就不大了,对不对?所以说,嗯,我们这个背景色改一下吧,因为上个背景色是用渐变色,我们用渐变色, 那我们就给他改成什么呢?改成白白色的背景了,当然了,你改你不改也是可以的,那后来让他有一个渐变的效果,因为你如果都用这个的话,整个一体就不是那么好看了, 可以看一下它上下是不是要有一定的距离,跟上面是一样的,对不对?我们给他加一下线啊,也就是什么呢?拍解杠这个 top 呢?是什么呢?六十个像素值,然后下面也是六十个像素值,这个这个代表的意思就是什么呢?上下那边距是六十个像素值,那是不是就出来了?然后呢我们再去写下面的这个部分啊? 那标题我们不用管了,对不对?标题,因为我们已经写好了啊,这个 story 钢 box 我 们给它有一个什么呢?长度是一二八零 p x, 因为我们上面的内容部分都是一二八零,所以说我用了一个这个啊, 大家可以看一下,对不对?因为和上下一致对不对?然后呢我们再写里面呢,里面呢?因为我们背景颜色改了,是不是?所以说我们这个类似的呢?我们改成这个呢,改成一个这个, 哎,上面这个颜色啊,我们可以看一下是不是效果就出来了,然后呢还是一样的,是不是要有弧度呀?弧度,我们给一个十二个像素值的弧度。然后呢啊 box 就 盒子的这个阴影呢,我们给他一个阴影啊,我们看一下之前给的阴影,直接拿过来就可以了, 我们可以看一下啊,它阴影是不是就出来了?假如说这个阴影你感觉就是说,哎,不是很亮啊,或者不是很清晰啊,你把这个透明度啊给它改一下就可以了,是不是就出来了? 然后我们再来看一下我们这个效果图上面是不是他有他这个地方离他这个上下是不是有一定的距离啊?因为我们现在这个是不是贴的很近啊?对不对?然后呢我们可以给他一个贴的很近,我们可以给那边距,对不对?因为我们想让他内部上下左右有这个哎,四十个相距值的那边距,那我们就给个四十的那边距就是了,对不对? 你觉得这个四十的话和实际效果呢?你可以调,对不对?你调个三十是不是也没问题啊? 然后呢,这里面也很简单了,为什么我刚才分为两个部分呢?是不是以 mag 和为什么要包括 diy? 为什么不把它们直接写呢?因为我们要用弹性布局,对不对? 弹性布局的话,你想要它左右布局,它是不是要它下面所有的子集都会左右布局?那你写成两个盒子是不是就分为两块了呀?那是不是就很简单了呀?那你给他一个弹性布局,他是不是就,哎?里面的内容是不是会占一行了?大家可以看一下是不是?那对不对? 然后呢,你再给它一个什么呢?两段对齐,这个时候你会发现,哎,为什么还是这样没有变呢?因为你这个它这个文本部分呢,我们并没有给它长度,对不对?它会自动把所有的剩下的内容给占掉,对不对?好,然后呢,我们给它写一下这个样式就可以了。那第一个就是 story, 呃,更类似的,下面的什么呢?你麦姐对不对?你麦姐这个图片呢,我们给先给一个三百二十个箱子,我们看一下啊,对不对? 对,是不是有点小了呀?我看这个多少?这个给的是四百一十六啊,因为这个你如果文字太大,这个图片太小的话也不好看,我们给个四百二吧。 好,我们可以看一下它是不是变撑大了呀?然后呢,这个这边的文本部分也会很简单了,那就是 story 什么的,类似杠 t s t。 那 我们整个的是一二八零,对不对? 一二八零呢?我们减去了这个上下左右的,这个左右的那边就是,是不是三十加三十是六十呀,对不对?那就是一千二百二,一千二百二,减去四百二,是不是就是一千二百二?先减去二十对不对?就是一千二,一千二,减四十的就是八十,八百,对不对?那你给个八百, 这个时候你会发现,哎,不就是八百吗?为什么?哎,看一下,为什么还是没有动呢?因为你整体都是八百,对不对?八百加四百二,加两个,这个左右的内边距三十,那是不是就一百二一二八零了?那你都没有控制他左右对起个什么的,对不对?你给他一个七百五,这个时候你看一下,哎, 它是不是中间就有恐惧了?你觉得,哎,这恐惧太大了,我不想要那么大的恐惧。那你是不是就可以给他加大一点?七百八,那是不是中间就有了?那我们左右是不是都给了个三十?那我们也给个三十吧,这样的话是不是均匀一点,好看一点?那这样的话是不是效果就出来了, 对不对?你看中间这个内容区域是三百,对不对?那你慢慢给它撑起来就可以了。这个内容区域我们看一下啊,我们把这个 颜色给取一下啊,好,这个大小是二十八个像素,因为标题嘛,要大一点,好看,对不对?那这个标题怎么设置的?是不是也很简单?是不是这个类似的杠 t s t 下面的什么的 h 三标签对不对? 嗨,卡了值,我们给他加一下啊,一定要记得前面的这个啊色值,然后呢?这一个大小呢?我们看一下,我盖了个 size 呢,我们给个多少呢?给个二十八对不对?刚才是二十八还是二十四?我记得应该是二十四对不对?二十八太大了,你给这微调啊, 二十四,那是不是效果就出来了?然后下面的文本部分也很简单啊,那个这个段落部分啊, sorry 杠,类似的,你不想让它颜色那么深那么深啊?你比个三三三,然后行高呢?就是行长间距一点八, 然后呢字体大小呢?我们给他设置一个什么 forget 杠 size, 我 们给他设置一个十五箱子值吧,默认是十六箱子值啊, 那是不是效果就出来了?然后这个他们中间要有一定的距离,对不对?那也很简单啊,段落和段落之间的距离呢?我们给他一个麦间 top 值,给一个什么的麦间外边距对不对?外边距都可以啊。 top 值给他一个什么的二十个像素值,我们可以看一下段落和段落之间是不是有一定的距离了, 然后你想让这个标题部分更大,你也可以设置更大啊,我们给一个十八个像素值, 那这样的话是不是就大了一些啊?十八还是大的话,那你还是默认十六个像素值吧,对不对?然后二十可能有点长,因为这个你毕竟是段落和段落之间嘛, 那这样的话是不是就出来了效果?你觉得这个标题和这个地方要更大一些,对不对?那你就给 h 三嘛,对不对? h 标签给他一个,下边去给他一个什么呢?二十个像素值,多一个五像素值啊,这个时候大家发现,哎,他其实呢, 他就多了五个像素值,为什么只多了五个像素值,并不是这个相加呢,那其实这个就是一个外边距的一个特性了,我们给三十个像素值,他就会继承这个三十的,他并不会加成四十,那这样的话是不是效果就出来了?我们来看一下啊,那这个地方有一定的弧度的话,我们也可以给他设置弧度,对不对?这个颜色我们看一下啊? 啊?这个颜色是这个颜色啊,我给他换一下吧,他其实那个我那个比较小一些啊,我的设计稿上面你看着比较小,其实他并不小啊,因为我这个你看他是百分之六十, 你看我放大成百分之百,他其实也是挺大的啊,只不过就是就觉得你这个视觉上面看的这个小,你看其实我们还是比较小的,他应该是十八个像素值啊, 那这样的话,其实我们这个效果图这个地方已经做出来了,然后我们这个弧度,这个图片的弧度我们给它加一下就可以了。边的弧度, u r d r 弧度,我们给它一个日八个像素值的弧度吧,我们看一下是不是效果就出来了。 那下面这个这一块这个倾斜的是不是也很简单?巨简单啊,那我刚才说了,它只不过是内容区域的一个这个 改变啊,你我们直接复制过来,只要把这个引麦键什么的放在这个什么的 t i t 这个 dv 下面啊,就 ok 了。那这个时候你看一下 那是不是效果就出来了?那上下的距离是不是我们去调一下?那往下去调的一个距离也很简单啊?就在这个地方类似的,对不对?那这个时候呢?我们不是想内部,我们是想上下有,对不对?那我们就给他一个下边距,给他设置一个什么的四十个像素值的下边距啊,大家可以看一下三十啊, 那是不是下面就有一定距离了?你觉得这个三十有点小的话,你可以给他调吧,调一个五十也是没有任何问题的啊,根据自己的需要去调就可以了。那这样的话是不是这一块的效果就出来了? 你觉得这个颜色呢,太深了或者是不好看的话,你也可以去调微调,调成一个其他的颜色啊,调的稍微就是说,哎,就说浅一些也行啊,对不对? 那对不对?这个效果其实就出来了对不对?那这个页面就已经完成了,其实是内容区域的改变啊,我把这内容给它改一下吧,因为有很多同学要素材和这个代码,所以说我把这个文本内容啊,都给都给写出来啊。 我先暂停一下,直接替换吧,也不暂停了,直接替换吧,然后大家看一下怎么去替换文字或自己写文字啊,也很简单,其实 这就是这个公益。这个文字啊,你直接复制就可以了,它是第二个,对不对?那其实就是把这个标题给他替换就 ok 了,然后你怕这个内容替换错的话,你可以把 p 标签里面内容删了再替换,也没问题啊。行,太难了对不对?好,复制 不一定要什么文字和我一样啊,根据自己的需求去改就可以了,咱要记得不要把图片拉伸太多,你内容区域最好选两段,哎,和内这个图片这个高度不会撑太狠就比较好了。然后呢?还是这个图片部分啊? 把图片切出去啊,然后导出,然后给起个名字叫什么的 story 二,对不对? siri 杠二,没问题啊,好,这个呢,就是给它导出起个名字叫什么呢? sorry, 杠一,对不对?没问题啊,不要有空格啊,图片命名不要有空格,不要有中文,最好有语义化一点, 然后再下载,里面是不是就有它俩了?然后我们把它给 ctrl c 复制过来了,放在我们的什么呢?我们的,哎,这个文件的这个以 m c 文件夹下就 ok 了,记住这里是 s r c, 不是 s c r 啊。 然后呢,就是下面的 story 杠一,对不对?当然你拼他不弹,你也可以去拼拼,拼出来就可以了。记住他的,记住他的文件后缀名啊,当然你文件后缀名,你说我不知道怎么看,因为我没有文件后缀名,你看像我都有,对不对?你在你的查看部分,然后有一个显示, 然后有个文件扩展名,给它打开就 ok 了啊,就能看出你是拼音机或者是 jpg 或者其他的了,然后也是一样的,下面给它换成的 story 杠二,就是我们刚才引用的啊,但是你要有这个图片啊,你起它的名,你起其他的名字,你用其他的名字就 ok 了,那是不是效果就出来了? 那是不是你觉得你看我运行出来以后,为什么?哎?你这个图片是不是这下面内容距距离太太多了,对不对?那这个也是,那这样的话我们怎么调呢?那我们是不是把这个图片给调大一点,我把图片加六十,我四百八,那我把它减六十七百一, 那这样的话图片的这个大小大了,他这个文字距离是不是小了?他是不是就会拉伸一些?那你觉得,哎,你说我的图片太长了,但是我不想要你那么长的图片,对不对?那他的图片其实被下面被截了一块对不对? 你要么呢就是把这个图片拉小一点,要不就把图片的这个高度给拉小一点就 ok 了啊?那,那我们给他给个三百像素,大家可以看一下啊,或者内容给他去长一点就 ok 了啊。那三百不行,我给他给二百六, 那是不是内容就小了?这样是不是好看一些?那图片压缩了怎么办?还是用我们之前的方法,直接给图片一个上一个什么的裁剪,或者是你直接用这个比例正好的这个图片啊? 那是不是这样的效果就出来了,对不对?那这样的话这个我们这个呃非遗故事这块就完成了啊,谢大家收看。如果有想要这个本视频 到目前为止是第四个视频了,这个视频之前的所有的这个这个代码和素材的话,看一下这个什么呢?右上角这个地方私信我就 ok 了啊,谢大家收看。我们下期再见。拜拜。