- 博客(86)
- 收藏
- 关注
RSS订阅原创 v-show v-if v-bind指令 图片切换案例
用v-show 根据索引的值来进行布偶判断，让图片，在索引不等于0的时候进行切换，小于数组数一位的时候进行停止切换。绑定src属性：用v-bind 指令 在src属性中，v-bind不写出来，用 ：号。在script写方法，用this调出索引的数据，进行减法，加法。是通过操作元素本身来显示，也是操作布尔元素来进行判断。接着在div里添加点击事件，调用方法。操作显示状态，通过操作样式来实现。定义数组图片 ：imgArr。添加图片索引：index。
2023-02-04 22:05:07
648
原创 循环语句 for循环 用for 打印1-100的偶数和 退出循环 for循环嵌套 打印五行五列的小星星 打印倒三角星星 99乘法表
退出循环for循环嵌套打印五行五列的小星星打印倒三角星星99乘法表
2023-02-02 17:39:02
365
原创 数据类型 boolean 未定义类型undefined 数据类型 null
数据类型 boolean未定义类型undefined数据类型 null
2023-01-31 23:31:52
163
原创 js变量的本质 变量的本质 变量名规范 let和var的区别 为什么不使用var 变量拓展 js数组的使用
存储的信息在不需要之后，就会被自动废弃掉。goods 之类就是负责存储的盒子名字。
2023-01-31 19:42:57
55
原创 美化表单元素 新的伪类 1. focus 输入框输入信息时，颜色状态变化 2. checked 常见用法 文本框边缘到内容的距离：text-indent 4. 控制单选和多选的样式
一般我们在设置输入框、按钮的时候，如果没有设置聚焦的样式，浏览器会默认自带设置。设置textarea是否允许调整尺寸。单选或多选框被选中的样式。
2023-01-29 22:25:23
124
原创 背景图片大小设置 解决背景图多张铺满盒子 背景图和背景颜色混用
如果背景图没有占完屏幕的时候，还留有白边可以通过 background-color:;来把颜色设置成与背景图一致的颜色。top center 等等。visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。这个表示宽高都占了图片的百分百，可以把图片完整的展示到盒子上。雪碧图就是把图标集中到一张图里，方便浏览器快速读取、渲染。也可以通过color来改变背景图上文字的颜色。但预设值不太好，不一定可以把图片完整显示出来。要使用图标的时候，通过代码截取出来。背景图属于css的概念。
2023-01-29 20:56:47
2877
原创 居中总结 行盒（行块盒）水平居中 常规流块盒水平居中 绝对定位元素的水平居中 单行文本的垂直居中 行块盒或块盒内多行文本的垂直居中 绝对定位的垂直居中
居中：盒子在其包含块中居中。
2023-01-28 21:33:30
92
原创 浏览器兼容性 问题产生原因 厂商前缀 滚动条 css hack 渐近增强 和 优雅降级 caniuse
下列是厂商前缀，有些低版本的浏览器，可能无法识别一些代码，加上厂商前缀就可以解决。书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的代码。书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式。实际上，在开发中使用自定义的滚动条，往往是使用div+css+JS实现的。设置两张图，一张图是大图、另一张是小图，px是图的像素点。根据不同的浏览器（主要针对IE），设置不同的样式和元素。当遇到无法识别的代码时，直接略过。2. 多个背景图中选一个作为背景。
2023-01-28 18:52:27
414
原创 行盒的垂直对齐 多个行盒垂直方向上的对齐 图片的底部白边
图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。给没有对齐元素设置vertical-align。对于原理不清楚，不影响做项目。
2023-01-27 22:39:49
63
原创 布局 多栏布局 等高 元素书写顺序 后台页面的布局
越重要的代码要靠前写，因为浏览器是从上往下读取的，但我们写的代码又是显示越后面的内容进行显示。
2023-01-27 21:35:21
197
原创 P49 BFC 块级格式化上下文 块级格式化上下文 BFC渲染区域: 创建BFC的元素，它的自动高度需要计算浮动元素. 高度塌陷例子
在这段代码里父元素div的背景色没有显示出来，原因是高度塌陷了，因为div没有设置宽高值，item设置了flost；如果去掉flost 元素就不能排列成行，所以这个时候要加上clearfix::after。创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部。它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。意味着，元素创建的BFC区域 覆盖了网页中所有的元素。但overflow: visible；不同的BFC区域，它们进行渲染时互不干扰。根元素 : 整个网页都属于根元素。
2023-01-27 16:48:23
445
原创 web字体和图标 web字体 字体图标
用户电脑上没有安装相应字体，强制让用户下载该字体（这个过程中，用户察觉不到）使用@font-face指令制作一个新字体。在我的项目里查看图标。
2023-01-27 15:17:35
1032
原创 css@规则 @import @charset “utf-8“；
告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行。导入另外一个css文件，这样html页只需要写一个css导入。就像这样，在我们要写的css里导入重置样式的css;@规则、@语句、CSS语句、CSS指令。@import “路径”;就可以看到网页引用了哪些。
2023-01-27 12:29:37
186
原创 表格元素 适用于后台元素
在css技术出现之前，网页通常使用表格布局。现在基本不用表格来做前台界面前台：面向用户后台：面向管理员。对界面要求不高，对功能性要求高。表格的代码过长与复杂，读取速度慢现在需要学，因为后台系统会需要。
2023-01-27 12:09:23
47
原创 表单元素 input元素 select元素 textarea元素 按钮元素 表单状态 配合表单元素的其他元素 label datalist form元素 fieldset元素
通常，会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值。type属性：reset、submit、button，默认值submit。readonly属性：布尔属性，意思是否只读，不会改变表单显示样式。disabled属性：布尔属性，是否禁用，会改变表单显示样式。该元素本身不会显示到页面，通常用于和普通文本框配合。button：要用按钮，建议使用这个元素。
2023-01-27 11:27:02
260
原创 iframe元素
资源，就可以复制他们视频的iframe到我们代码里，这样我们的。这个是B站up主的视频，如果我们的网站想要用别人网站的视频。一般用于自己网站的窗口跳转，B站有很多这样的。如下图所示：在网页里嵌入另一个网页。通常用于在网页中嵌入另一个页面。iframe 可替换元素。网站就可以显示出视频。
2023-01-26 22:14:13
47
原创 更多的选择器 更多伪类选择器 颜色选中时写法 被选中的第一行文字 选中第几个元素
如果a元素前面有p标签的内容，那么选中的是第四个a元素，因为要从p标签开始数。first-of-type，选中子元素中第一个指定类型的元素。圈住的地方意思是：li 的第一个子元素设置为红色。就像下图会忽视p元素，单看a元素的排列。选中指定的子元素中第几个某类型的元素。选中元素中的第一个字母。选中元素中第一行的文字。选中被用户框选的文字。
2023-01-26 19:42:45
763
原创 定位 position属性 相对定位 绝对定位 固定定位 定位下的居中 多个定位元素重叠时 补充
当子元素设置绝对定位，在子元素内设置left的值，父元素的包含块如果没有定位元素则不能包含它了，它会去找到祖先的父元素看有没有定位元素，如果有，它就会像祖先元素靠近，就如下图所示：下图的祖先元素设置了定位，所以子元素的值会靠近这里。比如一开始是绿色的框框在前面，显示在前面的，如果想要把底下红色的圆圈放到前面，可以对红色圆圈设置z-index。一个元素，只要position的取值不是static，认为该元素是一个定位元素。z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖。
2023-01-26 15:11:02
1323
原创 浮动 应用场景 浮动的基本特点 高度坍塌 解决浮动时盒子冲突问题
一般用类名 ::after 方法，调用item下面的normal（自定义名字），将normal设置成空的，在设置clear：both 让它可以显示在浮动元素的下面。想要设置图片环绕的效果，需要对图片的外边距进行设置，而不是p的外边距，因为p标签的外边距会把下边所有的文章都进行了移动。高度坍塌是指在设置浮动之后，背景的宽度不会被撑大，背景忽略了浮动的盒子内容，但取消浮动之后，背景又被撑开了。因为浮动盒子脱离了常规流盒子，导致高度坍塌，但这是在自动高度的前提下。：常规流盒子，在计算时，不会考虑浮动盒子。
2023-01-25 17:07:23
724
原创 多个盒子排列规则（视觉格式化模型） 多个盒子的排列 页面布局
1.有一个父盒子，它里面还有一个子盒子，子盒子能够存在的地方是父盒子的content区里，如果父盒子通过margin-left进行移动，子盒子也会同时进行移动。在没有设置块盒宽度的时候，块盒content区的width的默认值是auto，它会自动计算，用父盒子的content宽度值减去块盒的两边的border=块盒的content值。margin:auto， 表示0，这句话意思是，盒子上下的margin值为0，左右的margin（水平上）还是有值的。意思是：子盒子所有的百分之的值=百分比乘以父盒子的宽度。
2023-01-24 15:58:35
1755
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人