web前端进阶

Coder_R
238 阅读4分钟

实现移动端页面 image.png

一、平面转换

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 旋转效果必须配合“过渡”使用

image.png

image.png

image.png

image.png

如果把旋转放在前面，不行:旋转会改变坐标轴向，先旋转改变了坐标轴向，位移方向会受影响————多重转换如果涉及到旋转“旋转往最后书写”

image.png

image.png

image.png 使用margin实现位移。这种方法不用考虑hover的位移，属于直接实现 image.png 使用transform实现位移 image.png

image.png

image.png

image.png

image.png

案例

image.png

image.png

二、空间转换

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

Z轴旋转 image.png X轴旋转 image.png Y轴旋转 image.png

image.png

image.png

image.png

案例：先做1个父级，两个盒子，分别放颜色，再贴到大立方体盒子的前面和后面，用旋转效果实现立方体转动效果

image.png

image.png 案例——整体流程
1.设置大盒子，里面设置“面”小盒子
2.给小盒子定位（子绝父相），小盒子层叠在大盒子上
3.给大盒子设置tf-s立体属性，“转换”（移动、旋转）小盒子平面，使大盒子成为一个立方体图
4.给大盒子li加hover实现 旋转效果，方便。如果给小盒子a加hover，太麻烦

image.png

image.png

image.png

image.png

image.png

image.png

image.png 第二种方法中 百分比指的是动画总时长的占比

image.png

image.png

工作中 动画的复合属性常用！！

image.png

image.png

image.png

image.png

image.png

三、案例

案例——实现逐帧动画

image.png

image.png

image.png

image.png

from-to中：动画的开始状态和盒子的默认样式相同的，可以省略开始状态的代码

image.png

“走马灯”案例

image.png “无缝动画”：显示区域能放下几张图片，就给要展示图片后面再重复加几张图片，保证一组图片移动完后显示区域不留白。

image.png

image.png

“全民出游记”案例

image.png

image.png

四、移动端开发

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 解决办法：添加“视口标签”，"!"生成的网页骨架自带视口标签

image.png

image.png

image.png

image.png

image.png

五、Flex布局

image.png

image.png

image.png

image.png

image.png 视觉效果:子级一行排列/水平排列 水平排列:默认主轴在水平，弹性盒子都是沿着主轴排列

image.png

image.png

“justify-content”加给父级（盒子）

image.png

居中

image.png

间距加在子级的两侧
视觉效果:子级之间的距离是父级两头距离的2倍

image.png

间距加在子级之间

image.png

所有地方的间距都相等

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

修改子级居中对齐方向：
1.先确定主轴方向;
2.再选择对应的属性实现主轴或侧轴的对齐方式

image.png

image.png

image.png

image.png

五、项目————小兔鲜儿（移动端）

项目文件 image.png

image.png

image.png

六、项目————小兔鲜儿（pc端）

image.png

image.png

七、移动适配

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

八、less

image.png

image.png

image.png

image.png 在vscode中下载EasyLESS 在.less中写的嵌套选择器，保存后，在.css中自动生成父子级关系选择器

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

用“导出路径”导出，必须写在“.less”文件的第一行

image.png

image.png

九、案例————游乐园游客微信端

image.png

image.png 用“settings.json”导出，在“.less”文件中需要保存下，“css”文件夹中才能出现对应的“.css”文件
准备工作：
设置settings.json 中导出代码
建立index.less文件，保存下，生成css文件夹下对应的index.css文件 index.html页面引入字体图标等等，引入json文件
“base.less”初始化用，"normalize.less"做浏览器兼容

image.png 标签选择器权重<类选择器，所以调整字体图标尺寸标签选择器无效用icofont类选择器
移动端没有“hover”鼠标悬停样式，只有“&交集选择器样式”
"&"表示当前位置
.active.off {} 必须是active类同时应用了off类
div.off {} 交集选择器

十、移动适配————vw,vh(就是个单位)

与rem不同的是，vw/vh不用引入js

image.png

image.png

image.png

image.png

vw和vh使用效果一样。但是因为有全面屏存在，vw和vh不能在同一个盒子中混用！

image.png

十一、临摹b站

省略号 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10daa27c750549b68c16addfa547a1de~tplv-k3u1fbpfcp-watermark.image?)

image.png

十二、响应式网页

media

image.png

image.png

image.png

image.png

image.png

image.png

image.png ———————————————————————以下内容了解，工作中不用——————————————————————————

image.png

image.png

image.png

image.png

———————————————————————以上内容了解，工作中不用——————————————————————————

image.png

image.png

小案例——响应式隐藏侧边栏

image.png

bootstarp

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

定制————当项目要求和默认的bootstrap样式不一样时

image.png 可以在bootstrap网页中“ctrl+f”搜索相应的类名

image.png

然后点侧边栏最下面的下载（download）,
再点“编译并下载”
将新定制的bootstrap解压放在项目文件夹里面的lib文件夹下
修改“index.html”中link引用的bootstrap路径

image.png

除了“企业+内容少的网站”，其他都做不到响应式效果
“电商网站” 实现响应式一般做pc端和移动端

avatar
文章
阅读
粉丝