数据库Models的引用说明

数据库Models的引用说明

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： html.css.js

作者：林海威

撰写时间：2022/4/28

注意看红色箭头，共有6个步骤，按顺序操作下去

1. 创建一个新的html文档保存，在body区域进行代码的编写，首先，我们创建一个新的div“class”类名为fontr外部的盒子，类名的名字可以按照自己的兴趣进行命名
   
   2. 然后我们在这个div内先放置9个a标签，在这a标签内写上我们的文字，这里可以把前面的a标签自带的链接标签给删掉，这里不需要用到链接标签
   
   3. 当我们文字输入完成之后，我们在文字前面添加一个em标签，在em标签里面写入文字，这里em标签的效果是没有动画效果的
   
   4. 然后我们再下方添加五个a标签，源代码的a标签也是和上方的字一样写进去
   
   5. 然后我们在刚添加的em标签内写入行内样式style，在这里可以直接在父级元素上面设置，就不用跑到css文档上选择到父级元素在设置样式了，这里的em标签内的style主要设置背景颜色
   
   6. 现在我们设置到这里，我们的源代码已经写完了，选择我们设置css样式，首先我们在最外面的盒子设置，宽高是随便设置的，主要能塞的下去内容就可以了，然后这是定位为固定定位，因为我们动画出来的时候不可能会到处跳来跳去吧，记住，位置是根据自己的兴趣爱好放在哪里的，而我这个所作的这个手风琴的位置为右侧边上的，然后再给外面的盒子设置一个鼠标样式为点击样式。
   
   7. 我们给外面的盒子设置好了样式之后，然后就到我们给盒子里面的a标签添加样式了，这样子我们肯定要选择到盒子里面的a标签的，因为你单选择a标签的话，dw是无法识别到标签里面的a标签的，你得选择到那个标签下面的a标签才可以，然后样式看着效果图来设置，在后面我们一定要设置transform还有过度属性，因为这个就是动画的效果
   
   
   8. 然后设置我们的em标签，其实也没有什么要这是，只有一些小小的细节方面要设置，比如文字排版还有上外边距，！！！！记得还要设置伪类（hover），伪类的话选择自己喜欢的颜色就行了，这里的话我就不多写了
   
   9. 然后到我们的重头戏的地方了，首先先给移入时的a标签设置个动画效果
   
   10. 之后到了最后一步，这里主要设置移入的时候，各个a标签所出来的动画时间，这里的话不是利用移入就出来的，也可能一移进去就全部出来的吧，我们可是前端开发员，没有点动画怎么吸引读者的目光呢，我们设置个delay的延迟播放就可以了
   
   
   
   11. 最后的效果是，只要做出来差不多的效果，有动画右效果就可以的了，所以问题不大！

 

这是我所学到的Models引用步骤，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！