oppo电商网站-实训
准 备‼️一、效果图二、分析/设计网页1.划分网页2.内容设计3.默认样式清除与设置三、板块设计1.top2.header3.nav4.star(弹性盒子布局)5.accossory(网格布局)6.world7.sever8.after_sale9.footer10.bannner四、网站微调1.overflow:hidden 隐藏多余空间五、炫酷补充1.动画插件网址：https://animate.style2.引入animate.min.css3.参考上述网址进行引用
准 备‼️
重难点：
1.整体难度偏大，个别功能没有实现，不要伤心，不要焦虑~
2.讲解过程中，没跟上或者没有实现出来，非常正常，不用着急，尽量听，熟悉框架搭建
3.课后代码放在云盘，有问题自己copy出来再试试~
4.不要太死板，课后自行个性化补充~
建 议：
1.分组学习（不超过4人）~
2.有问题一组的同学相互看看，还有问题再来问~
一、效果图
二、分析/设计网页
1.划分网页
10个部分
2.内容设计
3.默认样式清除与设置
注：一定在html加上<link rel="stylesheet" href="../css/index.css">⭐⭐⭐
三、板块设计
注：在每个有浮动板块的后面加clear:both⭐⭐⭐
1.top
2.header
3.nav
4.star(弹性盒子布局)
5.accossory(网格布局)
6.world
7.sever
8.after_sale
9.footer
10.bannner
注意：记得引入样式
步骤：
- 引入插件，即swiper.js和swiper.css
- 加入对应代码块
注意：js引用放在body前，最后一个div后
四、网站微调
1.overflow:hidden 隐藏多余空间
五、炫酷补充
1.动画插件网址：https://animate.style
2.引入animate.min.css
3.参考上述网址进行引用
- 作者:成
- 链接:https://qcode.im/article/%E7%BD%91%E9%A1%B5%E5%AE%9E%E8%AE%AD
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
