前端
文章平均质量分 71
恁..
努力进阶的小青年 有关必回
展开
-
JavaScript对象
属性加引号和不加引号使用是一样的,如果键是以数字开头必须加引号,且不能用”.”来调用需要用[]调用。在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象。2:创建一个构造函数,包括:SID,姓名,年级,爱好(可传参数),创建2个学生对象。1:创建一个电脑对象,该对象有颜色,品牌,重量,看电影(方法),打游戏(方法)。- 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型,函数类型等)- 因为我们一次创建一个对象,里面很多的属性和方法是大量相同的 我们只能复制。原创 2022-09-27 17:18:24 · 431 阅读 · 38 评论 -
Javascript运算符(js运算符)
运算符也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号,常见的运算符:算数运算符,递增和递减运算符,比较运算符,逻辑运算符,赋值运算符。由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码,从而得到不同的结果。=== 全等号 要求值和数据类型必须相等举例: “3”===3 false,”3”==3 true。++num 前置递增,就是自加1,类似于 num = num + 1,简写++num,console.log('中文' == 'chinese');原创 2022-09-22 18:44:47 · 1933 阅读 · 35 评论 -
a标签 :focus的使用(:focus)
这样也会实现一种tab栏切换的效果,今天小编刚刚发现的这种写法,在很多页面中用这种方法去实现是不是很简单呢。当点击a标签的时候也会聚焦,颜色也会变,正如小编上面代码中写的一样,a在focus时变红,原来也会实现。在我们的印象中:focus往往配合input来使用,用来聚焦的效果,今天就用它来和a标签使用一下。原创 2022-09-16 14:28:29 · 2027 阅读 · 5 评论 -
CSS响应式布局(自适应布局)
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验,而且随着大屏智能手机的普及,用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。原创 2022-09-15 19:50:49 · 19009 阅读 · 3 评论 -
媒体查询?
浏览器在宽度小于540px的时候,背景颜色是蓝色,浏览器宽度在540px-970px之间,body的背景颜色是绿色,浏览器宽度大于970px的时候,背景颜色是红色。rem单位是跟着html来走的,有了rem页面元素可以设置不同的大小尺寸。媒体查询+rem就可以实现不同设备宽度,实现元素大小的动态变化。使用@media查询,可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式。媒体查询可以根据不同的屏幕尺寸改变不同的样式。3.关键字 and not only。原创 2022-09-14 16:31:16 · 1243 阅读 · 36 评论 -
JS for循环语句的用法
JS for 循环中括号中的三个表达式是可以省略的,但是用于分隔三个表达式的分号不能省略,中的代码,如果失败则退出 for 循环;在每次循环执行完成后,执行。上面的代码中,在循环开始之前会先执行。,并将变量 i 作为计数器;JS for 循环中的三个表达式。是否成立,如果成立则执行。操作,即更新计数器的值。JS for 循环嵌套。原创 2022-09-12 18:41:00 · 859 阅读 · 7 评论 -
中秋节——嫦娥奔月
月中之桂树与吴刚的传说,以唐代段成式《酉阳杂俎》前集卷一《天咫》所载最为具体,其云:“旧言月中有桂、有蟾蜍,故异书言月桂高五百丈,下有一人常斫之,树创随合。人姓吴名刚,西河人,学仙有过,谪令伐树。貂蝉身姿俏美,细耳碧环,行时风摆杨柳,静时文雅有余,貂蝉之美,蔚为大观。”诗人上场时,背景是花间,道具是一壶酒,登场角色只是他自己一个人,动作是独酌,加上“无相亲”三个字,场面单调。于是诗人忽发奇想,把天边的明月,和月光下自己的影子,拉了过来,连自己在内,化成了三个人,举杯共酌,冷清清的场面,就热闹起来了。原创 2022-09-09 10:26:43 · 474 阅读 · 15 评论 -
旋转相册的制作
html和css真的很炫酷,对于没有接触过的人来说是有点困难,但是如果感兴趣的,深入了解一下就会发现它的奇妙之处,会制作很多炫酷的效果哦。2.然后在文件夹里再建一个文件夹用来放图片,一个新建文档,注意把后缀名改成.html.在浏览器里是会旋转的哦,大家快试试哦,送给你心爱的那个她(他)吧,去送一份惊喜吧。在url里面放你需要的相册,只需要在./img/后面写你自己相册的名字就可以了。5.写好之后直接保存退出,双击你的index.html文件就可以看到效果了哦。3.将你需要的图片放在img文件夹里面。原创 2022-09-08 20:39:39 · 2323 阅读 · 41 评论 -
锚点功能实现tab栏
标题一标题二标题三标题四原创 2022-09-07 16:35:22 · 762 阅读 · 21 评论 -
input 和 label 实现tab栏
今天刚听说的用input和label来实现tab栏,也可以实现轮播图的形式,就可以在只学习了css就可以实现点击的效果,在以前我都是用:hover来实现鼠标移入内容出现,但是鼠标立马移开内容就会消失,现在就可以用input和label来实现点击一下,内容出现的效果,而且在不触发下次点击时内容都不会消失,比:hover用起来舒服很多哦,但是还是要根据实际情况去运用哦。内容虽少,但是真的很有意思哦,小编今天刚学会这种方式,就迫不及待地跟大家分享一下,大家支持一下哦,大佬还请指点指点。锚点功能也是可以的哦。原创 2022-09-06 15:26:00 · 367 阅读 · 32 评论 -
JS if else语句: 条件判断语句
条件判断语句是程序开发过程中一种经常使用的语句形式,和大部分编程语言相同,JavaScript 中也有条件判断语句。所谓条件判断,指的是程序根据不同的条件来执行不同的操作,例如根据年龄来显示不同的内容,根据布尔值 true 或 false 来判断操作是成功还是失败等。下面为大家介绍if、if else、if else if else 语句的使用if 语句是 JavaScript 中最简单的条件判断语句,语法格式如下:if(条件表达式){// 要执行的代码;原创 2022-09-05 15:47:08 · 6059 阅读 · 41 评论 -
html css面试题
外边距是调整盒子在页面中的位置的,它的属性有:margin-left,margin-top,margin-right,margin-bottom,分别对应的是左,上,右,下,例如margin-left:50px;在我们的页面布局当中,我们会经常使用浮动,浮动是很重要的,因为在布局中我们经常使用块元素,而块元素的特点是独占一行 ,所以我们在水平布局上无法布局,那么浮动就可以解决无法在水平方向上的布局的困扰,设置浮动的元素会脱离文档流。那么1em=20px,2em=40px;Important;原创 2022-09-02 15:15:24 · 1110 阅读 · 42 评论 -
小米商城侧导航栏的实现(导航栏的制作)
我的想法是将下拉框写在列表里面,然后给下拉框绝对定位,给ul相对定位,因为我没有给li设置相对定位,那么下拉框的参照物就是相对定位了的ul,把下拉框的位置定好,然后实现鼠标移入下拉框出现,鼠标移出下拉框消失的问题。侧导航栏在我们写的时候很常用,很多网站上面都有侧边导航栏的应用,那么如何制作侧边导航栏呢?我们实现的思路是先制作一个列表,设置列表的样式,然后在列表里面完成我们需要的内容。下面看一看我制作的小米商城的侧导航栏。所涉及到的知识点有定位和格式化文档。css代码段如上所示。...原创 2022-09-01 15:36:43 · 3954 阅读 · 51 评论 -
CSS动画
animation-timing-function 属性用来设置动画播放的速度曲线,通过速度曲线的设置可以使动画播放的更为平滑。注意:要想让动画成功播放,您还需要定义 animation-duration 属性,否则会因为 animation-duration 属性的默认值为 0,导致动画并不会播放。提示:动画若想成功播放,必须要定义 animation-name 和 animation-duration 属性。图:animation-timing-function 属性演示。...原创 2022-08-31 19:30:09 · 402 阅读 · 2 评论 -
CSS transition(过渡效果)
transition 属性中,transition-property 和 transition-duration 为必填参数,transition-timing-function 和 transition-delay 为选填参数,如非必要可以省略不写。如果有多个参与过渡的属性,也可以依次为这些属性设置过渡需要的时间,多个属性之间使用逗号进行分隔,例如。其中,time 为完成过渡效果需要花费的时间(单位为秒或毫秒),默认值为 0,意味着不会有效果。...原创 2022-08-30 19:19:55 · 2820 阅读 · 0 评论 -
css动画 animation
提示: repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函数的语法分别与 linear-gradient()、radial-gradient() 和 conic-gradient() 函数的语法相同。线性渐变指的是颜色沿一条直线进行渐变(例如右上到下,从左到右等),要创建线性渐变,您至少需要定义两个色标(色标指的是想要平滑过渡的颜色),若要创建更加复杂的渐变效果,则需要定义更多的色标。.原创 2022-08-29 19:07:14 · 877 阅读 · 2 评论 -
HTML <table>标签(表格)
运行效果如下:这是一个四行四列的表格,原创 2022-08-25 14:48:56 · 1740 阅读 · 4 评论 -
了解2D转换
同时移动元素在水平方向和垂直方向的距离,中间用逗号隔开。旋转属性还有一个常见的属性:transform-origin 转换中心点 这是设置元素旋转时以什么为中心点。我们设置了div盒子的移动,运行可以发现div盒子在水平方向和垂直方向都移动了200px。transform:translateY():只移动元素在垂直方向上的距离。transform:translateY():只移动元素在垂直方向上的距离。这样div盒子只在水平方向上移动了200px。div盒子只在垂直方向移动了200px。原创 2022-08-24 19:48:58 · 221 阅读 · 1 评论 -
flex布局
让我们子元素居中对齐。flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap。flex布局中,默认的子元素是不换行的, 如果装不开,会缩小子元素的宽度,放到父元素里面。align-content:设置侧轴上的子元素排列方式(多行)align-content:设置侧轴上的子元素排列方式(多行)justify-content:设置主轴上的子元素排列方式。justify-content:设置主轴上的子元素排列方式。原创 2022-08-22 20:57:16 · 524 阅读 · 20 评论 -
背景样式的使用
padding-box 背景不会出现在边框,只会出现在内容区和内边距。如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素。- 如果指定的是一个正值,则图片会向右移动指定的像素。- 如果指定的是一个负值,则图片会向左移动指定的像素。- 如果指定的是一个正值,则图片会向下移动指定的像素。- 如果指定的是一个负值,则图片会向上移动指定的像素。border-box 默认值,背景颜色会出现在边框的下边。no-repeat ,背景图片不会重复,有多大就显示多大。如果背景图片大于元素,默认会显示图片的左上角。.原创 2022-08-16 14:30:03 · 701 阅读 · 3 评论 -
固定定位和粘滞定位
粘滞定位必须配合top使用;例如上面代码,当top值没有到50px时,他就被固定了,这就是粘滞定位。(4)配合top值设置,没有达到top值之前正常显示,随着滚动条滚动而滚动,-当元素的position属性设置为sticky时,则开启了元素的粘滞定位。不管你怎么滑动鼠标,黄色的盒子一直就是在这个位置固定住了,这就是固定定位。当元素的position属性设置fixed时,则开启了元素的固定定位。(3)固定定位不占有原来的位置,即脱离标准流 ,更改元素的性质。(3)粘滞定位可以在元素到达某个位置时,将其固定。.原创 2022-08-15 19:57:50 · 706 阅读 · 2 评论 -
z-index 层级
我们box5的层级是1,它的父元素box4层级是999,但是box4并没有在box5的上面,因为父元素的层级再高也不会高于子元素。box2的层级是20,box3的层级是21,所以box3在box2的上面,数值越高,层级越高。前提是在开启定位的情况下。2 设置z-index,父元素的层级再高也不会高于子元素。1 z-index属性必须要开启定位的前提下使用。z-index后面跟正整数,数值越大,层级越高。z-index 设置元素的层级。......原创 2022-08-12 17:02:27 · 1514 阅读 · 2 评论 -
相对定位和绝对定位
2、设置偏移量,偏移量的相对位置是相对于元素原来在文档流中的位置(left:0;定位是一种布局的手段,而且是一种高级的布局手段,可以将任何元素摆放在页面的任意位置。2、设置绝对定位后,元素的性质就会发生变化,就不会再区分块还是行内了。我们会在开启子元素的绝对定位后,会同步开启父元素的相对定位。3、设置绝对定位后,如果不设置偏移量,元素的位置也不会发生变化。2、如果是定位的情况下,包含块就是元素的开启了定位的,离它最近的祖先元素。1、默认情况(没有定位的情况下),包含块就是元素的祖先元素。...原创 2022-08-11 15:40:25 · 1972 阅读 · 0 评论 -
如何解决高度塌陷
可以直接在高度塌陷的父元素的最后,添加一个空白的块元素,由于这个块元素并没有浮动,所以他是可以撑开父元素的高度的,然后在对其进行清除浮动,这样可以通过这个空白的块元素来撑开父元素的高度,基本没有副作用。父元素的高度一般是被子元素或者叫内容撑开的,若设置子元素浮动,则子元素就会脱离文档流,也就撑不开父元素的高度了,从而导致父元素的高度丢失,页面布局混乱。当开启元素的BFC以后,元素会变成一个独立的布局区域,不会在布局上影响到外面的元素。元素也会脱离文档流,虽然可以撑开父元素,但是会导致父元素的宽度丢失。...原创 2022-08-10 16:00:18 · 269 阅读 · 0 评论 -
浮动的特点
1.当浮动元素遇到了文字,浮动的元素不会覆盖文字,而是文字会环绕在浮动元素的周围。元素脱离文档流了,就不再区分块,行内,行内块,也就不具有以上的特点。如图所示,浮动的盒子并没有覆盖掉文字,而是文字围绕在盒子周围。行内元素 : 不会独占一行,不能自定义设置宽高。元素也不会独占一行了,也可以设置宽高了等等。这也是浮动最早的功能,只是后面用于水平布局。行内块元素 :兼具块元素,行内元素的特点。可以看到span元素的高和宽并没有设置成功。那我们把span元素设置一个左浮动看看吧。块元素 : 独占一行。...原创 2022-08-09 14:24:10 · 638 阅读 · 0 评论 -
float属性的使用
1:浮动元素会脱离文档流,元素脱离文档流以后,不会再占用文档流的位置,它下边的元素会立即向上移动。5:如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移。none 默认值,元素正常显示,不浮动。浮动目前来讲它的主要作用就是让页面中的元素可以水平排列。2:元素浮动以后,元素会尽量向页面的左上或页面右上漂浮。4:浮动的元素不会超过他上边的兄弟元素,最多最多一边齐。right 元素向右浮动。left 元素向左浮动。通过浮动可以制作一些水平方向的布局。3:浮动元素默认不会从父元素中移出。...原创 2022-08-08 15:58:59 · 777 阅读 · 1 评论 -
如何设置边框圆角
border-top-left-radius 设置左上角的弧度。borde-top-right-radius 设置右上角的弧度。border-bottom-left-radius 设置左小角的弧度。border-bottom-right-radius 设置右下角的弧度。它的效果图是是一个宽200px 高100px 背景颜色是青色的的一个矩形。顺序是(左上=右下)(右上=左下 )例如我们设置上面的矩形右上角的弧度。顺序是 左上 右上 右下 左下。...原创 2022-08-04 16:49:51 · 5178 阅读 · 16 评论 -
认识盒子模型
在实际编程中,我们往往使用的是margin的这种高效简洁写法来编程。内容区(content) 边框(border) 内边距(padding) 外边距(margin)2.边框(border):边框属于盒子边缘,边框里面属于盒子内部,出了边框都是盒子的外部。它的后面也可以跟多个值,规则和边框 border的规则一样,大家可以看上面有详细的介绍。margin 属性可以单独改变元素的上,下,左,右边距。而影响盒子大小的元素:内容区,边框,内边距。如果是三个值的话,那他的顺序是上 左右 下(左右都用第二个值)...原创 2022-08-03 16:22:57 · 463 阅读 · 2 评论