- 博客(17)
- 收藏
- 关注
RSS订阅原创 Vue常用指令v-on，v-show，v-if，v-for
本文介绍了Vue.js的三个核心指令：事件监听(v-on)、条件渲染(v-show/v-if)和遍历渲染(v-for)。v-on用于监听DOM事件，支持标准写法(v-on:click)和简写形式(@click)，可监听键盘事件；v-show通过display控制元素显示，v-if则通过增删DOM节点；v-for用于循环渲染数据，支持数组、对象和数字遍历，可结合索引使用。每个指令都配有完整代码示例，展示了如何在实际项目中应用这些功能。
2025-10-28 14:21:17
224
原创 定时器和事件监听（轮播图）
本文介绍了JavaScript中的定时器、鼠标事件、键盘事件和表单事件的使用方法。定时器部分讲解了setTimeout()和setInterval()的用法及取消方法；鼠标事件列举了click、dblclick等常见事件及其监听方式；键盘事件介绍了keydown、keyup等事件处理；表单事件则包括submit、change等表单相关操作。最后还提供了一个自动轮播图实现的示例代码，展示了如何通过定时器实现图片自动切换效果。这些内容涵盖了前端开发中常用的事件处理和定时操作。
2025-09-24 17:13:00
407
原创 DOM的操作练习（用js修改CSS)
本文介绍了使用JavaScript进行DOM操作的示例，主要包括：1）通过getElementById获取元素并修改样式；2）HTML模板要求仅用JS代码完成表格内容填充和样式设置；3）完整代码展示了如何动态添加表格内容（表头单元格和普通单元格）并设置不同背景色，最后实现表格文字居中显示。重点演示了通过DOM API操作元素内容与样式的完整流程。
2025-09-24 14:43:28
173
原创 JavaScript中DOM的增删改查
摘要：本文介绍了JavaScript中DOM操作的增删改查方法，包括获取元素、修改内容/属性/样式、创建/添加节点、删除元素等。通过一个课堂练习示例，演示了如何将第一个hr元素改为黑色、移除第二个hr元素，并创建一个新的蓝色hr元素。完整代码展示了使用getElementById、createElement、setAttribute等方法实现DOM操作的具体步骤。
2025-09-16 15:44:15
210
原创 Flex弹性盒模型
就是通过给父盒添加flex属性，来控制子盒的位置排列方式。采用flex布局的父元素，称为flex容器，它的所有子元素自动称为容器成员，称为flex项目。——能灵活处理容器内子元素的布局，尤其是在容器尺寸和子元素数量和尺寸都不确定的情况下（比如电商网站增加新的商品展示)，但是只有IE11以上浏览器用户才支持。2.主轴与交叉轴：Flex容器有两根轴，主轴由flex-direction定义，交叉轴垂直于主轴。1.容器与项目：采用Flex布局的元素称为Flex容器，其内部的子元素称为Flex项目。
2025-06-05 00:01:36
438
原创 清除浮动解决高度塌陷问题
如果前方有左浮动盒子，浏览器会将该盒子下推到所有左浮动盒子的最底部。如果前方有右浮动盒子，浏览器会将该盒子下推到所有右浮动盒子的最底部。如果前方有浮动盒子，浏览器会将该盒子下推到浮动盒子的最底部。下图是添加了浮动样式的网页效果，出现了高度塌陷的问题，蓝绿色的父盒子不见了。继上一篇盒子的浮动存在高度塌陷的问题，可以清除浮动来解决这个问题。该盒子必须出现在所有左浮动和右浮动盒子的下方。该盒子必须出现在所有左浮动盒子的下方。该盒子必须出现在所有右浮动盒子的下方。如下图是未添加浮动样式的网页效果。
2025-06-04 23:07:24
321
原创 盒子的浮动
盒子浮动后，文档流后面的兄弟盒子会自动递补其位置其中、文本会非常敏感，将自动环绕浮动盒(浮动机制的设计初衷:不是为了给你做导航栏的，而是用来制作图文混排效果的页面)对于现代前端开发来说，这种特性反而成为一种副作用。2.父元素塌陷后，其下方的非浮动元素会向上移动，与浮动子元素产生覆盖或重叠现象，破坏原本的布局结构。1. 当子元素设置浮动后脱离文档流，父元素无法感知子元素的高度，导致自身高度计算为0。右浮动：第一个设置右浮动的盒子浮至浮层，其它设置右浮动的盒子紧跟其后，从右到左排列，直到放不下才换行。
2025-05-27 00:11:33
926
原创 盒子的定位
top, right, bottom, left控制最终位置。- 元素不再占据原来的空间，后续元素会填补其位置。利用绝对定位做出下图网页效果。
2025-05-26 23:45:07
283
原创 CSS选择器的复合
相邻兄弟选择器 —— 选择紧跟E元素后的F元素，用+隔开，选择相邻的第一个兄弟元素，只能向下选择。通用兄弟选择器 —— 选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择。子代选择器 —— 选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>隔开。后代选择器 —— 选择所有被E元素包含的F元素，中间用空格隔开。概念：多个选择器并列写在一起，并列选中多个元素！注意：多个基本选择器之间不能有空格，直接相连。概念：同时符合所有选择器的元素会被选中！注意：选择器之间用逗号隔开。
2025-04-20 22:56:22
240
原创 课堂总结：CSS引入方式与选择器优先级
在没有优先级存在的情况下，样式配置遵循后来者居上原则（层叠）样式配置优先级：行内样式>id选择器>类选择器>标签选择器。单独写在.css文件中，通过<link>标签引入。直接写在元素style属性内，用起来比较麻烦。写在<head>标签中的<style>标签内。2.内部样式表style标签。一、CSS的三种引入方式。
2025-04-17 22:42:36
461
原创 用HTML设计一个简易的校园框架
在实际开发中，可以添加`name`属性用于表单提交：`<input type="text" name="username">`，还可以添加placeholder作为提示：`<input type="text" placeholder="请输入姓名">`
2025-04-08 21:08:31
1068
原创 表格的创建
可以用table>tr*n>td*n+Enter键快速生成多个标签，如图。border可添加边框，height、width可设置表格的高和宽。在<tr>中添加align=“center"属性，可使表格内字体居中。
2025-03-23 22:55:07
282
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人