前端开发
-
一，盒子模型 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（）、content（内容）。会发现margin、border、padding是，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。 内容的宽度和高度 1，属性：width，height 2，作用：利用 width 和 height 默认设置的是内容区域的宽度和高度 3，常见取
2024-11-22 -
性能优化是前端开发中非常重要的一环，它直接影响到开发效率、用户体验和应用的整体表现。性能优化主要可以从以下几个方面入手： 1. 构建性能 构建性能是指在开发阶段的构建性能，而不是生产环境的构建性能。优化的目标是降低从打包开始到代码效果呈现所经过的时间。构建性能会影响开发效率，构建性能越高，开发过程中时间的浪费越少。 优化策略 代码分割（Code Splitting）：将代码拆分成多个小块，按需加载，减少初始加载时间。缓存优化：利用 Webpack 的缓存机制，避免不必要的重新编译。使用更高效的
2024-11-22 -
今天做了个例子： div 的滚动条问题： 两种方法： 一、 复制代码代码如下: <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢，否则不成的 不过在不超出时，会有下面的滚动条，所以不是最好的选择 二、 复制代码代码如下:<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>记住宽和高一
2024-11-22 -
其实，大致的过程是先构建 DOM 和 CSSOM 树； 因此，我们需要确保尽快 ( 为页面优化留了口子 ) 将 HTML 和 CSS 都提供给浏览器。 → DOM 由 HTML 文件构建 DOM 树的过程大致为： 字节 → 字符 → 令牌 ( token ) → 节点 → DOM 从一个具体的例子细细说来，假设 HTML 代码为： <!DOCTYPE html> <html> <meta charset="utf-8"> <link href="style.css" rel="s
2024-11-22 -
一、什么是Vue Router？ Vue Router 是Vue.js 官方提供的路由管理器。它和 Vue.js 核心深度集成，可以方便地在 Vue.js 应用中使用路由功能，支持基于 HTML5 History API 的单页应用 (SPA) 以及传统的多页应用程序 (MPA)。 使用 Vue Router 可以实现在单页应用中切换页面而不刷新页面，同时还支持路由参数、路由组件、嵌套路由等高级功能，方便开发者构建复杂的前端应用。 二、安装 使用npm安装 npm install vue-rou
2024-11-22 -
解析markdown文档并且代码高亮 前言： 安装如下包： npm i marked npm i highlight.js [marked 官方文档]() [highlight 官方文档]() 1、使用说明 // Create reference instance import { marked } from 'marked'; // Set options // `highlight` example uses https://highlightjs.org marked.setOptio
2024-11-22 -
当我们初始化完数据后，需要更新数据时，虽然请求成功，获取到新的数据。但是echarts的图表没有根据数据更新而更新，原因是数据更新了，但echarts还是初始化时的那个。 我们可以在请求成功后，重新初始化echarts。这样图表就能根据数据进行变化了。 <div id="first-line-left" style="height: 220px;width: 500px"> </div> <div class="first
2024-11-22 -
1.登录页面 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" width="400" height="400" bgcolor="pink" cellspacing="0"> <thead> <tr> <th colspan="2"align="center">京东会员<
2024-11-22 -
第一种 $.modal.openOptions({ title: '全部任务', url: "/ideabank/task/taskAll?type=2", width: "1200", height: "500", showButtonPanel: false, btn: ['关闭'], yes: function(index, layero){ $.modal.close(index);//使用layer.close(index);
2024-11-22 -
媒体标签中，如何实现自动播放？ 一、audio标签的自动播放 1.实现 autoplay 可以不更改浏览器设置，但必须是 具有muted 【静音属性】 二、video 标签实现视频自动播放 1.更改 Autoplay policy 选项为：no user gesture is required 2.给 video 标签添加 autoplay 属性。 便可以实现。 有问题，留言。 有意见请批评。
2024-11-22