前端学习
文章平均质量分 56
记录自己的前端学习过程
Zhu_S W
这个作者很懒,什么都没留下…
展开
-
JS DOM操作
方法调用和交互相关部分常用事件:onclick 鼠标单击ondblclick 鼠标双击onmouseenter 鼠标放上去onmouseleave 鼠标拿走。原创 2024-06-04 22:34:16 · 821 阅读 · 0 评论 -
JS常用引入方式和变量类型
var a;var申明变量的关键字,没有其他意义 a是变量名变量定义不区分类型,但是用的时候有类型。原创 2024-05-19 16:11:10 · 332 阅读 · 1 评论 -
CSS变形实例—奥运五环
【代码】CSS变形实例—奥运五环。原创 2024-05-18 20:26:09 · 207 阅读 · 0 评论 -
CSS变形(2)
transform-origin 属性值可以是百分比,px...等具体的值,也可以是top bottom left right等关键词。backface-visibility (作用在具体元素身上)transform-style (作用在父级元素上)perspective (作用在父级元素上)作用:在3d空间正确呈现元素遮挡等嵌套关系。preserve-3d子元素保留3d位置。flat不保留子元素的3d位置。hidden 背面不可见。visible 背面可见。原创 2024-05-18 19:59:38 · 209 阅读 · 0 评论 -
CSS变形实例—影子效果
【代码】CSS变形实例—影子效果。原创 2024-05-18 19:38:06 · 122 阅读 · 0 评论 -
CSS变形(1)
表示元素沿x轴移动tx的距离,沿y轴移动ty的距离 ([]中ty可以省略,省略了ty默认为0,表明沿y轴没有任何移动) (注:x轴向右为正方形,y轴向下为正方向,y轴正方向不要弄错了)scale3d(sx,sy,sz) 元素沿x轴方向的缩放比为sx,沿y轴方向的缩放比为sy,沿z轴方向的缩放比为sz。translate3d(tx,ty,tz) 元素沿x轴移动tx的距离,沿y轴移动ty的距离,沿z轴移动tz的距离。scaleY(sy) 元素沿y轴方向的缩放比为sy。原创 2024-05-18 17:52:46 · 293 阅读 · 0 评论 -
CSS动画实例—流动的水滴
【代码】CSS动画实例—流动的水滴。原创 2024-05-18 16:41:40 · 373 阅读 · 0 评论 -
CSS动画
由a逐渐向b去靠拢对html元素哪个属性进行处理过度动画持续时间指定变化速度linear:线性速度ease:开始较慢,然后加速,速度达到最快再减速(由慢到快再到慢)ease-in:由慢到快ease-out:由快到慢。原创 2024-05-18 15:35:38 · 606 阅读 · 0 评论 -
CSS响应式布局
响应式布局。原创 2024-05-18 11:16:27 · 134 阅读 · 0 评论 -
CSS单位和字体
厘米(cm)毫米(mm)英寸(in)像素(px)百分比(%)em(相对于父级元素字体大小)rem(相对于根元素的字体大小)vw(相对于视口宽度的百分比)vh(相对于视口高度的百分比)vmin(相对于视口宽度和高度中较小一方的百分比)vmax(相对于视口宽度和高度中较大一方的百分比)deg是角度单位,0deg代表12点方向,角度值代表顺时针转过的角度。原创 2024-05-18 10:04:25 · 165 阅读 · 0 评论 -
CSS选择器
规则三:同级别同长度下,css代码按顺序执行,后边的代码会把前边的代码覆盖掉(同一样式覆盖,不同样式效果叠加)div[id^=xx]有id属性,且id属性值以xx开头的div元素。div[id$=xx]有id属性,且id属性值以xx结尾的div元素。div[id*=xx]有id属性,且id属性值包含xx的div元素。div[id=xx]有id属性,且id属性值为xx的div元素。也可以放表达式,例如:2n+1、3n+2... n从0开始。也可以放表达式,例如:2n+1、3n+2... n从0开始。原创 2024-05-18 00:42:55 · 891 阅读 · 0 评论 -
一些css美化手段
代表静态模式,常态模式,具有static的元素忽略其他定位属性,如top、right、bottom或left。父级使用相对模式 子集使用绝对模式:子集随浏览器的滚动而滚动,释放掉子集原来的空间,参考物是父亲。代表相对模式 随着浏览器的滚动而滚动 保留自己原来的空间 参考物是自己原来的位置。代表绝对模式 随着浏览器的滚动而滚动 释放掉自己原来的空间 参考物是浏览器。例:border-top-left-radius:30px;原创 2024-05-12 22:09:53 · 202 阅读 · 0 评论 -
背景相关的样式
控制背景图片是否平铺,其值:repeat(平铺) no-repeat(不平铺) repeat-x(只横向平铺) repeat-y(只纵向平铺)background-position:center center;(居中显示,两个都是center时可以删除一个)用于设置背景图片 使用url()函数制定图片地址 (当背景图片和背景颜色同时出现时,背景图片会把背景颜色覆盖掉)例: background-position:30px 90px;控制背景图片不随浏览器的滚动而滚动。初始默认值为repeat。原创 2024-05-12 17:53:41 · 246 阅读 · 0 评论 -
颜色的表示方式
0deg表示从下到上渐变,90deg表示从左往右渐变,180deg表示从上往下渐变,270deg表示从右往左渐变。如果前两位一样,中间两位一样,最后两位一样,即两位数前后相同的情况下,则可以用三位六进制表示,例如:#rgba(red,green,blue,alpha) 三原色混合原理,取值范围0~255。补充:背景颜色透明opactity(取值范围:0~1),对整个html元素设置透明度。取值范围:0~f(三原色混合原理 红色,绿色,蓝色)前两位表示红光,中间两位表示绿光,最后两位表示蓝光。原创 2024-05-12 17:49:54 · 563 阅读 · 0 评论 -
CSS布局
需要横向布局的元素添加float属性 其值left(左浮动) right(右浮动)存在的问题:使用float之后,所在的父级元素如果没有高度,会导致下方的元素向上移动,产生多重元素重合的问题解决方法:①给父亲元素设置高度,如height:100px;(不推荐)②给父亲元素设置overflow:hidden;达到父级高度随自己高度自适应的效果(推荐 使用)无法解决的问题:①元素之间的间距均匀分布需要计算,而且不一定能够均匀分布。原创 2024-05-12 16:50:23 · 572 阅读 · 0 评论 -
了解盒子模型
1、块级元素(标签,盒子) 特点:独占一行,对宽度高度支持 举例:div p h1~h6 ul li display:block;3、内联块级元素(标签,盒子) 特点:不独占一行,对宽度高度支持 距离:img input display:inline-block;2、内联级元素(标签,盒子) 特点:不独占一行,对宽度高度不支持 举例:span a display:inline;4、弹性盒子 特点:默认不管父级元素能不能放下子元素们,子元素都横着布局。从上开始,顺时针旋转。原创 2024-05-12 12:04:42 · 582 阅读 · 0 评论