web前端实战项目
关注
分享
扫一扫
文章平均质量分 86
Frank.30
罗曼罗兰说：“这个世上只有一种真正的英雄主义。那就是，认清生活的真相，并且仍然热爱它。
展开
-
Vue3 京东到家项目实战第二篇（商家详情页面及购物车完整逻辑开发） 进阶式掌握vue3完整知识体系
现在我们的附近店铺是写死的数据，我们把它通过接口请求过来。在 util 下的 request.js 中我们还需要写一个 get 请求来获取附近店铺的数据，那我们创建一个 axios 实例对象，在里面配置参数，这样就不需要在每个请求里都设置 baseURL 了。现在我们就要改成从后端接口来请求相关数据 ，删掉这些数据然后把刚刚定义的get方法引入进来，向接口发送get请求，这里请求的接口在接口文档里....原创 2022-07-13 12:13:26 · 3311 阅读 · 27 评论 -
Vue3 京东到家项目实战第一篇（首页及登录功能开发） 进阶式掌握vue3完整知识体系
在本文中我们会完成京东到家项目首页和登录注册页面的样式开发，其中会用到 element-plus 组件库，登录注册会使用 axios 发送 Mock 请求来实现，贴近真实项目开发。原创 2022-05-27 12:41:40 · 5532 阅读 · 61 评论 -
原生JS实现飞机大战游戏 超详细解析 快来做一个自己玩吧
案例分析：1.开始前 ：一个弹窗面板2.游戏中：背景滚动 hero的操作 敌机的创建与运动 子弹的创建与运动 碰撞检测3.游戏结束：一个弹窗面板下面介绍一下一些核心的代码：背景滚动的实现：function start() { var timer = setInterval(function() { bgMove(); },30) }start();这是我们的初始化函数，为了实现背景滚动的效果我们需要定义一...原创 2022-05-19 17:50:46 · 6183 阅读 · 55 评论 -
原生JS实现FlappyBird游戏 超详细解析 快来做一个自己玩吧
1.适配设备pc:320*568移动：占满窗口适配设备：新建一个public.js文件，来判断是否是移动端设备function isPhone() { var arr = ["iPhone","iPad","Android"] var is = false; for(var i = 0;i<arr.length;i++) { if(navigator.userAgent.indexOf(arr[i])!=-1) { i原创 2022-04-18 18:17:43 · 9166 阅读 · 45 评论 -
原生JS实现表单验证（基于正则表达式）
🙋在做这个表单之前我们先想看一下做出来的静态表单：👏看一下大致的html结构：<div class="box"> <form action="" id="form-com"> <p class="main">姓名</p> <input type="text" placeholder="请输入姓名" id="main-in" class="test">原创 2022-04-12 18:17:36 · 1977 阅读 · 1 评论 -
[css]Flex弹性布局详解 [附携程网移动端案例]
目录一、flex布局体验:sunglasses:传统布局：flex弹性布局：二、flex布局父项常见属性:running:1.flex-direction2.justify-content3.flex-wrap4.align-items（单行）5.align-content（多行）三、flex布局子项常见属性:sunny:1.flex属性2.align-self四、携程网移动端案例:sunflower:Flex布局可以说是不论pc端移动...原创 2022-04-06 19:22:12 · 2321 阅读 · 4 评论 -
[html+css+js] 小米官网首页制作
实现效果：源码及图片素材地址：https://gitee.com/jie_shao1112/xiaomihttps://gitee.com/jie_shao1112/xiaomi这里进行一些说明：在index.html里引入了三个css文件，第一个css文件reset.css是初始化样式表，第二个css文件引入的bootstrap3的css文件，因为用字体图标方便，最后一个css文件就是我们的项目样式文件有两个js文件，animate是缓动动画方法，主要用于轮播图的制作在这个..原创 2022-04-06 00:08:07 · 1922 阅读 · 5 评论 -
[HTML+CSS+JS] 实现注册登录页面
文件夹结构：index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">.原创 2022-03-28 23:04:29 · 3586 阅读 · 0 评论 -
通过git提交网站到码云(gitee)并部署发布静态网站
准备工作:需要下载git软件 需要码云注册账号git可以把我们的本地网站提交上传到远程仓库(码云gitee)里面 类似以前的 ftp码云就是远程仓库，类似服务器1.码云创建新的仓库 pinyougou:创建完仓库后就是这来到了这个界面：2.利用git提交把本地网站提交到码云新建的仓库里面(1) 在网站根目录右键- Git Bash Here没有git bash 的同学说明你还没有安装git，按完以后右击就有了 (2) 如果是第一次利用git提交，请配置好全局选项原创 2022-03-27 20:59:19 · 1505 阅读 · 2 评论 -
rem适配布局制作苏宁移动端首页
实现效果：可以看到随着我们屏幕尺寸的不断变化，我们制作的移动端页面也能有一个自适应的效果，这就是rem适配布局的好处这里我们主要是体现一个rem适配布局所以剩下的部分以同样方法搭建1.技术选型方案：采取单独制作移动页面方案技术：布局采取rem适配布局（less+rem+媒体查询）设计图：采用750px设计尺寸2.搭建相关文件夹结构3.设置视口标签以及引入初始化样式关于初始化样式normalize.css文件和案例用到的图片，大家在这个链接拿来就可以用链接: link.index.原创 2022-03-25 15:03:39 · 1335 阅读 · 1 评论 -
[HTML+CSS] 仿京东列表页项目实战
仿京东首页部分的项目链接在这：链接: link.(https://blog.youkuaiyun.com/qq_49900295/article/details/123475801?spm=1001.2014.3001.5501)列表页实现效果：我们新建一个用于列表页的list.html和list.css文件。我们在首页项目的index.html文件里的nav类下的menu_items类里找到手机的那个链接：然后将a链接中原来的 ‘#’ 改成 ‘list.html’ 。以实现单击首页菜单栏中的手机时能够原创 2022-03-16 08:42:35 · 1684 阅读 · 0 评论 -
[HTML+CSS] 仿京东首页项目实战
实现效果：此项目要实现结构与样式相分离的设计思想样式文件的分类：初始化css让浏览器风格统一，把常用的初始化语句放入base.css里面我们把一些公共的样式 放入common.css里面（因为我们还有除首页的其他页面，后续更新。这些页面都有的样式放在common.css里，比如页面的头部和尾部）我们把html结构搭建在index.html里首页的其他样式放在index.css里示例代码：base.css/*清除元素默认的内外边距 */* { margin: 0; p原创 2022-03-14 12:47:02 · 3417 阅读 · 0 评论