css核心知识，布局的定位和css动画，以及JavaScript中的dom操作的回顾

小心你的脚踝

已于 2023-07-04 22:43:12 修改

阅读量64

点赞数 2

文章标签： css 前端 javascript 开发语言

于 2023-07-04 22:40:13 首次发布

本文链接：https://blog.csdn.net/m0_73575951/article/details/131532178

版权

文章目录

概要

暑期在厚溥学习的第二天，主要复习了css以及JavaScript的基础知识。

整体架构流程

主要复习了css定位布局和css动画以及JavaScript数据类型和变量的回顾，数组的回顾，还有dom操作。

技术名词解释

css的定位布局及实例
css动画基础学习及实例
JavaScript数据类型和变量的回顾
JavaScript数组和函数的复习
JavaScript-dom操作的解释以及实例

技术细节

css的定位布局及实例

 子绝  父相   ,所有子元素默认初始位置在左上顶点 通过left和top控制x轴和y轴距离

    <style>
        div{
            /*width: 300px;*/
            /*height: 300px;*/
            /*border:1px solid rebeccapurple;*/
        }
            /*float: left;*/
            /*子绝  父相   ,所有子元素默认初始位置在左上顶点 通过left和top控制x轴和y轴距离*/
        .fu{
            width: 300px;
            height: 300px;
            position: relative;
        }
        .z1,.z2,.z3,.z4{
            position: absolute;
        }
        .z1{
            width: 300px;
            height: 300px;
            top: 300px;
            left: 200px;
            background-color: black;
            border-radius: 50%;
        }
        .z2{
            width: 300px;
            height: 300px;
            top: 200px;
            left: 300px;
            background-color: black;
            transform: rotate(45deg);
        }
        .z3{
            width: 300px;
            height: 300px;
            top: 300px;
            left: 400px;
            background-color: black;
            border-radius: 50%;

        }
        .z4{
            width:75px;
            height:120px;
            top: 440px;
            left: 365px;
            border-bottom: 150px solid black;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
    <div class="z4"></div>
</div>

运行结果如下：

css动画基础学习及实例

使用了css布局和动画的结合使用，编写出会旋转的八卦阵

    <style>
        body{
            background-color: gainsboro;
        }
        .fu{
            width:500px;
            height: 500px;
            position: relative;
            animation: circles 2s linear infinite;
        }

        .fu>div{
            position: absolute;
        }
        .z1{
            width:250px;
            height: 500px;
            background-color:white;
            border-radius: 250px 0px 0px 250px;
        }
        .z2 {
            width: 250px;
            height: 500px;
            background-color: black;
            border-radius: 0px 250px 250px 0px;
            left: 250px;
        }
        .z3 {
            width: 250px;
            height: 250px;
            background-color: black;
            border-radius: 50%;
            left: 125px;
            z-index: 1;
        }
        .z4 {
            width: 250px;
            height: 250px;
            background-color: white;
            border-radius: 50%;
            left: 125px;
            top: 250px;
            z-index: 1;
        }
        .z5 {
            width: 80px;
            height: 80px;
            background-color: white;
            border-radius: 50%;
            left: 200px;
            top: 85px;
            z-index: 2;
        }
        .z6 {
            width: 80px;
            height: 80px;
            background-color: black;
            border-radius: 50%;
            left: 200px;
            top: 335px;
            z-index: 2;
        }
        @keyframes circles {
            from{
                transform:rotate(0deg);
            }to{
            transform:rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
    <div class="z4"></div>
    <div class="z5"></div>
    <div class="z6"></div>
</div>
</body>

运行结果图：

JavaScript数据类型和变量的回顾

 number类型的变量，在需要转换成boolean类型时，如果值为0或者NaN，则转换成false，否则为true
 string类型的变量，在需要转换成boolean时，如果值为''空字符串，则转换成false，否则为true
 null和undefined都会转换成false

JavaScript数组和函数的复习

数组大致可以分为简单数组和复杂数组：

简单数组

//1.简单数组
let arr1=[1,2,3,true,null,undefined,null]
console.log(arr1.length)

复杂数组

//2.复杂的数组
let arr2 = [
    {id:1,name:'曹操',age:36},
    {id:2,name:'刘备',age:34},
    {id:3,name:'孙权',age:30},
]

复杂数组的遍历：

//数组的遍历
arr2.forEach(function (e,i){
    console.log(e,i)
})
//简化为  箭头函数的表现形式
arr2.forEach((e,i)=>{
    console.log(e,i)
})

数组的筛选：

//4。数组的筛选,原数组不会被改变，筛选出来的结果返回到新数组中
let arr3 = arr2.filter((e,i)=>{
    return e.age<35
})
console.log(arr3)

函数

//函数的2种常用的定义方式
function f1(){
    console.log('f1函数')
}
let f2=function (){//匿名2函数
    console.log('f2函数')
}
console.log(arr1)
console.log(arr2)

JavaScript-dom操作的解释以及实例

解释：
和html交互
1.获取html标签，返回一个元素对象
2.设置值

<body>
    <p>
        什么是dom操作？和html交互
        1.获取html标签，返回一个元素对象
        2.设置值
    </p>
    <input id="inp1" type="text" value="aa">
    <ul id="ul1">
        <li>1-a-12</li>
        <li>2-b-13</li>
        <li>3-c-14</li>
    </ul>
    <button οnclick="changeText()">替换按钮</button>
    <!--<ul>
        <li>onclick属性表示一个点击事件属性</li>
        <li>onclick属性值是一个函数名称()</li>
        <li>表示，一旦点击该按钮，就调用一个函数</li>
    </ul>-->
</body>
<script>

    //一.单个的设置
    //1.获取
    let inp1 = document.getElementById('inp1')
    //2.设置值
    inp1.value='曹操'

    //二.批量的设置
    let arr2 = [
        {id:1,name:'曹操',age:36},
        {id:2,name:'刘备',age:34},
        {id:3,name:'孙权',age:30},
    ]
    //1.获取 ul
    let ul1 = document.getElementById('ul1')
    function changeText(){
        //2.替换
        let s=''
        arr2.forEach((e)=>{
            s+=`<li>${e.id}-${e.name}-${e.age}</li>`
        })
        ul1.innerHTML=s
    }
</script>

小结

CSS动画和JavaScript是在网页开发中常用的技术，它们可以为网页增添生动的效果和交互性。

学习CSS动画：

熟悉基础知识：了解CSS过渡（transition）和关键帧动画（keyframes animation）的基本概念和用法。
选择合适的属性和数值：掌握CSS属性如transform、opacity等的使用，以及关键帧动画中百分比值的意义。
使用合适的时机和触发方式：根据用户行为或特定的事件来触发CSS动画，例如鼠标悬停、点击按钮等。
调试和优化：运行和调试CSS动画，确保效果流畅，避免性能问题。可以使用浏览器开发者工具进行调试。

学习JavaScript：

掌握基础语法：了解JavaScript的数据类型、变量、函数、条件语句、循环等基本语法元素。
DOM操作：学习如何通过JavaScript获取和修改HTML文档中的元素，实现动态交互效果。

通过不断地学习和实践，你将能够掌握CSS动画和JavaScript的技能，并运用它们创建出吸引人的网页效果和丰富的用户交互体验。

小心你的脚踝

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css核心知识，布局的定位和css动画，以及JavaScript中的dom操作的回顾

通过不断地学习和实践，你将能够掌握CSS动画和JavaScript的技能，并运用它们创建出吸引人的网页效果和丰富的用户交互体验。string类型的变量，在需要转换成boolean时，如果值为''空字符串，则转换成false，否则为true。{id:1,name:'曹操',age:36},{id:2,name:'刘备',age:34},{id:3,name:'孙权',age:30},{id:1,name:'曹操',age:36},{id:3,name:'孙权',age:30},
复制链接

扫一扫