诗风乐雨-CSDN博客

原创关键帧动画

1.关键帧动画 animation 属性是一个简写属性，用于设置六个动画属性： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count 值描述 animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画

2022-04-19 11:13:11 225

原创雪碧图和字体图标

1.背景图片<!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=1.0" /> ...

2022-04-19 11:12:21 204

原创 Tab切换示例

1.Tab切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=egde"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> ...

2022-04-19 11:11:12 90

原创定位知识总结

1.伪元素元素的特殊位置 ::before ::after ::first-line ::first-letter 2.伪类 :hover :active :visited :link 3.定位相对定位 3.1相对定位 1.1 参考点：元素自身在文档流中的位置 1.2 是否脱离文档流：无 1.3 默认位置：原来文档流中的位置 1.4 层级会默认提升可以使用 z-index 调整 1.5 使用场景：

2022-04-19 11:09:47 91

原创浮动知识总结

1.块的居中.box{ height: 100px; width: 100px; background-color: red; margin: 0 auto; }span{ /* 定宽居中对行元素无效 */ width: 1000px; margin: 0 auto;}2.行内块和行元素<!DOCTYPE html&...

2022-04-19 11:08:57 108

原创文档流盒模型

1 文档流浏览器会根据元素的排列方式块元素从上到下排列行元素和行内块从左到右排列如果空间不足，自动换行我们称之为流式布局 2 盒模型2.1 块元素常用设置/*设置元素的宽度*/width: 100px;/*设置元素的高度*/height: 100px;/*设置元素的背景颜色*//*颜色：1、直接对*应英文字母2、rgb（red，green，blue）（0-255）3、十六进制*/bac...

2022-04-19 11:07:51 78

原创 css基础入门

1 标签的分类1.块元素 block ：独占一行，可设置宽高2.行元素 inline ：不独占一行，设置宽高无效3.行内块元素 inline—block ：不独占一行，可设置宽高2 css三种引用方式1.内联式（行内样式）:<div style="color:red;">hello</div>2.内嵌式 <style> div{font-family:"楷体"; }</style>3.外引式 <link rel="styles

2022-04-19 11:06:45 129

原创前端入门学习

1.常用的一些标签1.1 web前端学习三个方面 1 html （超文本标记语言 2 css cascading style sheet 层叠样式表 3 js javascript 1.2 超链接跳转页面<img src="星空.jpeg"alt="kanbuqing">、<img src="https://img2.woyaogexing.com/2020/01/13/ee67006a42b844e58a9df036de3d241d!12..

2022-04-19 11:05:08 64

原创数组与字符串方法异同

1.字符串与数组共有的方法：1.concat(str1,str2,str3....) 2.indexOf(value),lastIndexOf(value) 3.slice(start,end) 4.includes(searchElement,fromIndex)//从哪里开始搜索字符串\数组元素是否存在，返回true和false2.数组独有的方法：1.push(arr[i]...)//返回数组长度{2.pop(arr[i])//返回删除的字符3.unshift...

2022-04-19 11:02:33 116

原创 js方法总结

1.输出/* 1.输出 */ alert("Hello js!");//弹出警告框 document.write("hello js!");//将内容写到HTML文档中 document.getElementById("header1").innerHTML = "真标题";//写入HTML元素 console.log("这是控制台！");//写入浏览器控制台2.函数function name(传参) { ...

2022-04-19 11:01:28 267

原创 JavaScript 循环练习

<!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=1.0" /> <title>Doc.

2022-03-18 21:49:20 1107

原创 javaScript 变量提升，练习总结

f1();//20var f1 = function () { console.log(10);}function f1() { console.log(20);}f1();/* 执行后输出(运行)2010*/错误：变量为undefined 使用函数推测;先变量提升，函数后提升var x = 30;function test() { console.log(x); var x = 10; console.log(x); x = 20; .

2022-03-18 21:42:37 834 1

原创数字转罗马数字

新手上路！欢迎指点！罗马数字包含以下七种字符: I， V， X， L，C，D 和 M。字符数值 I 1 V 5 X 10 L 50 C 100 D 500 M ...

2022-03-13 22:04:36 412

qq_45119312的博客