web
关注
分享
扫一扫
js css html vue
fengchengwu2012
做技术就要追求卓越
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css底部对齐布局
绝对定位可以将元素直接定位到整个可视页面的最底部，不受父容器的约束，有些场景使用不受灵活，此处position使用fixed固定定位效果也一样，稍微有区别的就是，使用fixed定位，如果在加一层盒子，使用相对定位，定位效果失效。原创 2024-12-17 23:16:26 · 828 阅读 · 0 评论 -
Vue3网站锚点定位
网站上实现锚点定位的方法有很多，今天介绍vue3实现的定位效果的方式。通过scrollIntoViewh函数的行为，滑动至指定的容器。原创 2024-12-06 10:22:27 · 565 阅读 · 0 评论 -
css grid实现九宫格布局
常见的九宫格布局可以使用flex布局实现，但是flex布局有个致命的缺陷，比如3行3列的布局，当第不足3个元素的时候，元素依然是平局平铺的，这样就不满足九宫格的效果，这种情况，使用grid布局可以轻松搞定这个问题。原创 2024-06-22 23:09:06 · 896 阅读 · 0 评论 -
css响应式布局左、右上、右中布局
【代码】css响应式布局左、右上、右中布局。原创 2024-05-03 15:54:26 · 513 阅读 · 0 评论 -
Js使用Promise实现阻塞任务
Promise异步编程原创 2024-03-29 17:24:24 · 1057 阅读 · 0 评论 -
flex弹性盒子平分布局
【代码】flex弹性盒子平分布局。原创 2024-03-14 00:02:38 · 1091 阅读 · 0 评论 -
flex弹性盒子实现左中右居中布局
【代码】flex弹性盒子实现左中右居中布局。原创 2024-03-13 18:09:44 · 1242 阅读 · 0 评论 -
avue-crud中el-select的使用
Avue的v2版本是一个基于element-ui低代码前端框架，Avue的v3是一个基于element-plus低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。原创 2024-02-05 10:07:44 · 1502 阅读 · 1 评论 -
input 上传多张图片前端界面js交互
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <link原创 2018-03-23 23:13:15 · 3053 阅读 · 2 评论 -
Vue父子组件、子父组件、非父子组件通信
1、父子组件传值通信，在子组件中使用props属性，静态或者动态传递父组件的变量值<template> <div id="app"> <div> <div style="display: inline-block;"> <div class="btn-div btn-bg">{{msg}}&l...原创 2019-10-09 23:58:04 · 261 阅读 · 2 评论 -
js时间格式化函数
1、将时间戳格式化成字符串 /** * @param now 时间戳 1567491849760 * @returns {string} yyyy-MM-dd dd:HH:mm */ const formatDate = (now) => { let nowTime=new Date(now); ...原创 2019-09-03 17:07:56 · 545 阅读 · 2 评论 -
初识Vue多路由
Vue当下最火爆的前端框架之一，之前一直在使用jquery,最近一直听到Jquery已经过时的声音，为了跟上步伐，最近抽空要恶补一番Vue的知识。本文简单学习一下Vue的路由，Vue.js 路由允许我们通过不同的 URL 访问不同的内容，通过 Vue.js 可以实现多视图的单页Web应用（SPA）。 1、学习成果及项目结构 单页效果webpack项目目录...原创 2019-07-24 16:04:04 · 584 阅读 · 2 评论 -
Vue全局组件与局部组件
全局注册组件，组件在注册之后可以用在任何新创建的 Vue 根实例的模板中使用，局部注册的组件只能在指定父组件下使用，作用域小。<template> <div id="app"> <div> <div>{{msg}}</div> <child-one></child-one>...原创 2019-09-27 17:31:01 · 246 阅读 · 2 评论 -
Flex布局实现div内部子元素垂直居中
1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex ...原创 2019-01-04 10:56:25 · 18914 阅读 · 0 评论 -
input复选checkbox多选删除
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <link r原创 2018-03-18 23:59:25 · 2367 阅读 · 2 评论 -
select实现三级联动
一、先练习一下select option标签的使用<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0原创 2018-03-17 11:50:44 · 6998 阅读 · 1 评论 -
前端jquery实现商城sku效果
商城项目的两大核心，商品sku和订单，其中sku的实现还是有点复杂，尤其是在处理元素的监听事件，通过规格属性的id组合获取单品商品信息。一般思路是现获取sku的规格和属性，动态创建dom元素，然后请求后台接口数据获取单品，此文已本地json数据模拟全sku的情况，如果非全码的情况下，罗机处理非常复杂，还需考虑商品单品不存时候，元素置灰，不可点击得人情况:1、css...原创 2018-08-28 16:34:36 · 5178 阅读 · 2 评论 -
vue路由传参
vue路由跳转页面传参1、使用路由url携带参数传递 主页Main.vue模板脚本<template> <div class="hello"> <h1>{{msg}}</h1> <h2>Essential Links</h2> <div @click="toSlotComo()">Go to SlotTest</div> </div></t...原创 2020-08-21 23:06:06 · 192 阅读 · 2 评论 -
npm安装yarn
Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载， 同时利用并行下载以最大化资源利用率，安装速度快。有时候使用npm构建项目，拉取第三方库的时候很慢不稳定，而yarn就是解决这一痛点的利器。使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。Yarn 会通过算法校验每个安装包的完整性。原创 2024-01-23 13:06:00 · 9664 阅读 · 0 评论 -
node多版本管理工具nvm安装
点击可执行程序下一步即可，中间有两个选择目录的地方需要注意。这里安装15.14.0和18.16.0两个版本用于测试。官网下载适合自己电脑操作系统的可执行文件。查看node版本可以看到当前的版本为18.16.0。这两个路径都可以根据自己的实际需要选择。通过nvm use可以随意切换本地node版本环境。如图所示表示安装成功。原创 2024-01-25 16:29:46 · 810 阅读 · 0 评论