![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小白前端学习
文章平均质量分 61
小欣CZX
交大,研二。
展开
-
前端学习笔记101-媒体查询简介
前端学习笔记101-媒体查询简介宽度width:视口的宽度(包括滚动条)min-widthmax-width断点同时设置多个宽度width:视口的宽度(包括滚动条) @media (width:500px){ body{ background-color: #bfa; } }这个代码的功能是:当视口宽度为500px时则生效。只在500才生效,有点鸡肋,一般用min-width和max-原创 2021-05-21 21:43:22 · 417 阅读 · 2 评论 -
前端学习笔记100-响应式布局
前端学习笔记100-响应式布局响应式布局媒体查询语法media types(媒体类型)响应式布局打开小米商城,可以看到网页右侧有这个,如果我把网页缩小,它会自动变成这个,打开jQuery官网,改变它的宽度,有如下效果,这就是我们这节要学的响应式布局。媒体查询响应式布局:网页可以根据不同的设备或窗口大小呈现出不同的效果。通过响应式布局,可以使一个网页适用于所有设备。响应式布局的关键是媒体查询。通过媒体查询,可以为不同的设备或设备的不同状态分别设置样式。打开zeal,搜索media,原创 2021-05-21 21:09:39 · 213 阅读 · 2 评论 -
前端学习笔记99-vw适配
前端学习笔记99-vw适配em与rem回顾解决方法从上一节我们发现,用vw来实现设计图有点麻烦,需要换算。所以我们得想想办法。em与rem回顾em等于字体大小rem等于html字体大小如果我们把html的字体大小设置为0.13333vw(对应设计图里750px的1px),那么我们是不是可以直接用rem来写,设计图多少px我们就写多少rem。试一下,还是写一个在设计图里为48px*35px的div。<!DOCTYPE html><html lang="en"><h原创 2021-05-21 09:31:30 · 1209 阅读 · 1 评论 -
前端学习笔记98-vw单位
前端学习笔记98-vw单位vw设计图宽度vw与设计图从上一节我们知道,不同设备的完美视口不一样,所以我们在写宽度长度等数据时,不能再用px来做单位,因为它和不同设备的device-width比值是不同的,显示出来就不同了,所以我们要换一个单位,这个单位要相对于device-width比值不变。vw100vw为viewport width,所以看下面的代码:<!DOCTYPE html><html lang="en"><head> <meta ch原创 2021-05-21 09:02:47 · 187 阅读 · 0 评论 -
前端学习笔记97-完美视口
前端学习笔记97-完美视口meta调整像素比device-width总结看代码,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- <meta name="viewport" content="width=device-原创 2021-05-21 08:34:17 · 532 阅读 · 1 评论 -
前端学习笔记96-手机像素
前端学习笔记96-手机像素问题总结视频里给了一个可以看部分手机分辨率的网站。我在里面找半天没找到,我就不找了,链接放这里,找到的小伙伴麻烦教教我。链接某部手机的大小为4.7寸,分辨率为7 501334。我的笔记本22寸,分辨率是19 201080,这个很明显,手机的像素点比我的笔记本的像素点小。问题宽度为900的网页,在该手机中如何显示?这里的代码我把meta的后两个注释掉了,原因后面会讲。<!DOCTYPE html><html lang="en"><hea原创 2021-05-21 07:43:02 · 159 阅读 · 0 评论 -
前端学习笔记95-像素
前端学习笔记95-像素像素视口看视口宽度写一个div总结像素像素:屏幕中的小点。分辨率:屏幕中小点的数量。前端开发中,分css像素和物理像素。电脑设置里的那个分辨率设置的是物理像素,我们写的html文件写的是css像素。浏览器在显示网页时,需要将css像素转换为物理像素后再呈现。一个css像素最终由几个物理像素显示,有浏览器决定。默认情况下在PC端为1:1。视口视口是屏幕中用来显示网页的区域。可以通过查看视口的大小,来观察css像素与物理像素的比值。看视口宽度高度没啥用,不是定死的。原创 2021-05-21 07:07:38 · 397 阅读 · 1 评论 -
前端学习笔记94-弹性元素上的样式
前端学习笔记94-弹性元素上的样式flex-growflex-shrinkflex-basisflexorderflex-grow这个是弹性的增长系数,之前描述过,这里就不描述了。笔记91flex-shrink同上,不描述。flex-basis指定元素在主轴上的基础长度,如果主轴是横向的,则该值为元素的宽度;如果主轴是纵向的,则该值为元素的高度。默认值为auto。这个用得少,我就不描述了,具体查zeal。flex可以按顺序同时设置grow、shrink,basis。如果写为:flex原创 2021-05-20 22:17:40 · 71 阅读 · 0 评论 -
前端学习笔记93-弹性容器上的样式
前端学习笔记93-弹性容器上的样式flex-wrapflex-flowjustify-contentalign-items元素居中align-contentalign-self<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta原创 2021-05-20 21:42:04 · 162 阅读 · 1 评论 -
前端学习笔记92- 导航条练习
前端学习笔记92- 导航条练习这个和笔记45是一样的练习,笔记45中最后一个li中a的padding是单独设置的,目的是为了让所有li的总宽度占满父元素。这次练习用我们上节课学到的flex来实现。笔记45我在代码里写了注释,就不多解释了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c原创 2021-05-20 17:11:36 · 91 阅读 · 0 评论 -
前端学习笔记91-弹性盒简介
前端学习笔记91-弹性盒简介弹性容器弹性元素指定容器中弹性元素的排列方式主轴与侧轴弹性元素的属性flex-glowflex-shrink这节学习flex,它是css中的右一种布局手段,用来代替浮动完成页面的布局。flex可以使元素具有弹性,让元素跟随页面的大小改变而改变。看代码,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equ原创 2021-05-20 16:55:37 · 187 阅读 · 0 评论 -
前端学习笔记90-less补充
前端学习笔记90-less补充算数运算import引入调试问题算数运算less可以进行直接算数运算,不过得注意,我发现除法得加括号。less代码:.box1{ width: 100px+100px; height: 100px-10px; margin: (10px/2) 30px*3; background-color: #bfa;}css对应代码:.box1 { width: 200px; height: 90px; margin: 5px 9原创 2021-05-20 10:50:02 · 118 阅读 · 1 评论 -
前端学习笔记89-混合函数
前端学习笔记89-混合函数混合函数位置传递(依顺序传递传输)映射传递默认值与缺省less的function混合函数调用混合函数。感觉就是函数传参,我就不解释了。位置传递(依顺序传递传输)less代码:.test(@w,@b){ width: @w; height: @b; border: 1px solid red;}div{ .test(50px,100px);}css对应代码:div { width: 50px; height: 100px原创 2021-05-20 10:11:15 · 140 阅读 · 1 评论 -
前端学习笔记88-父元素和扩展
前端学习笔记88-父元素和扩展后代元素和子元素设置hover&符extend继承的第二种写法mixin后代元素和子元素less代码:.box1{ .box2{ color: #ff0; } >.box3{ color: #ff0; }}css对应代码:.box1 .box2 { color: #ff0;}.box1 > .box3 { color: #ff0;}设置hover这里得再hove原创 2021-05-20 09:49:28 · 148 阅读 · 0 评论 -
前端学习笔记87-less中的变量
前端学习87-less中的变量给多个子元素设置注释变量作用域和重新赋值$符给多个子元素设置less代码:.box1{ background-color: #bfa; .box2{ background-color: #ff0; } .box3{ background-color: #0ff; }}对应的css代码:.box1 { background-color: #bfa;}.box1 .box2 { ba原创 2021-05-20 09:20:39 · 132 阅读 · 0 评论 -
前端学习笔记86-less简介
前端学习笔记86-less简介css原生变量less举例文档less是css的预处理语言,是css的增强版,通过less可以用更少的代码编写更强大的样式。css原生变量这里先介绍下css的不足。看代码,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"原创 2021-05-19 22:21:16 · 404 阅读 · 0 评论 -
前端学习笔记85-缩放
前端学习笔记85-缩放scale鼠标移入后图片放大效果scaleZtransform-originscale对元素进行缩放。scaleX()设置x轴方向的放大倍速。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na原创 2021-05-19 21:20:13 · 660 阅读 · 1 评论 -
前端学习笔记84-旋转
前端学习笔记84-旋转z轴x轴先旋转后平移平移加旋转旋转180度旋转可以使元素沿着x、y、z轴旋转指定的角度。rotateX()、rotateY()、rotateZ()。z轴<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2021-05-19 06:58:22 · 329 阅读 · 0 评论 -
前端学习笔记83-z轴平移
前端学习笔记83-z轴平移z轴平移是调制元素和人眼之间的距离,值越大,距离我们越近。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2021-05-19 06:32:11 · 442 阅读 · 0 评论 -
前端学习笔记82-变形平移
前端学习笔记82-变形平移坐标轴变形transformtranslate居中向上浮动效果坐标轴立体坐标系大伙应该都懂,在这里,朝右为x轴,朝下为y轴,从屏幕往外为z轴。也就是左手系。(左手系不动的百度下,很好理解的。)变形变形是指通过css改变元素的形状和位置,它不会影响到页面的布局。transform用来设置元素的变形效果。可选值:translate translateX:沿着x轴平移。 translateY:沿着Y轴平移。 translateZ:沿着Z轴平移。<!DOCTY原创 2021-05-18 23:07:32 · 133 阅读 · 1 评论 -
前端学习笔记81-关键帧
前端学习笔记81-关键帧问题引入关键帧用回简单的写法问题引入看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial原创 2021-05-18 16:41:42 · 203 阅读 · 0 评论 -
前端学习笔记80-动画
前端学习笔记90-动画动画关键帧为元素设置动画设置执行时间设置动画延时设置时序函数设置动画执行的次数设置方向设置动画的执行状态设置动画填充模式整个代码前面学的过渡只有在鼠标移入的时候才有效,所以如何做一个一直在动的呢?用动画。动画动画和过渡类似,可以实现动态的效果,但是过渡需要在某个属性发生变化时才会触发,而动画则自动触发。关键帧设置动画效果,必须先要设置一个关键帧。 @keyframes test { /* from表示动画的开始位置 */原创 2021-05-14 17:07:28 · 108 阅读 · 1 评论 -
前端学习笔记79-过渡
前端学习笔记78-过渡transitiontransition-propertytransition-durationtransition-timing-functiontransition-delaytransition终于学完了小米商城练习,进度有点慢。先看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA原创 2021-05-13 09:11:56 · 99 阅读 · 0 评论 -
前端学习笔记78-过渡效果
前端学习笔记78-过渡效果还是在练习中学到的。看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale原创 2021-05-11 22:17:23 · 64 阅读 · 0 评论 -
前端学习笔记77-下拉框的小三角
前端学习笔记77-下拉框的小三角正在跟着视频做小米商场网页练习,里面提到了小三角,我就不解释了,这里放代码和效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="原创 2021-05-11 17:06:00 · 188 阅读 · 0 评论 -
前端学习笔记76-表单补充
前端学习笔记76-表单补充inputsubmitbuttonresetbuttoncoloremailautocomplete属性readonly属性disabled属性autofocus属性inputsubmit这个上一节讲过,不赘述。button这个和submit不同,它是一个普通按钮。reset这个是重置按钮。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g原创 2021-05-09 20:55:52 · 96 阅读 · 2 评论 -
前端学习笔记75-表单简介
前端学习笔记75-表单简介form标签文本框提交按钮value属性换行name属性密码框单选按钮checked多选按钮下拉列表当我们办银行卡时,需要填单子(个人信息),这个叫做表单。(视频举的例子)表单用于提交数据,在网页中也可以使用表单,其将本地数据提交给远程的服务器。form标签这里我们用form创建表单第一个属性是action,它用于指定表单提交的服务器地址。由于我们现在学习,没有服务器,所以我们先创建一个target.html文件做服务器演示。target.html:<!DOCT原创 2021-05-08 21:44:42 · 297 阅读 · 2 评论 -
前端学习笔记74-表格的样式
前端学习笔记74-表格的样式宽度边框border-spacingborder-collapse颜色相间td元素宽度首先,table是块元素,但是它有点不同,它的宽度是被内容撑开的,剩下的为margin。当然,这个宽度是可以设置的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con原创 2021-05-07 21:02:14 · 1127 阅读 · 1 评论 -
前端学习笔记73-长表格
前端学习笔记73-长表格有些表格很长,就需要长表格,例如银行流水。这种表格分为3个部分,表头thead、主体tbody、底部tfoot。看代码,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp原创 2021-05-07 20:23:49 · 86 阅读 · 0 评论 -
前端学习笔记72-表格
前端学习笔记72-表格table横向合并单元格纵向合并单元格前面学习了很多css内容,接下来再学点html。table这节学习table标签table中,用tr表示一行,几个tr表示几行。用td表示一个单元格,几个td表示几个单元格。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c原创 2021-05-07 20:11:27 · 92 阅读 · 0 评论 -
前端学习笔记71-径向渐变
前端学习笔记71-径向渐变径向渐变指定大小重复径向渐变指定形状指定位置渐变范围径向渐变之前的线性渐变是从某个方向朝另一个方向渐变,这里则不同,是从中心朝四周渐变。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name原创 2021-05-07 17:56:25 · 222 阅读 · 3 评论 -
前端学习笔记70-线性渐变
前端学习笔记70-线性渐变线性渐变方向多个颜色分布重复线性渐变渐变的作用是可以设置一些复杂的背景颜色,实现从一个颜色向其他颜色过渡的效果。渐变是图片,通过background-image设置。线性渐变这节学习线性渐变。background-image:linear-gradient(颜色1,颜色2)功能:从颜色1 向颜色2过渡。看代码,<!DOCTYPE html><html lang="en"><head> <meta charset=原创 2021-05-07 17:26:44 · 398 阅读 · 2 评论 -
前端学习笔记69-雪碧图
前端学习笔记69-雪碧图前面提到会有闪烁问题,为了解决这个问题,可以把三种图片拼接成一张,就可以搞定。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev原创 2021-05-07 17:00:46 · 253 阅读 · 0 评论 -
前端学习笔记68-背景练习
前端学习笔记68-背景练习这个背景练习时两个,背景本身不难,我就不多说了,里面提到了一个图片加载的问题。看下面代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid原创 2021-05-06 16:56:23 · 110 阅读 · 0 评论 -
前端学习笔记67-背景
前端学习笔记67-背景background-colorbackground-imagebackground-repeatbackground-positionbackground-clipbackground-originbackground-sizebackground-attachmentbackgroundbackground-color设置背景颜色background-image设置背景图片<!DOCTYPE html><html lang="en"><h原创 2021-05-05 21:32:51 · 171 阅读 · 2 评论 -
前端学习笔记66-其他的文本样式
前端学习笔记66-其他的文本样式文本修饰处理空白文本修饰样式:text-decoration可选值 none:什么都没有 underline:下划线 overline:上划线此外,还可以设置颜色和样式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed原创 2021-05-05 17:58:08 · 111 阅读 · 2 评论 -
前端学习笔记65-文本的水平和垂直对齐
前端学习笔记65-文本的水平和垂直对齐text-alignvertical-align图片基线text-align功能:文本的水平对齐可选值: left:左侧对齐 right:右侧对齐 center:居中对齐 两端对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten原创 2021-05-05 17:26:55 · 450 阅读 · 2 评论 -
前端学习笔记64-字体的简写属性
前端学习笔记64-字体的简写属性语法1语法2font-weightfont-stylefont可以设置字体相关的所有属性如果我们想设置字体大小和字体族,如何写?之前的写法: div{ border:1px red solid; font-size: 50px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri; }font简写法:原创 2021-05-05 16:38:36 · 258 阅读 · 0 评论 -
前端学习笔记63-行高
前端学习笔记63-行高行高line-height字体框平均分配行间距终于是学完图标字体了,昨天有事没有学,今天继续。(昨天发的博文是前天写的)行高行高是文字占有的高度。如何看见呢?看代码,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-05-05 16:07:41 · 362 阅读 · 2 评论 -
前端学习笔记62-iconfont
前端学习笔记62-iconfont登录选择想要的添加至项目查看自己的项目下载解压使用1-实体使用2-类使用3-伪元素国内有一个图标字体库iconfont,它相比之前那个它更丰富。但是用法比较不同,之前那个我们一次性下载下来,然后查文档就能用了。但是阿里的iconfont则是用哪个下载哪个。还有一个问题就是版权不清晰。登录这个网站需要登录选择想要的如果我们选择的彩色的,则直接下载为图片使用,因为图标字体是单色的。如果选择的是不是彩色的,则将图标加入购物车(注意,不是下载)。添加至项目打开购物车原创 2021-05-04 11:17:16 · 108 阅读 · 1 评论