- 博客(86)
- 收藏
- 关注
原创 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 661
原创 循环语句 for循环 用for 打印1-100的偶数和 退出循环 for循环嵌套 打印五行五列的小星星 打印倒三角星星 99乘法表
退出循环for循环嵌套打印五行五列的小星星打印倒三角星星99乘法表
2023-02-02 17:39:02 370
原创 数据类型 boolean 未定义类型undefined 数据类型 null
数据类型 boolean未定义类型undefined数据类型 null
2023-01-31 23:31:52 164
原创 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 2882
原创 居中总结 行盒(行块盒)水平居中 常规流块盒水平居中 绝对定位元素的水平居中 单行文本的垂直居中 行块盒或块盒内多行文本的垂直居中 绝对定位的垂直居中
居中:盒子在其包含块中居中。
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 64
原创 布局 多栏布局 等高 元素书写顺序 后台页面的布局
越重要的代码要靠前写,因为浏览器是从上往下读取的,但我们写的代码又是显示越后面的内容进行显示。
2023-01-27 21:35:21 199
原创 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 1038
原创 css@规则 @import @charset “utf-8“;
告诉浏览器该CSS文件,使用的字符编码集是utf-8,必须写到第一行。导入另外一个css文件,这样html页只需要写一个css导入。就像这样,在我们要写的css里导入重置样式的css;@规则、@语句、CSS语句、CSS指令。@import “路径”;就可以看到网页引用了哪些。
2023-01-27 12:29:37 187
原创 表格元素 适用于后台元素
在css技术出现之前,网页通常使用表格布局。现在基本不用表格来做前台界面前台:面向用户后台:面向管理员。对界面要求不高,对功能性要求高。表格的代码过长与复杂,读取速度慢现在需要学,因为后台系统会需要。
2023-01-27 12:09:23 49
原创 表单元素 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 262
原创 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 1327
原创 浮动 应用场景 浮动的基本特点 高度坍塌 解决浮动时盒子冲突问题
一般用类名 ::after 方法,调用item下面的normal(自定义名字),将normal设置成空的,在设置clear:both 让它可以显示在浮动元素的下面。想要设置图片环绕的效果,需要对图片的外边距进行设置,而不是p的外边距,因为p标签的外边距会把下边所有的文章都进行了移动。高度坍塌是指在设置浮动之后,背景的宽度不会被撑大,背景忽略了浮动的盒子内容,但取消浮动之后,背景又被撑开了。因为浮动盒子脱离了常规流盒子,导致高度坍塌,但这是在自动高度的前提下。:常规流盒子,在计算时,不会考虑浮动盒子。
2023-01-25 17:07:23 726
原创 多个盒子排列规则(视觉格式化模型) 多个盒子的排列 页面布局
1.有一个父盒子,它里面还有一个子盒子,子盒子能够存在的地方是父盒子的content区里,如果父盒子通过margin-left进行移动,子盒子也会同时进行移动。在没有设置块盒宽度的时候,块盒content区的width的默认值是auto,它会自动计算,用父盒子的content宽度值减去块盒的两边的border=块盒的content值。margin:auto, 表示0,这句话意思是,盒子上下的margin值为0,左右的margin(水平上)还是有值的。意思是:子盒子所有的百分之的值=百分比乘以父盒子的宽度。
2023-01-24 15:58:35 1759
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人