- 博客(70)
- 收藏
- 关注
RSS订阅原创 Vue3.x 全家桶 | 06 - Vue 的指令 : v-text 和 v-html
特别是当将用户提供的内容直接插入到页面中时，可能会存在跨站脚本攻击（XSS）的风险。确保插入的 HTML 内容是安全的，或者对内容进行适当的过滤和转义，以防止安全问题。如果我们展示的内容本身就是 HTML，Vue 并不会对其进行特殊的解析，如果我们希望这个内容可以被 Vue 解析出来，那么就可以使用。取决于你要处理的内容是纯文本还是包含 HTML 标签，并且要考虑到潜在的安全风险。的值直接插入到元素的文本内容中，而插值表达式直接就是放在文本内容中的。指令用于设置元素的文本内容，与插值表达式不同的是。
2024-03-10 15:23:56
500
原创 Vue3.x 全家桶 | 05 - Vue 的指令 : v-once
在 Vue 中，指令（Directives）也是模板语法的一部分，指令是一种特殊的 token，它带有。指令所在的元素及其子元素将不再响应数据的变化，也不会重新执行组件的生命周期钩子函数。Vue 提供了许多内置的指令，每个指令都有特定的功能，常用的指令包括了；可以看到控制输出的内容，修改成功了，但是并没有渲染成功，也就是只渲染了一次。的主要场景是在一些静态内容上，这样可以避免不必要的重新渲染，提高性能。与插值语法不同的是 Vue 中的指令都是作用在元素的属性上面的，可以修改成功，如果在元素的属性位置加上。
2024-03-10 15:23:04
649
原创 HTML + CSS 连载 | 65 - 考拉首页商品布局（上）
但是这样做有两个问题，第一个问题是可以看到整个 container 是往右边偏移的；可以看到最后一个 item 是自动跳到第二行显示了，此时每个 item 所占据的宽度为 220px 加上 border-right，总的宽度是大于 1100px 的，所以会自动换行。另外使用这种实现思路还需要做精准的计算，需要添加嵌套以及给每个 item 添加边框；设置每个 item 的样式，每个 item 的宽度为 220px，高度为 168px。，该 div 的宽度为 1100px，通过。
2024-03-08 23:10:32
720
原创 HTML + CSS 连载 | 64 - 京东首页商品布局（下）
当前所有的 item 是竖直排列的，因为所有的 item 都是 div 元素，默认 div 是块级元素会独占一行，要实现水平排列可以通过设置浮动来实现，先给。中同样的问题，即最后两个 item 会自动的移动的第二行排列，主要原因就是由于总的宽度即所有盒子自身的宽度加上右外边距的宽度超过了外层盒子。当前 item 还是竖直排列的，并且 item 之间不好区分，可以接着给。左右两边的 item 的宽度一样，但是高度不一样，左边两个。中的第三种解决方案，即设置一个负的外边距。的设置样式，包括高度以及背景颜色，
2024-03-08 23:10:01
660
原创 HTML + CSS 连载 | 63 - 京东首页商品布局（上）
刷新页面，所有的 item 全部在一行中显示了：如果有更多 item：</</</</</</</</</</</刷新页面，由于宽度的限制，每一行都会只有四个；这样也可以全部排满：但是使用伪元素的方式有可能对一些其他版本的浏览器存在兼容性的问题。我们可以给每一行的第五个元素加入一个特殊的 class</</</</</</</</</</</刷新浏览器：这样就可以实现需求的同时解决兼容性的问题。除了上面对每行最后一个元素添加特殊的 class 这种方式外，还有另一种解决方案；我们可以增加。
2024-03-07 18:15:40
971
原创 HTML + CSS 连载 | 62 - 分页实现
在选中和 hover 状态时背景颜色会变为其他颜色，字体颜色变为白色，我们可以给其中一个。首先将第1~10页这样一个结构搭建出来，每1页都是一个。全部左浮动可以消除行内级元素的间隙，我们可以通过。元素本身自带的一些样式进行重置，包括。浮动常用的场景，用来解决行内级元素、与原样式相比较，我们这里还缺少一个。至此，整个分页的效果就已经实现了！接下来我们就是用浮动实现分页。至此基本的布局结构已经实现。
2024-03-07 18:15:10
841
原创 HTML + CSS 连载 | 61 - 行内元素的间隙处理
元素之间的空隙，这是因为行内级元素默认是基于其父元素的字体大小进行布局的，而如果将父元素的字体大小设置为0，就会导致子元素也没有了基准字体大小，从而消除了它们之间的空隙。通过给子元素设置统一方向的浮动就可以去除空隙，并且可以通过外边距自由的控制空隙的大小。元素之间是存在一定的空隙的，实际上这个空隙是由于在编写 HTML 中的。之间的空隙确实被去除掉了，但是这种方式不太合适，降低了代码的可阅读性。元素之间的空隙，但是这个空隙并不可控，我们可以通过浮动的方式来消除。元素之间的空隙可以设置。
2024-03-06 19:28:53
348
原创 HTML + CSS 连载 | 60 - 元素浮动规则（下）
设置了左浮动之后就实现了图文环绕，因为文字会被浮动元素推出去，当然设置右浮动也是可以的，要注意的是浮动只能向左浮动或者向右浮动，不会向上浮动或者向下浮动，要实现向上或者向下要调整图片的位置。的左边界，但是内容没有脱离文本流，还占据着位置，就会把行内级元素的内容推出，包括。设置固定定位后，就会完全脱离标准流，文本也会脱离文本流，所以看到的现象就是。元素内容以及块级元素的文字内容都会被浮动元素推出。设置左浮动后，脱离标准流并且紧贴包含块也就是。层叠，行内级的内容将会被浮动元素推出。
2024-03-06 19:28:22
689
原创 HTML + CSS 连载 | 59 - 元素浮动规则（上）
浮动的元素可以脱离标准文档流,摆脱块级元素和行内元素的限制,但是没有脱离文本流,因此仍然会占据位置,其他的文本内容会按照顺序继续排列。虽然脱离了标准流，但是并没有出现层叠的现象，接着我们注释全部左浮动的设置，单独给。如果一个元素浮动而另一个元素已经在那个位置了，后面浮动的元素将会紧贴着前一个浮动元素，也就是左浮动找左浮动，右浮动找右浮动。的总的宽度超过了包含块的宽度，就会自动向下一行移动，直到有充足的空间显示为止，因此可以看到。中的内容会占据位置，也就是并没有脱离文本流，所以。当全部设置了左浮动之后。
2024-03-05 11:53:38
536
原创 HTML + CSS 连载 | 58 - CSS 元素浮动
属性最初只用于在一段文本内浮动图像，实现文字环绕的效果，由于早期的 CSS 标准中并没有提供好的。后会朝左或者朝右移动，直到自己的边界紧贴着包含块（一般是指父元素）或者其他浮动元素的。如果元素是向左（右）浮动，浮动元素的左（右）边界不能超过包含块的左（右）边界。，由于定位元素也是脱离标准流的，定位元素会层叠在浮动元素上面。上，这就是定位和浮动的区别，浮动是会紧贴着。与绝对定位一样，浮动也会让元素脱离标准流。的定位并再取消浮动的注释，同时给。拷贝上一个 HTML 文件，并给。放置，允许文本和内联元素环绕它。
2024-03-05 11:12:23
948
原创 HTML + CSS 连载 | 57 - 层叠 z-index
属性用来设置定位元素的层叠顺序，且只对定位元素有效，取值可以为正整数、负整数或者 0，相当于坐标轴上的 z 轴。只显示了盒子3，说明已经出现了层叠，且盒子 3 是在最上面的一个；设置了固定定位，会跳出标准流，它们三个在同一个层级，优先相互比较。具体值时候的效果是一致的，叠加顺序为元素出现的顺序；从自己以及祖先元素中，找出最临近的2个定位。根本就没有比较关系，不是处于同一个层级的，为-1就是最小的一个，所以在最底下一层。情况下，叠加的顺序就是元素出现的顺序，即交给浏览器来处理；是最后编写的，所以在最上面。
2024-03-05 11:11:52
220
原创 HTML + CSS 连载 | 56 - 粘性定位
的使用场景非常广泛，使用粘性定位的需求大概是这样的：像某电商网站的标题一样一开始是不固定，往下滚到到表头快要消失的时候再固定。可以看到表头被固定在视口顶端的位置，想要实现表头一开始不固定，滚到到表头快要消失的时候在固定的效果可以通过设置。一开始导航栏会随着页面滚动，当导航栏到达页面顶端时会固定在那里，这就是固定定位和相对定位结合的效果。的参照对象是离它最近的一个拥有滚动机制的祖先元素，即便整个祖先不是最近的真实的滚动祖先。粘性定位和相对行为的特点基本一致，不同的是粘性定位可以在元素到达某个位置时将其固定。
2024-03-04 19:27:47
912
原创 HTML + CSS 连载 | 55 - 网易云音乐 ITEM（下）
原样式中图标在左上角的位置，我们可以使用子绝父相，给。当鼠标悬浮在文字上时文字会出现下划线，因此需要设置。原样式中封面与描述信息有一定的外间距，可以在。这样就可以将图标固定在左上角的位置了。底部描述信息是一个超链接，我们需要将。元素本身自带了一些样式，我们需要对。父元素设置相对定位，给图标元素。接着在封面图元素下面增加一个。值，除了上面两个还有一个。中设置一行和多行省略的情况。
2024-03-04 19:27:10
614
原创 HTML + CSS 连载 | 54 - 网易云音乐 ITEM（中）
在设置耳机图标和播放图时有很多重复的 CSS 代码，这两个图标是来自同一张精灵图，因此我们可以进行抽取代码。设置播放图标的宽高及在图片中的位置，播放图标具体的摆放位置通过绝对定位来实现，位置参照对象是定位父元素。的宽度由内容决定，导致没有占据整行，因此图片没有完全显示。可以看到背景没有整行显示，这是因为设置了定位和偏移之后。在之后的代码中想要直接使用这两个图标，直接添加相关的。添加同样的背景以及背景图片位置，需要注意的是。封面底部的右边还有一个播放量的图标，在。
2024-03-03 21:09:21
855
原创 HTML + CSS 连载 | 53 - 网易云音乐 ITEM（上）
该例中耳机图标、播放量以及播放图标都是盖在图片上的，这里需要通过相对定位和绝对定位来处理；绝对定位是相对于父级定位元素进行偏移，是脱离标准流的。网易云音乐首页的 item 基本结构是由上下两部分组成的，上半部分为封面、背景以及播放量等信息，下半部分为描述信息，可以通过一个。盒子没有设置高度，宽度会自动占满父元素的整行，高度是由里面的。的高度都变成了 140px，图片就占据了整个盒子的高度。原样式中的背景是通过给一个超链接设置背景来实现的。的高度，底部还有一点点大约 5px 的高度。
2024-03-03 21:08:21
1230
原创 Vue3.x 全家桶 | 04 - Vue 的 Mustache 语法
在 Vue 的开发中大多数情况下都是使用基于 HTML 的模板语法，在模板中允许开发者以声明式的方式将 DOM 和底层组件实例的数据绑定在一起，Vue 的底层会将模板编译成虚拟 DOM 渲染函数。前面通过七篇文章我们已经了解 Vue 中的基本语法以及核心的 Options API，在此基础上我们将会深入的了解 Vue 中的语法以及指令和其他的 API 的使用。是一个对象类型，这个对象的每个属性都是一个个的函数，比如在计数器的案例中我们就在。会在自己的上层作用域中查找，找到的就是 script 中的。
2024-03-02 12:29:32
713
原创 Vue3.x 全家桶 | 03 - Vue 的 Options API
在前面的文章中，我们都是把 HTML 结构放在 属性中；在 Vue 的语法中 就是用于定义组件模板的选项，描述组件的结构和布局。我们可以像前面的文章一样把 HTML 代码放在 方法的参数对象的 属性中，作为 的属性值： 选项声明的 HTML 结构会完全替换掉 中的内容，我们可以来给 中增加一些内容，创建一个 HTML 页面，内容如下：使用 LiverServer 打开 HTML 页面：在 HTML 中增加上述的 JS 代码，再次刷新页面可以看到 中原有的内容全部被 选项声明的 HTML
2024-03-02 12:27:05
1213
原创 Vue3.x 全家桶 | 02 - Vue 的特性
MVVM 架构的关键特点是数据绑定，即模型的变化会自动反映在视图上，用户对视图的操作也会影响到模型。的简称，是非常流行的软件架构模式，用于将用户界面的开发和业务逻辑的处理分离，使得代码更易于理解、维护和扩展。是 Vue 对象的属性之一，用于定义包含多个方法的对象。我们需要通过这两个按钮的点击来改变变量的值，因此我们可以在这两个 button 上绑定事件，绑定事件我们需要使用到 Vue 的。是一个特殊的人关键字，它指代当前执行的上下文中的对象，其值的具体取决于函数是如何被调用的，在 Vue 中。
2024-03-01 22:54:29
782
1
原创 Vue3.x 全家桶 | 01 - Vue Quickstart
方法所创建的元素的内容是写死的，但其实这部分内容可以保存到一个变量中来实现，Vue 中的变量可以通过。属性必须是一个函数，该函数返回一个对象，对象的属性名就是变量名，属性值就是变量的内容。只是一个对象的名字，我们可以给他一个其他的名字，也可以挂载到别的已存在的元素上。属性的值是一个函数，用于返回数据，这里返回的就是我们需要渲染的列表数据，而。属性值函数返回的是一个对象，可以在这个对象中定义多个变量（属性），而在。我们可以将全部的源码拷贝到一个本地的 vue.js 文件中，并在。
2024-03-01 22:51:19
1115
原创 HTML + CSS 连载 | 52 - 绝对定位元素的特点（下）
设置为auto的意思是交给浏览器来处理，原来在哪里现在还在哪里。如果width设置为auto对于行内非替换元素来说，width 会包裹内容对于块级元素来说，width 会包含块的宽度对于绝对定位元素来说，width 会包裹内容。
2024-02-29 16:06:43
367
原创 HTML + CSS 连载 | 51 - 绝对定位元素的特点（中）
在开发过程中我们要尽量不要让这种不确定性的代码出现，一定要写准确的代码，摆放位置由自己来决定，而不是让浏览器来决定。，也跟原来所在的位置有一点关系，具体摆放位置由浏览器来决定，可能会给左边多一点也可能会给右边多一点。此时绿色盒子已经是定位元素，我们就可以套用上面的公式了，定位参照对象。对于定位元素想要在它的包含块中居中，通过这样的方式来实现。自动分配的值为 300px，并且此时没有设置定位。都为 0，因此左右两个外边距相等，这就实现了居中。是块级元素，默认会占据整行，给绿色盒子。
2024-02-29 16:05:51
433
原创 HTML + CSS 连载 | 50 - 绝对定位元素的特点（上）
strong 做了定位元素，但是他的子元素依然是按照原来的标准流，并没有发生任何变化。作为一个行内元素是不能够设置宽高的。这是因为设置了绝对定位以后，当前 box 有一定的宽度和高度，设置 strong 为绝对定位。元素的特性，因此可以随意设置宽高并且宽高默认由内容决定。需要注意的是设置了绝对定位以后，并不是把元素变成。元素设置的宽和高生效了，原本。创建 HTML 页面，我们给。元素设置为绝对定位，给。可以看到在做了绝对定位后，类型，并且也不需要在做。当前绝对定位依赖于视口。
2023-11-01 00:16:50
105
原创 HTML + CSS 连载 | 49 - 子绝父相
此时box的偏移是相对 container 实现的，也就是说 container 最为一个父级定位元素，是 box 的偏移参考对象。在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位；此时strong是相对于 box 进行定位的，因为对于 strong 来说，box就是一个父级定位元素。绝对定位一般要和带有定位的父级搭配使用，因为是相对父级定位元素来偏移的，那么父级要用什么定位呢？子绝父相是大部分情况下的布局方式，但不是唯一的布局方式，子绝父绝也可以，视情况而定，如果把。定位，因为大多数场景都是。
2023-11-01 00:16:08
115
原创 HTML + CSS 连载 | 48 - 绝对定位
就是 position 不为 static 的元素，也就是 position 的值可以为 relative absolute fixed 元素。可以通过 left right top bottom 进行定位，定位的参照对象是最临近的。strong 最临近的的祖先的定位元素就是 html，但是 html 不是一个定位元素。当元素的position属性值设置为absolute时，则开启了元素的绝对定位。祖先元素，如果找不到这样的祖先元素，参照对象是视口。
2023-11-01 00:15:26
122
原创 HTML + CSS 连载 | 47 - 相对和固定定位练习
固定定位的使用场景非常多，比如各种页面中的左右侧边栏，都是固定的，也都是使用固定定位实现的，比如掘金首页的右侧目录和左下角的工具栏都是使用固定定位实现的。相对定位可以相对自身位置进行位置调整，并且不会脱离标准流，原先占据的位置会被保留，也就不会对其他元素的位置造成影响。可以看到这两个按钮被固定在右下角的位置，即使在包含滚动条的情况下，上下滑动滚动条的时候这两个按钮也会保持这个位置。首先创建 HTML 页面，将基本的结构搭建出来，并对公式中的数字进行字体样式的设置；接着就可以设置固定定位相关的样式了，使用。
2023-11-01 00:14:42
100
原创 HTML + CSS 连载 | 45 - 相对定位
其他元素的位置没有收到影响，只是相对于距离原来自己的位置进行了右移了 100px，也就是距离原来自己位置的左外边距为100px。可以看到中间盒子分别向右和向下移动了 100px，也就是说距原来位置的上外边距和左外边距的距离为 100px。设置位移量时参考的是元素原来的位置，比如我们可以设置元素距离原来左外边距为 100px，修改。接下来我们就可以对中间的盒子进行位置的调整，使用相对定位进行位置调整时，使用。四个位移属性进行定位，定位的参照对象是元素原来自己的位置，
2023-10-31 22:16:28
28
原创 HTML + CSS 连载 | 44 - 标准流和静态定位
元素的定位是允许从正常的标准流布局当中取出元素，并使他们具有不同的行为，例如放在另外一个元素上面实现层叠的效果，或者将元素始终保持在浏览器视窗内的同一位置比如侧边栏；如果我们希望一个元素可以跳出标准流（脱标），单独对某个元素进行定位，就可以通过 position 属性来实现。时，通常会影响标准流中其他元素的定位效果，不方便实现层叠的效果；的是指注释后，页面并没有任何变化，也就是说默认情况下就是标准流布局的，设置。属性的默认值，此时元素会按照标准流布局，的顺序摆放好，默认情况下，元素之间。
2023-10-31 22:15:57
38
原创 HTML + CSS 连载 | 43 - CSS Sprite
使用 CSS 精灵图可以极大地减少网页的 HTTP 请求次数，加快响应速度，减轻后端的压力，并且能够减少图片的总大小，也少了一些图片命名的困扰，只需要给一张图片命名就可以了。CSS Sprite 即 CSS 精灵图，是一种 CSS 图像合成技术，将各种小的图片合并到一张图片上，然后利用 CSS 的背景定位来显示对应的图片部分。可以看到 div 元素的 cursor 与 a 元素的 cursor 的值是一致的，当鼠标悬浮在 div 元素上时会变成一只小手。
2023-10-31 22:15:03
40
原创 HTML + CSS 连载 | 42 - 字体图标
在以后的开发中我们可以直接将 iconfont.css 文件通过 link 元素引入到 HTML 页面中，想要使用什么图标就可以直接通过添加 class 属性的方式来实现了。另外我们在每一次使用图标的时候都要去复制这个图标的编码，这非常的不方便，那么其实我们可以不使用字符实体的方式把字体图标展示出来。网站上提供了非常多的图标可供下载，使用时只需要将喜欢的图标添加到购物车，并从侧边栏打开购物车选择。字体可以设计成各种各样的形状，当然也可以直接将字体设置成图标来使用，这就是字体图标。
2023-10-31 22:13:38
194
原创 HTML + CSS 连载 | 41 - 网络字体
我们刚才使用的是 .ttf 后缀的字体文件，是 TrueType 类型字体，由于在开发中可能会出现某些浏览器不支持 .ttf 后缀类型的字体，因此我们还需要其他类型字体来解决兼容性的问题。使用 Web Fonts 首先要获取到要使用的个性化字体，可以是授权的收费字体或者是设计人员设计好的字体甚至是一些免费的字体，在部署静态资源时将选择的字体一起部署到静态服务器当中。当时系统本地的字体是有限的，我们也就无法设置更加个性化的字体，但是我们可以使用网络字体来实现这种个性化的需求。来生成各种不同后缀的字体。
2023-10-31 22:13:07
125
原创 HTML + CSS 连载 | 40 - border 图形
属性主要是用来给盒子添加边框的，但是在开发中我们也可以利用边框的一些特性来实现一些形状，比如一些页面中常用到的三角形等。可以看到我们已经实现了一个三角形，我们可以通过调整边框的宽度来实现大小不同的三角形。利用 border 或者 CSS 特性我们可以做出很多图形，可以通过。此时盒子所占据的宽度为 (100+30+30)px，我们需要设置。实现了三角形之后还可以通过。来查看更多的图形的实现。
2023-10-31 22:12:34
27
原创 HTML + CSS 连载 | 39 - Emmet 语法
在前端开发过程中，大部分的工作都是写 HTML、CSS 代码，手动编写的效率非常低，VSCode 内置了 Emmet 语法，在后缀为 .html 或者 .css 的文件中输入缩写后按住Tab键既会自动生成相应的代码。Emmet 语法除了支持 HTML 结构的编写，同样也支持 CSS 语法的编写，比如 CSS 中书写宽高时，就可以已通过 Emmet 语法的缩写形式。在生成元素的时候，是需要添加一些属性的，比如常见的 class 属性以及 id 属性，在使用 Emmet 语法的时候可以通过。
2023-10-31 22:12:02
28
原创 HTML + CSS 连载 | 38 - 否定伪类
x 是一个简单选择器，包括了元素选择器、通用选择器、属性选择器、类选择器、id 选择器 和伪类（除了否定伪类）。否定选择器:not()可以帮助用户定位不匹配该选择器的元素，实现匹配操作后的二次过滤。表示否定选择器，即排除或者过滤掉特定元素。前面介绍的选择器都是匹配操作，而唯独。便无法选中，但是如果元素类型是唯一的，我们可以使用。可以看到并没有选中我们想要的元素，那么如果我们使用。操作相反，它表示过滤操作，与JQuery中的。创建 HTML 页面，在该页面中使用。可以看到，当父元素中有多个子元素时，
2023-10-31 22:11:31
33
原创 HTML + CSS 连载 | 37 - 结构伪类
新设计的选择器，我们在前面的 HTML 表格中也是用到了结构伪类作为选择器来选择列表中的一些项，使用结构伪类我们就不用再去给列表中的项去单独添加。结构伪类在计数时会统计所有的子元素，即不是 li 的元素也会被计数，将第五个是 li 的元素样式变成红色。利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内。n 后面的数字可以看做起点，因为 n 是从 0 开始取值的，设置伪类的参数为。选择器选中第一个元素然后进行样式的修改，这种方式在之前的文章中使用较多。
2023-10-31 22:10:51
23
原创 HTML + CSS 连载 | 36 - select 下拉列表
下拉列表也是一种选择类型的元素，下拉列表可以节省网页的空间，默认状态下只显示一个选项，只有在点击下拉按钮的时候才会显示多个选项，比如下面这里选择地址的时候就是使用的下拉列表。可以将整个表单作为一个整体来进行操作；比如对整个表单的数据进行。默认只能选择其中一个选项，但是我们可以通过设置布尔属性。可以看到默认已经显示了两个选项，当然我们也可以通过。元素可以创建一个下拉列表，而下拉列表的选项则由。当然我们想要对表单进行重置或者提交还需要添加添加。使用 LiverServer 打开，可以看到。
2023-10-31 22:10:07
3325
1
原创 HTML + CSS 连载 | 35 - 单选、多选框和 textarea
input 元素可以实现单选框的效果，结合 lable 元素，只需要将 type 设置为 radio 就表示为单选框，但是同时需要设置单选框的文本，文本内容直接写在 input 元素的后面即可；来实现多选框，除了 type 属性外，多选框也需要设置 name 属性，对于同一类型的 checkbox，name 属性要保持一致。点击按钮，页面会发生跳转，可以从地址栏中看到我们向后端发送的数据内容，可以看到 value 属性的值就是我们向服务器发送的数据。
2023-10-31 22:09:55
966
原创 HTML + CSS 连载 | 34 - input 与 label 元素
label 元素中有一个 for 属性，通过这个属性 label 元素可以跟某个 input 绑定（通过 id），点击 label 就可以激活对应的 input 变成选中的状态，也就是说当使用鼠标点击用户这个文本的时候，就会激活对应的输入框。在实际开发中，input 元素常常和 label 元素结合使用，label 元素可以表示标题，充当 input 元素的解释信息。具体的显示效果与之前没有任何的区别，点击 lable 标题的时候同样也可以激活对应的 input 的输入框。
2023-10-31 22:09:39
238
原创 HTML + CSS 连载 | 33 - HTML 表单
除了这些属性值外，type 的属性值还包含了一些按钮相关的，如 submit、reset 等，设置 type 为这些值就可以让 input 元素变成一个按钮元素。type 类型不同时，展现的内容是不一样的，type 为 text 时是明文输入的，为 password 时输入的内容则是不可见的。布尔属性可以没有属性值，写上属性名就代表使用这个属性，如果要给布尔值设置属性，值就是属性名本身。可以看到单独使用和赋值使用的效果都是一样的，在开发中推荐使用布尔形式，就直接书写属性名就好了。
2023-10-31 22:09:28
27
原创 HTML + CSS 连载 | 32 - HTML 表格与结构伪类
接下来是列的合并，分别是第六行的第一二三四五六列合并、第十一行的第二三四五六列合并，以及第十二行的第二三四五六列合并；需求中有跨行合并的情况分别是，第二行的第一列与第三四五行的第一列合并，以及第七行的第一列与第八九十行的第一列合并，使用。表示结构伪类，选中子元素进行样式的设置，而 2n+2 表示对第一个子元素进行设置，n 是从 0 开始的。这个计划表中不仅包含了行合并和列合并，每行交替使用不同的背景色，这需要使用结构伪类来实现。我们可以使用结构伪类设置表主体每一行交替变化的背景色，可以看到行合并成功。
2023-10-31 22:09:16
31
原创 HTML + CSS 连载 | 31 - HTML 表格合并
在进行跨行单元格合并的时候，要先确定跨行的数量；最后再删除多余的行。接着确定跨行或者跨列的数量；最后再删除多余的行或者列。在进行单元格合并的时候，首先确定合并的是行还是列，其中。可以看到第三行和第四行的第三列已经合并到一起了。下进行合并的，在进行行合并的时候是在不同的。在进行行合并的时候也需要删除多余的。在进行列合并的时候，是在同一个。
2023-10-31 22:09:03
322
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人