- 博客(21)
- 收藏
- 关注
原创 组件开发的环境准备: nodejs安装,npm镜像源的修改,pnpm包管理器的安装(全局安装),基于pnpm创建脚手架项目
1. Vue - Official (Vue官方插件,强烈推荐,默认的xxx.vue文件是没有语法高亮的,都是一片白色,不利于阅读,安装这个插件以后,语法就会高亮)这个文件,把App.vue这个文件的内容全部删掉,输入v3(vbase-3-setup),按回车(把画圈的地方删掉)Node.js安装的时候一直按next就可以了,直到最后按finish就完成安装了,效果如下图。【设置淘宝镜像源(默认镜像源是国外网址,国内访问经常失败,所以要设置淘宝镜像源)】这样基本就完成了,只需要再输入内容就可以运行了。
2024-12-08 15:50:10
686
原创 前端框架Vue3项目实战(基于Vue3实现一个小相册)
console.log(`用户点击第${img.index}张按钮,显示第${img.index}张照片`);console.log(`用户点击第${img.index}张按钮,显示第${img.index}张照片`);console.log(`用户点击第${img.index}张按钮,显示第${img.index}张照片`);<img src = "./img_src/logo1.png" class="img" alt="图片加载失败">/* 忽略前面盒子浮动带来的影响,解决父盒高度塌陷问题 */
2024-11-30 16:26:57
1562
1
原创 JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
第4张</p><p class="button" id="p4">第4张</p><p class="button" id="p2">第2张</p><p class="button" id="p2">第2张</p><p class="button" id="p2">第2张</p><p class="button" id="p2">第2张
2024-11-24 17:03:45
751
原创 JS的DOM事件监听 (鼠标事件,键盘事件,表单事件)
/ 阻止表单的“默认提交行为” (即:将数据发送到表单的 action 属性指定的 URL,并在那里进行处理))邮箱: <input type="email" id="email" value="在此处输入你的邮箱"> <br>姓名: <input type="text" id="name" value="在此处输入你的姓名"> <br>// 注意: selectionEnd 属性返回的是选择范围的结束位置的下一个字符的索引。/* 增加浏览器页面高度以便滚动 */
2024-11-10 18:21:47
738
1
原创 CSS的综合应用例子(网页制作)
就会不断执行循环体中的代码。// 当expression的值不等于任何case的值时执行的代码块。// 当expression的值等于value1时执行的代码块。// 当expression的值等于value2时执行的代码块。当匹配成功时,就执行对应的代码块,直到遇到。// 当condition1为真时执行的代码块。// 当condition2为真时执行的代码块。// 当以上条件都不满足时执行的代码块。的值,否则可能会导致无限循环。// 当条件为真时执行的代码块。// 当条件为假时执行的代码块。
2024-11-10 13:17:33
1299
原创 JS语法基础(变量,数据类型,运算符,程序控制语句)
这些程序控制语句是 JavaScript 编程中非常重要的部分,它们能够帮助程序员根据具体的业务需求灵活地控制程序的执行流程。// 当expression的值不等于任何case的值时执行的代码块。// 当expression的值等于value1时执行的代码块。// 当expression的值等于value2时执行的代码块。后面的代码,即不会输出 5,但循环会继续进行,输出其他数字。// 当condition1为真时执行的代码块。// 当条件为真时执行的代码块。// 当条件为假时执行的代码块。
2024-10-29 17:45:45
517
原创 盒模型的属性、大小、定位
1. 标准盒模型:总宽度 = 内容宽度(width)+ 左右内边距(padding-left + padding-right)+ 左右边框宽度(border-left-width + border-right-width)+ 左右外边距(margin-left + margin-right);1. position :用于设置元素的定位方式,可选值有 static (默认值,无特殊定位)、 relative (相对定位)、 absolute (绝对定位)、 fixed (固定定位)。
2024-10-19 16:25:25
945
原创 CSS盒子的绝对定位(排队例子)
在 CSS 中,绝对定位(absolute)可以将元素从正常的文档流中移除,并相对于其最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,则相对于文档的初始包含块进行定位。在这个例子中, .box 元素将相对于其最近的已定位祖先元素(如果没有,则相对于文档的初始包含块)向上移动 20 像素,向左移动 30 像素。2. 精确布局:当需要对元素进行非常精确的定位,且不希望受到其他元素的影响时,可以使用绝对定位。1. 绝对定位的元素脱离正常文档流,不占据空间,其他元素会忽略它的存在进行布局。
2024-10-19 16:11:48
534
原创 CSS盒子的相对定位和固定定位
2. 作为绝对定位的参考元素:如果一个元素设置为绝对定位,并且希望以另一个元素为参考进行定位,那么可以将参考元素设置为相对定位。这样,绝对定位的元素就会相对于相对定位的元素进行定位。相对定位的元素,会在原先的位置留坑,即元素还是在原来的位置,只不过渲染在新的地方,不会对页面其他元素产生任何影响。在 CSS 中,相对定位(relative)是一种定位方式,它允许你相对于元素在正常文档流中的位置进行偏移。1. 微调元素位置:当你需要对元素进行轻微的位置调整,而又不想破坏文档流的布局时,可以使用相对定位。
2024-10-19 15:40:02
735
原创 CSS盒子模型
盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。<img src="./风景.jpg" id="img1">可以同时操作,代码:border:10px blue solid;(注:border-radius分别控制盒子四个角弧度是按。可以同时控制四个边距(padding:10px)清除内容周围的区域,内边距是透明的。清除边框外的区域,外边距是透明的。padding(内边距)margin(外边距)content(内容)border(边框)的厚度,颜色,样式)
2024-10-12 15:29:02
496
原创 CSS的字体、文本和图像样式和例子
靠右对齐,上划线,单词首大写字母</p><img src="./风景.jpg" id="img1"><p id="p1">靠左对齐,下划线,大写字母</p><p id="p2">居中对齐,删除线,小写字母
2024-10-12 14:24:20
713
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人