- 博客(14)
- 收藏
- 关注
RSS订阅原创 15天前端学习-第十四天（个人记录）
这些天陆陆续续学的比较杂,还是需要来总结一下。 flex在子项上设置的属性 order:0;子项排列顺序,默认0,越小排列越靠前。 flex-grow:0;定义剩余空间分配,默认0,值越大子项占比的空间就越大。 flex-shrink:1;定义空间不足的情况,默认1,就是空间不足等比缩小,设定为0时空间不足也不会缩小。 flex-basis:auto;设定子项占据的位置,有点像width。 flex:0 1 auto;flex-grow,flex-shrink,flex-basis的复合写法。 align-
2020-07-15 15:46:50
114
原创 15天前端学习-第十三天（个人记录）
开始学习flex了 HTML CSS inherit可以让优先级高的标签继承,如a{color:inherit} box-sizing:boder-box;可以让容器里面的元素设置边距时不影响到外面 text-indent:1px;首行缩进,在做输入框的时候有用到; 兄弟元素用class的清除浮动伪类是无效的,直接在元素里加clear:both就可以; 当上面的元素有浮动时,下方的元素要使用margin时,会以最上端的元素作为margin的对象,这种情况可以用相对定位解决。 flex弹性布局,能够让布局变得
2020-06-21 22:22:35
120
原创 15天前端学习-第十二天（个人记录）
HTML 文字阴影:text-shadow:x y blur color; blur为模糊程度,值越大阴影越模糊,默认阴影颜色跟文字相同,第四个值可以修改阴影颜色。 逗号隔开可以设置多个阴影。 盒阴影:box-shadow:x y blur spread color inset; 盒阴影默认颜色是黑色,spread阴影扩散范围,inset为内阴影。 逗号隔开可以设置多个阴影。 盒子阴影box-shadow跟文字阴影text-shadow很像。 遮罩:. mask:url(遮罩图地址) x y /遮罩大小x
2020-06-15 21:36:30
140
原创 15天前端学习-第十一天（个人记录）
背景图的尺寸问题 background-size:宽 高;功能:可以设置背景图大小,但可能会影响到图片的质量(一般不用)。 background-size:cover(覆盖);功能:将图片等比例放大铺满容器,可能会溢出,溢出部分会被隐藏。 background-size:contain(包含);功能:将图片等比例放大,当宽或者高碰到容器边框了就会停止。 cover与contain有点相似,contain与cover的区别就是撞到边框会停下,不会溢出,但剩下的部分就不会被填充。 背景图的基点位置 backgr
2020-06-13 22:30:54
114
原创 15天前端学习-第十天（个人记录）
JS 对象的属性可以通过变量访问,比如获取用户输入的值,通过这个值来访问。 let user = { name:"john", age:18, } let key = prompt("输入你想访问的值","name"); alert(user[key]); 对象的计算属性:通过变量设置属性。 let a = prompt("输入你要买的物品","apple"); let j = { [a]: 5, //将变量a的值作为属性名
2020-06-13 00:25:02
85
原创 15天前端学习-第九天（个人记录）
简易3D效果 perspective-origin:3D的景深基点位置(看物体的角度),搭配transform的scaleZ()厚度,能让物体延伸。 transform:scale3d(宽x,高y,厚度z); transform:rotate3d(1x,1y,1z,角度); 前三个值(只能写1,0)表示轴是否要旋转,第四个值表示旋转的角度。 backface-visibility:hidden;给3D的物体设置透明度时,添加该属性能遮住物体背景; 3D旋转图片的要点,使用定位(absolute)将图片叠加
2020-06-11 20:31:11
108
原创 15天前端学习-第八天（个人记录）
使用标签跳出循环":" 测试跳出函数的标签 ` var i = prompt("输入一个数字",0); aa: for(var j=2; j<=i ; j++){ for(var a=2;a<j;a++){ if(j%a==0)continue aa; //跳过该次循环,并向上找到标签aa,在aa处执行。 } console.log(j,a); alert(j); }` 使用标签可以跳出多层循环,没有标
2020-06-10 23:26:40
104
原创 15天前端学习-第七天（个人记录）
JS prompt(用户看到的提示,输入(初始输入值)) 这个函数可以用来弹出提示输入框,取消输入返回null。返回用户输入文本. 例: var age = (“你多少岁?”,"");参数二为空则没有初始输入值, age将接受参数二输入的值。 confirm(问题), :弹出一个提问框,点确定返回true,取消返回false; 例:var a = confirm(“是本人?”); 确定 a=true 取消 a=false; 非空字符串的值为true 如if(“0”){…} 该值为true 今天看了几节JS的
2020-06-09 23:46:54
92
原创 15天前端学习-第六天（个人记录）
今天找到了一个在github上的JS翻译教程,看起来似乎还可以。 对于我之前看过的一些JS的知识，我应该快速的过一遍比较好，毕竟只是理论看的多。 JS BigInt 类型可以用于表示任意长度的整数,通过将n加到整数字段的末尾来创建。如a = 123n； ``返单引号可以用来将变量或表达式（会被计算）包装在${}嵌入到字符串中。直接用单引号引起来,或者字符串加"+"连接符。 undefined通常用来检测是否赋值等类似的操作,null则作为空,未知作为值写入变量中. typeof(值)用于检测值的类型 ty
2020-06-08 22:44:40
87
原创 15天前端学习-第五天（个人记录）
perspective能做3D的效果，(元素与视图的距离)可以理解为深度，其值为像素。(值越大幅度约小) transform-style: preserve-3d;3D三维空间 写在perspective里层 transform-origin: center center -50px;(值1:x轴,值2:y轴,值3:z轴(不支持center)) 制作立方体主要是对,立方体几个面的理解以及移动,对折,翻转各方向移动变化的理解. 翻转 前移 翻转与前移的代码 <style>
2020-06-07 21:43:00
148
原创 15天前端学习-第四天（个人记录）
animation动画 anmimation-name:动画名(自定义) animation-duration动画持续时间 animation-delay:动画延迟时间 animation-iteration-count:动画重复次数,默认1,infinite无限. animation-timing-function动画运动形式 animation:动画名 时间 次数 运动形式 动画名通过@keyframes 名{}定义 在keyf里定义运动的过程 .loading{width: 40px;hei
2020-06-06 20:34:41
161
原创 15天前端学习-第三天(个人记录)
15天前端学习-第三天(个人记录) from表单美化 label标签 用于给表单元素辅助,比如点击label元素,复选框选中.(浏览器焦点转移到相关控件) label input(标签元素):checked{}伪类 在控件选中时触发 ,可以配合div,图片定位美化checkbox的样式. (需要先对input元素进行隐藏display:none) 也可以用div+透明度opacity做一个障眼法…(就是控件透明覆盖在div背景图上) 总结:利用label可以隐藏原先的input样式,并使用图片,当label
2020-06-05 19:44:43
146
原创 15天前端学习-第二天(个人记录)
15天前端学习-第二天(个人记录) 1.文本用的标签 strong,b,em,i都是表示强调的标签,表现为文本加粗,斜体 strong和b相似 em和i相似 区别在与Strong和em具备语义化 b,i不具备语义化 可以用于简化选择器的操作 blockquote:引用大段的段落解释 q:引用小段的短语解释 abbr:缩写或首字母缩略词 address:引用文档地址信息 cite :引用著作的标题 ruby和rt嵌套可以实现文字拼音注解 bdo可以让文字反向排列 反向排列也可以用css实现(可能能用于
2020-06-04 22:47:05
153
原创 15天前端学习-第一天(个人记录)
15天前端学习-第一天(个人记录) 为更好的总结和理解所学的知识，我决定连续十五天记录我所学习的前端知识。 今天跟着教程做了一个页面,发现之前学的一些知识,没能很好的理解和串联起来. 结构伪类选择器：:nth-of-type(n) 选中同级同类型的第n个元素 在写样式时用于选中需要写特殊样式的元素 页面中展示类的图片用img 基本不改动的图可以用背景图 在使用浮动时,最好写一个清除浮动的样式:after伪类 {display:block clear:both},写页面的时候,发现设置margin-top
2020-06-03 23:17:31
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人