admin管理员组文章数量:1619289
步骤
1. 创建仓库
2. 把仓库 “搬下来”
你想放到哪个文件夹，就在哪右键打开 Git Bash Here
git中搬运语法：git clone 地址
（我通常使用HTTPS的，也可使用SSH的）
3. 搭建相关文件夹结构
(但是有些是用less来写的，写好后less会直接帮忙创建css呀。）
使用的less插件是：VScode中下载 Easy Less插件
4. 分析布局，书写内容和样式
1. 菜单部分
1. 菜单标题部分是固定定位
a标签设置宽高后位置这样是因为，网页的字体大小太大了（图片—内联元素，是与字基线对齐。因此导致它这样了）解决办法：让它变成块盒 将这个设为全局样式
2. 菜单开关
这两个书写顺序不一样，显示的位置是不一样的（和css有关，官网就是先开关，只是我的 “惯性思维” 从左到右依次写过去）
less里头& 相当于没有空格
3. 菜单导航
1， 整个导航内容也是固定定位
2， 它不是通过显示和隐藏 而是先宽高、透明度都为0，展开的时候为100%
2. 弹出窗
网页中有很多弹出框有些样式是统一的，写的时候按样式最多的来写，别的用的时候再减去
1. 遮罩层
- 固定定位
2. 弹出框
- 高度是自适应的哦
这个选中框是个图片
3. 垂直居中的三种方法
- 定位 margin-left （需要知道/定元素宽高）
- transform
- flex布局
4. 视频弹窗
- 播放控件 controls
- object-fit
- 打开之后自动播放，要获取到vedio元素
// videoDom 是获取到的 video 元素
videoDom.play(); // 播放
videoDom.pause(); // 暂停
- 点击关闭按钮的时候视频也停止播放（特殊设置）
3. 上下可滑动的页面
静止状态
- 溢出隐藏
- 显示出来的页面的z-index是最低的，这样滑动的时候别的页面才能在它上层
- 页面布局？就是按顺序设置它们的top值。显示时top值为0 （先获取到视口宽高）
4. 第一页页面布局
小三角是伪元素
5. 轮播图
内容：
- 主图
- 指示器（绝对定位，然后让里面的 li 垂直居中，垂直居中可以用flex）
- 左右箭头
js逻辑代码
1. 点击显示/隐藏菜单导航栏
使用到H5的内容，classList里头有个toggle属性。有类名就去掉，没有就加上
当显示别的内容之后，点击任意位置就收起菜单栏（这样就不会一直展示菜单导航栏了）
ulNav.addEventListener("click",function(){
toggleNav();
})
2. 显示弹出框
3. 选中平台
- ClassList.add( )
- ClassList.remove( )
4. 上下可滑动的页面 ▲
滑动的时候
- 只可以变动视口以外的页面，视口显示的页面是不可以移动的
- 防止误滑，滑动距离＜ 20 时设为0
完成（松手）的时候
- 需要知道哪个相邻页面被滑到视口区域了
- 手touch的时候记录下那时候的位置，然后开始监听手的滑动距离，手松开的时候清除监听
- 如果为负值则向上，正值向下
- 然后自动 “填充” 到视口，更改pageIndex 调用静态方法
页面盒子添加事件，监听用户行为
5. 直接切换到某个板块 ▲
点击菜单导航内容的时候会自动滑动到相应页面
- 对应滑动
- 在当前页面的时候，点击当前内容,也是有动画效果的。那怎么做呢？
将它往下/上移动一下之后再复原
滑动小细节
- 从第一页滑到最后一页的距离和相邻两页的距离是不一样的，而transition设置的都为500ms，所以会有微小的不一样那怎么解决呢?
6. 轮播图
思路分析：因为页面中有两个轮播图，所以提取公共样式
- 使用模板字符串，动态的生成轮播图元素
- 设置它们静止时的状态
- 主图的margin-left
- 提示器的显示
- 自动播放和停止播放的方法
- 人为操作时：
- 慢慢滑动 （判断放手时的位置和开始的位置，大于宽度的一半 就可以调用下一页/上一页的方法；否则就是设置静止状态）
- 快速滑动（判断手点击到放开的时间、滑动的距离）
最后：封装起来；两个参数：轮播图id，轮播图数据 （在相应的页面js中调用）
7. 第二页后半部分—获取新闻数据渲染新闻列表
LOL手游新闻数据获取地址：https://apps.game.qq/cmc/cross?serviceId=166&source=web_pc&filter=channel&chanid=4897&typeids=1&limit=4&start=0&sortby=sIdxTime
- 存在跨域问题，这边使用了封装好的Ajax
封装代理请求
async function ajax(url) {
var reg = /http[s]?:\/\/[^/]+/;
var matches = url.match(reg);
if (matches.length === 0) {
throw new Error("invalid url");
}
var target = matches[0];
var path = url.replace(reg, "");
return await fetch(`https://proxy.yuanjin.tech${path}`, {
headers: {
target,
},
}).then((r) => r.json());
}
如何使用
ajax(url地址).then(resp=>{
console.log(resp); // 服务器的响应结果
})
8. 第三页
阻止浏览器默认行为
dom.addEventListener("touchmove", function(e){
if (e.cancelable) { // 如果事件可以取消
e.preventDefault(); // 取消事件 - 阻止默认行为
}
}, {
passive: false // 指示浏览器：我的事件处理函数中有可能要取消默认行为
})
passive如果为true，表示处理函数永远不会调用
preventDefault，如果调用了，会收到浏览器的一个警告。passive如果为false，表示处理函数可以调用
preventDefault。大部分情况下，passive的默认值都是false，但是在移动浏览器上，针对
touchstart和touchmove，它的默认值是true，这就导致了默认情况下，在touchmove中无法阻止默认行为这样设计的背后，是考虑浏览器的性能，不得以而为之的。
将写的内容放到仓库
创建并切换分支
git checkout -b branchName
添加
- 单个文件
git add readme.md
- 所有
git add .
提交
git commit -m 'add readme.md'
push到仓库
git push origin branchName
真机调试
保持手机和PC在同一局域网
-
利用 live server 搭建开发服务器
-
查看PC的局域网IP地址
- windows 使用命令
ipconfig
win+r 调出cmd - mac 使用命令
ifconfig
- windows 使用命令
-
使用局域网IP地址访问开发服务器
格式示例：
http://192.168.2.6:5500/index.html -
将该地址生成二维码
可以使用在线二维码生成器：https://cli.im/
-
用手机扫描二维码
部署
icon后续添加可能会显示不了，因为浏览器第一次加载的时候缓存了，后头就不会再进行缓存
ctrl + shift + R 强制刷新后就可以展现了
结果
- 真机调试失败（可能没在局域网里头
- 部署完却看不到结果…sad
版权声明：本文标题：英雄联盟手游主页---rem布局 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1728795265a1174105.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论