CSS 属性:
1. border-radius:通过设置圆角半径,可以使元素的边框变为圆角。
2. box-shadow:可以添加阴影效果到元素上。可以指定阴影的颜色、位置、模糊半径和扩展半径。
3. linear-gradient:可以创建线性渐变背景。可以指定起始和结束颜色,以及渐变方向。
4. radial-gradient:可以创建径向渐变背景。可以指定中心颜色、扩展半径和渐变方向。
5. transform:可以对元素进行变换,如平移、缩放、旋转和倾斜等。
6. clip-path:可以裁剪元素的形状。可以使用CSS形状函数或SVG路径来定义裁剪路径。
7. ::before 和 ::after 伪元素:可以在元素的内容之前或之后插入内容,并使用CSS样式对其进行美化。
8. position 和 z-index:可以控制元素的位置和层级关系。position属性可以设置为absolute、relative、fixed等值来确定元素的定位方式;z-index属性可以指定元素的层级关系。
9. CSS形状函数(如polygon()、circle()、ellipse()等):可以使用这些函数来创建不规则的形状。
10. @keyframes`动画:可以使用@keyframes关键字定义动画的关键帧,并通过animation属性应用动画。
下面是一个CSS示例动画展示:
代码展示:
<style>
.f{
width: 600px;
height: 600px;
border: 1px solid rebeccapurple;
position: relative;
}
.z{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
animation-name: move1;
animation-duration: 2s;
animation-delay: 0.1s;
animation-iteration-count: 3;
animation-timing-function: linear;
animation-direction: alternate;
animation-fill-mode: forwards;
}
@keyframes move1{
0%{
top:0;
left: 0;
}
25%{
top:0;
left: 500px;
}
50%{
top: 500px;
left: 500px;
}
75%{
top: 500px;
left: 0px;
}
100%{
top: 0;
left: 0;
}
}
</style>
<body>
<div class="f">
<div class="z"></div>
</div>
</body>
以上是css的一些重要知识点
JavaScript(简称JS)是一种广泛应用于Web开发的脚本语言,用于为网页添加交互性和动态功能。以下是JavaScript的一些重要知识点总结:
1. 数据类型:JavaScript有七种基本数据类型:String(字符串)、Number(数字)、Boolean(布尔值)、Null(空值)、Undefined(未定义)、Symbol(符号)和 Object(对象)。
2. 变量和常量:使用var、let或const来声明变量和常量。变量是可以被重新赋值的,而常量是一旦赋值就不能被修改的。
3. 运算符:JavaScript支持各种数学和逻辑运算符,例如加减乘除、比较和逻辑运算符等。
4. 控制流程:使用if-else语句、switch语句和循环语句(如for循环和while循环)来控制程序的执行流程。
5. 函数:函数是一段可重复使用的代码块,用于封装一些特定的操作。可以使用function关键字定义函数,也可以使用箭头函数。
//重复出现代码封装一个函数
function createTab(arr){
let s = ''
arr.forEach((e) => {
s += `<tr>
<td>${e.id}</td>
<td>${e.name}</td>
<td>${e.age}</td>
<td>${e.money}</td>
</tr>`
})
tr1.innerHTML = s
}
6. 对象:JavaScript是一门面向对象的语言,对象是由属性和方法组成的集合。可以使用对象字面量、构造函数或类来创建对象。
7. 数组:数组是一个有序的数据集合,可以包含任意的数据类型。可以通过索引来访问数组中的元素,并使用一系列的数组方法对数组进行操作。
let arr1 = [
{
id: 1,
name: '高启强',
age: 36,
money: 2000000
}, {
id: 2,
name: '高启盛',
age: 36,
money: 1000000
}, {
id: 3,
name: '唐小龙',
age: 36,
money: 50000
},
{
id: 4,
name: '唐小虎',
age: 36,
money: 30000
},
{
id: 5,
name: '陈泰',
age: 36,
money: 600000
}, {
id: 6,
name: '老莫',
age: 36,
money: 20000
}
]
8. DOM操作:JavaScript可通过Document Object Model(DOM)来操作HTML文档。可以使用getElementById、querySelector等方法来选择元素,并使用添加、删除、修改元素的属性和内容等操作。
let tr1 = document.getElementById('tr1');
9. 事件处理:JavaScript可以通过事件处理程序来响应用户的交互动作,例如点击、输入等。可以使用addEventListener方法来注册事件,并编写对应的事件处理函数。
总结:以上是JavaScript的一些重要知识点 JavaScript是一种常用的脚本语言,主要用于Web开发,为网页添加交互性和动态功能。它有七种基本数据类型,包括字符串、数字、布尔值、空值、未定义、符号和对象。JavaScript支持各种运算符、控制流程、函数、对象和数组操作。通过Document Object Model(DOM)可以操作HTML文档,通过事件处理程序响应用户的交互动作。还可以使用异步编程实现非阻塞操作。JavaScript是一门灵活的语言,还有许多其他的知识和特性需要掌握。