板栗大王-优快云博客

原创 JS--DOM编程

DOM是一种与平台、语言无关的接口，允许程序动态地访问或更新HTML、XML的内容、结构和样式，且提供了一系列的函数和对象来实现增、删、改、查操作。通过class名来获取元素节点(若有多个相同class，返回含有多个节点的类数组对象)通过CSS选择器获取节点，返回NodeList对象(包含所有匹配给定选择器的节点)通过id名来获取元素节点(直接返回可操控的节点，而不是由节点构成的数组对象)通过标签名来获取元素节点(若有多个相同标签，返回含有多个节点的类数组对象)-缓存查询结果：避免重复查找。

2025-09-16 22:16:21 275

原创 CSS 弹性Flex布局：轻松实现灵活网页排版

首先，在HTML中找到你想要设置为Flex布局的元素（比如一个 <div> ），然后在CSS中给它加上 display: flex;：如果希望某个项目能自动占满剩余空间，或者根据内容比例分配空间，可以使用 flex-grow 属性。例如， flex-grow: 1 表示该项目会根据其他项目的大小，自动伸缩占满剩余空间。它就像一个神奇的盒子，里面的元素可以根据盒子的大小、空间自动调整自己的位置和尺寸，让页面在不同屏幕尺寸下都能保持美观、合理的布局。：项目之间均匀分布，容器两端留有一半间距。

2025-06-13 13:51:39 344 1

原创 CSS盒子的定位及浮动————一文带你理解与实操

固定定位(position:fixed)其实是绝对定位的子类别,一个设置了position:fixed的元素是相对于视窗固定的,就算页面文档发生了滚动,它也会一直待在相同的地方。2.父元素塌陷后，其下方的非浮动元素会向上移动，与浮动子元素产生覆盖或重叠现象，破坏原本的布局结构。定位的基本思想很简单，它允许用户通过属性定义将元素相对于其应该出现的位置进行位移，这个属性对于建立元素布局的定位机制起着重要作用。使用相对定位的盒子会相对于自身原本的位置,通过偏移指定的距离,到达新的位置。

2025-05-26 17:55:13 1594

原创 CSS----特殊选择器的理解和使用！内含宝藏例题~

不同浏览器对伪类的支持存在差异，部分火狐浏览器就无法支持 :active 属性，因此在开发过程中，建议主要以谷歌浏览器和Edge浏览器作为参考。像 ::before 和 ::after ，能在元素内容前后添加额外样式。熟练掌握它们，能够让网页的样式更加丰富多样，交互效果更加出色，为用户带来更好的浏览体验。在前端开发里，CSS是美化网页的魔法棒，其中伪类和伪元素选择器更是让网页“七十二变”的神奇道具。必须按照 :link 、 :visited 、 :hover 、 :active 的顺序书写。

2025-05-12 12:29:47 367

原创 CSS————基础常用样式！超级爆炸大干货~

作为单独的图像本身,它的很多属性可以直接在HTML中进行调整,但是通过CSS统一管理，不但可以更加精确地调整图像的各种属性,还可以实现很多特殊的效果。：设置表格的边框样式、宽度和颜色。border-collapse --- 设置表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。border-spacing --- 设置当表格边框独立时,行和单元格的边框在横向和纵向上的间距。empty-cells --- 设置当表格的单元格无内容时,是否显示该单元格的边框。

2025-05-12 00:41:34 1597

原创 CSS----复合选择器的理解与使用

例如,当用户对<h1 >标签下面的<span >标签进行样式设置时,就可以使用后代选择符进行相应的控制。“后代”选择符的写法就是把外层的标签写在前面,与“交集”选择符相对应的还有一种“并集”选择符,或者称为“集体声明”。其中,第一个选择符必须是标签选择符,第二个选择符必须是class类选择符或id选择符。-如上代码，集合中分别为<h1>,<h2>和<h3>标签选择符，“集体声明”将为多个标签设置同一样式。如上,外层的标签是<h1>,内层的标签是< span >,标签<span >就成为标签<hl>的后代。

2025-04-21 21:28:35 343

原创 CSS----基础之引用方式

CSS是一种格式化网页的标准方式,它扩展了HTML的功能,使网页设计者能够以更有效、更易维护的方式设置网页格式。- - . . . - - > 是为了避免旧版本不支持 CSS ，把里面的内容用注释的形式表示，这样对于不支持的 CSS 的浏览器，会自动略过此段内容。内部样式表是指样式表的定义处于HTML文件一个单独的区域,与HTML的内容和结构标签分离开来,从而实现对整个页面范围的内容、结构和表现进行统一的控制与管理。-- / * . . . * /为 CSS 的注释符号，主要用于注释 CSS 的设置值。

2025-04-15 00:04:36 368 3

原创 HTML----结构元素的基本运用与理解

和

2025-04-07 23:16:49 386

原创 HTML————表单标签的使用

表单是网页中用于收集用户输入信息的结构，由多种表单元素构成，实现用户与网站或应用程序的数据交互，用户输入数据后提交给服务器处理和存储，以实现各种功能。使用：在<select>标签中使用<option>标签来定义下拉列表中的选项。使用：通过for属性将标签与对应的表单元素关联起来，当用户点击标签时，会自动聚焦到对应的表单元素上。释义：用于创建各种输入字段，如文本框、密码框、单选按钮、复选框等，是最常用的表单元素之一。释义：表单的容器，用于包裹所有的表单元素，定义表单的开始和结束。- <select>标签。

2025-04-07 00:04:14 554 2

原创 HTML的表格标签以及表格的使用——一文带你理解与吃透

例如：<table border="1">,其中border="1"属性用于设置表格边框的宽度，取值为0时表格无边框。在网页开发中，HTML提供了一系列专门用于创建表格的标签，通过这些标签的组合，能够搭建出结构清晰、功能丰富的表格。-<td>:定义表格行中的一个单元格，用于放置具体的数据内容，文本、图片、链接等都能嵌入其中。在<table>标签内，通过多个<tr>标签来定义表格的行数。<tr>、<th>、<td>三个标签都有align属性，就是水平对齐方式设置。1、<ul>是识别无序列表标签的一个界限。

2025-03-25 21:26:20 1989 2

原创 HTML图像标签与超链接标签：从基础到实战应用！

图像可以让网页更加生动，而超链接则实现了页面之间的跳转和资源的连接。本文将以保姆级别的详细教程介绍HTML中的图像标签<img>和超链接标签<a>，并通过代码示例帮助您快速掌握它们的用法。本文章主要介绍图像标签和超链接的基本使用方法，外加网页内的书签链接的例题，文献参考web前端开发技术。超链接标签<a>用于创建链接，用户点击后可以跳转到其他页面或资源。href:指定连接的目标地址（可以是网页、文件、电子邮件地址等）。<img>标签用于在网页中嵌入图片，注意设置src和alt属性。

2025-03-05 19:37:05 497 3

2501_90906984的博客