HTML+CSS+JS制作圣诞祝福网页教程(附源码)

thbcm阅读(320)

简介

在这个教程中,我们将学习如何使用HTML、CSS和JavaScript来创建一个充满节日气氛的圣诞祝福网页。这个网页将包括一个动态的圣诞树、飘落的雪花和闪烁的装饰物,以及一个显示“圣诞快乐!”的消息。

准备工作

在开始之前,请确保你有基本的HTML、CSS和JavaScript知识。你将需要一个文本编辑器来编写代码,比如Notepad++、Sublime Text、Visual Studio Code,或者免费AI编程助手豆包 MarsCode。

如果你不具备这些基础请移步 ——&《前端开发:零基础入门到项目实战》

步骤1:创建HTML结构

首先,我们需要创建网页的基本结构。打开你的文本编辑器,输入以下代码:

<!DOCTYPE HTML>
<html>
<head>
    <title>圣诞祝福 - 编程狮(w3cschool.cn)</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="app">
        <!-- 圣诞树将在这里 -->
    </div>
    <div class="message">圣诞快乐!</div> <!-- 消息文本 -->
</body>
</html>

这段代码定义了网页的标题、字符集和基本的HTML结构。

步骤2:添加CSS样式

接下来,我们将添加CSS来设计网页的外观。在<head>标签内添加<style>标签,并输入以下代码:

/* 设置整个页面的基本样式 */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: #000;
    overflow: hidden;
    position: relative;
}


/* 应用程序容器的样式 */
.app {
    text-align: center;
    margin: 10px;
}


/* 圣诞树的样式 */
.christmas-tree {
    position: absolute;
    width: 200px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* 圣诞树枝干的通用样式 */
.christmas-tree .branch {
    position: absolute;
    background-color: #008000;
    border-radius: 50% 50% 0 0;
}


/* 圣诞树树干的样式 */
.christmas-tree .trunk {
    width: 40px;
    height: 80px;
    background-color: #8B4513;
    position: absolute;
    bottom: 0;
    left: 80px;
    border-radius: 5px;
}


/* 圣诞树星星的样式 */
.christmas-tree .star {
    position: absolute;
    top: -20px;
    left: 80px;
    width: 40px;
    height: 40px;
    background-color: gold;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: star-twinkle 2s infinite alternate;
}


/* 圣诞树装饰物的样式 */
.christmas-tree .ornament {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    animation: ornament-twinkle 2s infinite alternate;
}


/* 消息文本的样式 */
.message {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 48px;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 10px white;
    animation: fadeInOut 4s infinite;
}


/* 雪花效果 */
.snowflake {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: fall linear infinite;
}


/* 动画 */
@keyframes star-twinkle {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}


@keyframes ornament-twinkle {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}


@keyframes fall {
    0% { top: -10px; opacity: 0.8; }
    100% { top: 100vh; opacity: 0; }
}


@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

这段代码定义了网页的所有视觉元素,包括圣诞树、装饰物、星星、雪花和消息文本的样式。

步骤3:构建圣诞树

在<div class="app">内添加圣诞树的结构:

<div class="christmas-tree">
    <div class="branch top"></div> <!-- 顶部枝干 -->
    <div class="branch middle"></div> <!-- 中部枝干 -->
    <div class="branch bottom"></div> <!-- 底部枝干 -->
    <div class="trunk"></div> <!-- 树干 -->
    <div class="star"></div> <!-- 星星 -->
    <div class="ornament" style="top: 60px; left: 60px;"></div> <!-- 装饰物1 -->
    <div class="ornament" style="top: 100px; left: 140px;"></div> <!-- 装饰物2 -->
    <div class="ornament" style="top: 140px; left: 100px;"></div> <!-- 装饰物3 -->
    <div class="ornament" style="top: 180px; left: 180px;"></div> <!-- 装饰物4 -->
    <div class="ornament" style="top: 220px; left: 20px;"></div> <!-- 装饰物5 -->
</div>

这段代码定义了圣诞树的各个部分,包括枝干、树干、星星和装饰物。

步骤4:添加 JavaScript

最后,我们需要添加一些 JavaScript 代码来创建飘落的雪花效果。在</body>标签之前添加以下代码:

<script>
    // 创建雪花
    function createSnowflakes(num) {
        for (let i = 0; i < num; i++) {
            const snowflake = document.createElement('div'); // 创建一个 div 元素
            snowflake.classList.add('snowflake'); // 添加雪花类
            snowflake.style.left = Math.random() * 100 + 'vw'; // 随机水平位置
            snowflake.style.animationDuration = Math.random() * 2 + 3 + 's'; // 随机动画持续时间
            document.body.appendChild(snowflake); // 将雪花添加到页面
        }
    }


    // 调用函数创建雪花
    createSnowflakes(100);
</script>

这段代码将创建100个雪花,并随机分布在页面上,模拟雪花飘落的效果。

完成

现在,你已经完成了圣诞祝福网页的制作。将你的代码保存为.html文件,然后用浏览器打开它,你就可以看到一个充满节日气氛的圣诞树和飘落的雪花了。你可以根据自己的喜好调整样式和动画,创造一个独一无二的圣诞祝福网页。祝你编程愉快!

最后附上完整代码:

<!DOCTYPE HTML>
<html>


<head>
    <title>圣诞祝福 - 编程狮(w3cschool.cn)</title>
    <meta charset="utf-8">
    <style>
        /* 设置整个页面的基本样式 */
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            background: #000; /* 黑色背景 */
            overflow: hidden; /* 隐藏溢出内容 */
            position: relative; /* 使子元素可以相对于此元素定位 */
        }


        /* 应用程序容器的样式 */
        .app {
            text-align: center; /* 文本居中对齐 */
            margin: 10px; /* 外边距 */
        }


        /* 圣诞树的样式 */
        .christmas-tree {
            position: absolute; /* 绝对定位 */
            margin: 0; /* 没有外边距 */
            width: 200px; /* 宽度 */
            height: 300px; /* 高度 */
            top: 50%; /* 垂直居中 */
            left: 50%; /* 水平居中 */
            transform: translate(-50%, -50%); /* 精确居中 */
        }


        /* 圣诞树枝干的通用样式 */
        .christmas-tree .branch {
            position: absolute; /* 绝对定位 */
            background-color: #008000; /* 绿色背景 */
            border-radius: 50% 50% 0 0; /* 上半部分圆角 */
        }


        /* 顶部枝干的样式 */
        .christmas-tree .branch.top {
            width: 160px; /* 宽度 */
            height: 100px; /* 高度 */
            top: 0; /* 从顶部开始 */
            left: 20px; /* 从左边偏移 */
        }


        /* 中部枝干的样式 */
        .christmas-tree .branch.middle {
            width: 200px; /* 宽度 */
            height: 120px; /* 高度 */
            top: 100px; /* 从顶部偏移 */
            left: 0; /* 从左边开始 */
        }


        /* 底部枝干的样式 */
        .christmas-tree .branch.bottom {
            width: 240px; /* 宽度 */
            height: 140px; /* 高度 */
            top: 220px; /* 从顶部偏移 */
            left: -20px; /* 从左边偏移 */
        }


        /* 圣诞树树干的样式 */
        .christmas-tree .trunk {
            width: 40px; /* 宽度 */
            height: 80px; /* 高度 */
            background-color: #8B4513; /* 棕色背景 */
            position: absolute; /* 绝对定位 */
            bottom: 0; /* 从底部开始 */
            left: 80px; /* 从左边偏移 */
            border-radius: 5px; /* 圆角 */
        }


        /* 圣诞树星星的样式 */
        .christmas-tree .star {
            position: absolute; /* 绝对定位 */
            top: -20px; /* 从顶部偏移 */
            left: 80px; /* 从左边偏移 */
            width: 40px; /* 宽度 */
            height: 40px; /* 高度 */
            background-color: gold; /* 金色背景 */
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); /* 星星形状 */
            animation: star-twinkle 2s infinite alternate; /* 闪烁动画 */
        }


        /* 圣诞树装饰物的样式 */
        .christmas-tree .ornament {
            position: absolute; /* 绝对定位 */
            width: 20px; /* 宽度 */
            height: 20px; /* 高度 */
            background-color: red; /* 红色背景 */
            border-radius: 50%; /* 圆形 */
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* 发光效果 */
            animation: ornament-twinkle 2s infinite alternate; /* 闪烁动画 */
        }


        /* 星星闪烁动画 */
        @keyframes star-twinkle {
            0% {
                transform: scale(1); /* 初始大小 */
            }
            100% {
                transform: scale(1.2); /* 放大 */
            }
        }


        /* 装饰物闪烁动画 */
        @keyframes ornament-twinkle {
            0% {
                transform: scale(1); /* 初始大小 */
            }
            100% {
                transform: scale(1.2); /* 放大 */
            }
        }


        /* 雪花效果 */
        .snowflake {
            position: absolute; /* 绝对定位 */
            width: 10px; /* 宽度 */
            height: 10px; /* 高度 */
            background-color: white; /* 白色背景 */
            border-radius: 50%; /* 圆形 */
            opacity: 0.8; /* 透明度 */
            animation: fall linear infinite; /* 下落动画 */
        }


        /* 雪花下落动画 */
        @keyframes fall {
            0% {
                top: -10px; /* 从顶部开始 */
                opacity: 0.8; /* 透明度 */
            }
            100% {
                top: 100vh; /* 下落到屏幕底部 */
                opacity: 0; /* 透明度逐渐消失 */
            }
        }


        /* 消息文本的样式 */
        .message {
            position: absolute; /* 绝对定位 */
            top: 40%; /* 从顶部偏移 */
            left: 50%; /* 从左边偏移 */
            transform: translate(-50%, -50%); /* 精确居中 */
            color: white; /* 白色文字 */
            font-size: 48px; /* 字体大小 */
            font-family: Arial, sans-serif; /* 字体 */
            text-shadow: 0 0 10px white; /* 发光效果 */
            animation: fadeInOut 4s infinite; /* 渐隐渐现动画 */
        }


        /* 消息文本渐隐渐现动画 */
        @keyframes fadeInOut {
            0%, 100% {
                opacity: 0; /* 完全透明 */
            }
            50% {
                opacity: 1; /* 完全不透明 */
            }
        }
    </style>
</head>


<body>
    <div class="app">
        <div class="christmas-tree">
            <div class="branch top"></div> <!-- 顶部枝干 -->
            <div class="branch middle"></div> <!-- 中部枝干 -->
            <div class="branch bottom"></div> <!-- 底部枝干 -->
            <div class="trunk"></div> <!-- 树干 -->
            <div class="star"></div> <!-- 星星 -->
            <div class="ornament" style="top: 60px; left: 60px;"></div> <!-- 装饰物1 -->
            <div class="ornament" style="top: 100px; left: 140px;"></div> <!-- 装饰物2 -->
            <div class="ornament" style="top: 140px; left: 100px;"></div> <!-- 装饰物3 -->
            <div class="ornament" style="top: 180px; left: 180px;"></div> <!-- 装饰物4 -->
            <div class="ornament" style="top: 220px; left: 20px;"></div> <!-- 装饰物5 -->
        </div>
    </div>


    <div class="message">圣诞快乐!</div> <!-- 消息文本 -->


    <script>
        // 创建雪花
        function createSnowflakes(num) {
            for (let i = 0; i < num; i++) {
                const snowflake = document.createElement('div'); // 创建一个 div 元素
                snowflake.classList.add('snowflake'); // 添加雪花类
                snowflake.style.left = Math.random() * 100 + 'vw'; // 随机水平位置
                snowflake.style.animationDuration = Math.random() * 2 + 3 + 's'; // 随机动画持续时间
                document.body.appendChild(snowflake); // 将雪花添加到页面
            }
        }


        // 调用函数创建雪花
        createSnowflakes(100);
    </script>
</body>


</html>

更多实例分享

学C++还是学Java?做软件研发需掌握哪些知识和技能?

thbcm阅读(392)

每年秋招,不少人对软件研发领域充满兴趣。

那么,在求职软件研发岗位时我们需要掌握哪些关键的知识和技能,软件研发行业的当前状况和未来趋势如何呢?

今天,我们一起来梳理这个问题,希望这能为正在高校学习的同学们,以及那些考虑转行的朋友们提供一些参考。

-PART 01-


学C++还是Java?


这个话题非常经典,许多人在职业规划时都会遇到类似的疑问。

根据我们在实际工作中的经验以及多年来的行业观察,Java和C++都是具有广阔前景的编程语言,它们各自都有着良好的就业机会。

在大型软件系统的构建中,无论是前端还是后端,Java和C++都扮演着不可或缺的角色。

例如,安卓客户端应用和后端的Web服务器通常使用Java来开发,而Windows客户端程序和许多后端业务服务器则多采用C++来实现。Java还是大数据、云计算以及云原生技术(如微服务)的主流开发语言。

在我们的日常生活中,许多安卓手机上的手机应用,如QQ、桌面版微信、腾讯会议、企业微信、飞书、钉钉、阿里旺旺客户端等,都是用Java开发的。而像Chrome浏览器这样的Windows客户端软件,则是通过C++来实现的。

因此,无论你选择C++还是Java,都能找到适合自己的舞台,发挥自己的才能。



-PART 02-


Java的应用领域与使用场景


随着移动互联网的蓬勃发展,移动APP已经成为众多IT企业争夺市场的重要领域。这给作为安卓APP开发语言的Java带来了新的生机和活力。

目前,Java是构建大型Web系统后台业务的首选语言,像淘宝和京东等大型电商平台的服务器端都是使用Java来实现的。

在大数据和云计算领域,许多知名的开源框架,如Hadoop、Spark和OpenStack,都是基于Java开发的,使得Java成为大数据开发者青睐的语言之一。此外,随着云原生和微服务等新兴技术和框架的出现,Java也成为这些领域的主要战场。

Java运行在虚拟机上,具有独特的跨平台特性,并且拥有完善的异常处理机制,它能在程序异常时抛出异常,并将异常信息输出到日志中,帮助开发者快速定位问题。

Java还以其近乎完美的封装和多种成熟的框架而著称,例如Hibernate、MyBatis、SpringMVC、SpringBoot和SpringCloud等微服务框架。

与C++相比,Java具有更完善的内存管理机制,避免了C++中复杂的指针操作,使得Java的学习门槛相对较低,这也是许多人选择Java的重要原因。

从当前在校学生的选择来看,确实有更多的人倾向于学习Java。近几年在招聘C++开发者时,应聘者的数量明显减少,相较于Java开发者的招聘难度更大。这种趋势反映了Java在当前技术教育和职业发展中的流行度和重要性。

-PART 03-


C++的应用领域与使用场景


C++语言以其强大的功能和灵活性,不仅在PC端客户端程序的开发上占据重要地位,而且在服务器程序和后台业务服务器的开发上也扮演着关键角色。这些系统往往对性能和效率有着极高的要求,因此C++成为了首选语言。

C++拥有丰富的开源生态系统,提供了各种功能的开源库,但在软件框架方面,C++可能没有Java那样成熟和通用的框架选择。

C/C++的执行效率非常接近汇编语言,因此在需要执行高效率代码或算法的服务器端业务中,C++往往是更优的选择。

当前,PC端的客户端程序大多数都是使用C++或其他语言(如C#)开发的,而Java在这一领域的应用已经较少。在人工智能、机器学习、计算机视觉与图像识别、自动驾驶等对运行性能要求极高的新兴技术领域,C++因其高效率而成为首选开发语言。

尽管Python在某些场景下非常流行,但在这些对性能要求极高的领域,Python的运行效率往往无法满足需求。

因此,在各种大型系统中,无论是前端还是后端,C++都有着广泛的应用场景和巨大的市场需求。C++不仅是一种用途广泛、市场认可度高的主流开发语言,而且在特定领域内,其优势和重要性尤为突出。



在构建一个大型系统时,后端服务或组件可能部分由Java编写,部分由C++构建,这两种语言相互交织,没有清晰的分界线。它们通过通信和协作来实现共同的目标。

决定将哪种编程语言作为主要学习和发展的方向,不仅取决于个人对语言本身的兴趣,还取决于对语言所支持的技术领域的兴趣。这是一个需要综合考量的决定。

CSS手绘圣诞老人教程 – 创造节日气氛的网页设计技巧(附源码)

thbcm阅读(379)

在这篇文章中,我们将学习如何使用CSS来手绘一个圣诞老人的卡通形象。这不仅是一个有趣的练习,也是提升你CSS技能的好机会。通过本教程,你将学会如何使用CSS变量、伪元素、动画和媒体查询来创建一个生动的圣诞老人形象。如果你对CSS还不够熟悉,不妨先浏览一下编程狮上的相关课程,这将为你打下坚实的基础。

效果图:

准备工作

在开始之前,请确保你有一个现代浏览器和一个代码编辑器。你可以直接在浏览器的开发者工具中尝试这些代码,或者创建一个HTML文件来保存你的代码。推荐使用免费AI编程助手——豆包 MarsCode,能大大提升我们的开发效率。

HTML结构

首先,我们需要创建一个HTML结构来作为圣诞老人形象的基础。我们将使用一个div元素作为画布,然后在这个画布中添加圣诞老人的各个部分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS手绘圣诞老人 - 编程狮(w3cschool.cn)</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="canvas" role="img" aria-label="一个站在雪地小山上的圣诞老人卡通形象。">
        <!-- 圣诞老人的各个部分 -->
        <div class="hand"></div><!-- 左手 -->
        <div class="hand"></div><!-- 右手 -->
        <div class="arms"></div><!-- 手臂 -->
        <div class="leg"></div> <!-- 左腿 -->
        <div class="leg"></div> <!-- 右腿 -->
        <div class="body"> <!-- 圣诞老人的身体 -->
            <div class="belt"></div> <!-- 圣诞老人的腰带 -->
        </div>
        <div class="beard"></div> <!-- 圣诞老人的胡子 -->
        <div class="head"> <!-- 圣诞老人的头部 -->
            <div class="cheek"></div><!-- 左脸颊 -->
            <div class="cheek"></div> <!-- 右脸颊 -->
            <div class="eye"></div> <!-- 左眼 -->
            <div class="eye"></div> <!-- 右眼 -->
            <div class="mustache"></div> <!-- 左小胡子 -->
            <div class="mustache"></div><!-- 右小胡子 -->
            <div class="hat"></div> <!-- 圣诞老人的帽子 -->
        </div>
    </div>
</body>
</html>

CSS样式

接下来,我们将使用CSS来定义圣诞老人的形象。我们将使用CSS变量来定义颜色,这使得我们能够轻松地更改颜色而不需要修改多个属性。

:root {
    --skin: PeachPuff;
    /* 圣诞老人皮肤颜色 */
    --eyes: Black;
    /* 圣诞老人眼睛颜色 */
    --cheeks: Salmon;
    /* 圣诞老人脸颊颜色 */
    --beard: GhostWhite;
    /* 圣诞老人胡子颜色 */
    --mustache: white;
    /* 圣诞老人小胡子颜色 */
    --suit: Tomato;
    /* 圣诞老人衣服颜色 */
    --belt: #363636;
    /* 圣诞老人腰带颜色 */
    --belt-buckle: gold;
    /* 圣诞老人腰带扣颜色 */
}

全局样式

我们设置背景为天蓝色,并添加雪花效果,以营造圣诞氛围。

body {
    background: SkyBlue;
    /* 背景颜色为天蓝色 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    background-image: radial-gradient(circle at 50% 50%, white 2.5%, transparent 0), radial-gradient(circle at 30% 90%, white 1.5%, transparent 0), radial-gradient(circle at 70% 10%, white 1%, transparent 0), radial-gradient(circle at 10% 40%, white 1%, transparent 0);
    /* 添加雪花背景效果 */
    background-size: 45vmin 35vmin, 50vmin 70vmin, 60vmin 50vmin, 65vmin 60vmin;
    /* 设置背景图像大小 */
    background-position: 0 0;
    /* 设置背景图像位置 */
    animation: snow infinite 7s linear;
    /* 添加雪花飘落动画 */
}

画布样式

我们将画布居中,并设置其大小和宽高比。

.canvas {
    width: 60vmin;
    /* 设置画布宽度 */
    aspect-ratio: 1;
    /* 设置画布宽高比为1:1 */
    position: absolute;
    /* 绝对定位 */
    top: 50%;
    /* 距离顶部50% */
    left: 50%;
    /* 距离左侧50% */
    transform: translate(-50%, -50%);
    /* 将画布居中 */
}
.canvas::before {
    content: "";
    /* 伪元素内容为空 */
    display: block;
    /* 显示为块级元素 */
    position: absolute;
    /* 绝对定位 */
    top: 90%;
    /* 距离顶部90% */
    left: 50%;
    /* 距离左侧50% */
    width: 200vmax;
    /* 设置宽度 */
    height: 200vmax;
    /* 设置高度 */
    background: white;
    /* 背景颜色为白色 */
    transform: translate(-50%, 0) rotate(1deg);
    /* 将伪元素居中并旋转1度 */
    border-radius: 100% / 20%;
    /* 设置椭圆形边框 */
}

圣诞老人形象

我们将使用多个div元素来构建圣诞老人的各个部分,包括头部、眼睛、脸颊、胡子、帽子、身体、腰带、手臂、手和腿。

/* 圣诞老人头部样式 */
.head {
    --positionX: 27%;
    /* 定义眼睛和脸颊的水平位置 */
    --positionY: 63%;
    /* 定义眼睛和脸颊的垂直位置 */
    position: absolute;
    /* 绝对定位 */
    top: 10%;
    /* 距离顶部10% */
    left: 50%;
    /* 距离左侧50% */
    border-radius: 50%;
    /* 设置圆形边框 */
    width: 25%;
    /* 设置宽度 */
    height: 25%;
    /* 设置高度 */
    transform: translate(-50%, 0);
    /* 将头部居中 */
    background: var(--skin);
    /* 设置背景颜色为皮肤色 */
        }


.eye {
    position: absolute;
    /* 绝对定位 */
    top: var(--positionY);
    /* 使用定义的垂直位置 */
    left: var(--positionX);
    /* 使用定义的水平位置 */
    width: 12%;
    /* 设置宽度 */
    height: 12%;
    /* 设置高度 */
    background: var(--eyes);
    /* 设置背景颜色为黑色 */
    border-radius: 50%;
    /* 设置圆形边框 */
    animation: blink 5s infinite linear;
    /* 添加眨眼动画 */
        }


.eye+.eye {
    left: auto;
    /* 取消之前的left属性 */
    right: var(--positionX);
    /* 设置右侧眼睛的位置 */
        }


.cheek {
    position: absolute;
    /* 绝对定位 */
    top: calc(var(--positionY) + 7%);
    /* 计算脸颊的垂直位置 */
    left: calc(var(--positionX) - 12%);
    /* 计算脸颊的水平位置 */
    width: 20%;
    /* 设置宽度 */
    height: 12%;
    /* 设置高度 */
    background: var(--cheeks);
    /* 设置背景颜色为脸颊色 */
    border-radius: 50%;
    /* 设置圆形边框 */
        }


.cheek+.cheek {
    left: auto;
    /* 取消之前的left属性 */
    right: calc(var(--positionX) - 12%);
    /* 设置右侧脸颊的位置 */
        }


        /* 圣诞老人胡须和小胡子样式 */
.beard {
    position: absolute;
    /* 绝对定位 */
    top: 10%;
    /* 距离顶部10% */
    left: 50%;
    /* 距离左侧50% */
    width: 30%;
    /* 设置宽度 */
    height: 40%;
    /* 设置高度 */
    background: var(--beard);
    /* 设置背景颜色为胡子色 */
    transform: translate(-50%, 0);
    /* 将胡须居中 */
    border-radius: 100% / 120% 120% 80% 80%;
    /* 设置不规则形状的边框 */
        }


.mustache {
    position: absolute;
    /* 绝对定位 */
    top: 88%;
    /* 距离顶部88% */
    left: 52%;
    /* 距离左侧52% */
    width: 40%;
    /* 设置宽度 */
    height: 40%;
    /* 设置高度 */
    background: var(--mustache);
    /* 设置背景颜色为小胡子色 */
    border-radius: 100% 10% 100% 0;
    /* 设置不规则形状的边框 */
    transform-origin: top right;
    /* 设置变换原点 */
    transform: translate(-100%, 0) rotate(25deg);
    /* 将小胡子向左旋转25度 */
    animation: moveMustache 7s infinite linear;
    /* 添加小胡子移动动画 */
        }


.mustache+.mustache {
    left: 48%;
    /* 设置左侧小胡子的位置 */
    border-radius: 10% 100% 0 100%;
    /* 设置不规则形状的边框 */
    transform-origin: top left;
    /* 设置变换原点 */
    transform: rotate(-25deg);
    /* 将小胡子向右旋转25度 */
    animation: moveMustache2 7s infinite linear;
    /* 添加小胡子移动动画 */
        }


        /* 圣诞老人帽子样式 */
.hat {
    position: absolute;
    /* 绝对定位 */
    width: 98%;
    /* 设置宽度 */
    height: 80%;
    /* 设置高度 */
    background: var(--suit);
    /* 设置背景颜色为衣服色 */
    border-radius: 100% 20% 0 0;
    /* 设置不规则形状的边框 */
    top: -40%;
    /* 距离顶部-40% */
    left: 50%;
    /* 距离左侧50% */
    transform: translate(-50%, 0) rotate(1deg);
    /* 将帽子居中并旋转1度 */
        }


.hat::before {
    content: "";
    /* 伪元素内容为空 */
    display: block;
    /* 显示为块级元素 */
    position: absolute;
    /* 绝对定位 */
    bottom: -17%;
    /* 距离底部-17% */
    left: -5%;
    /* 距离左侧-5% */
    width: 110%;
    /* 设置宽度 */
    height: 40%;
    /* 设置高度 */
    border-radius: 100% / 50%;
    /* 设置椭圆形边框 */
    transform: rotate(-2deg);
    /* 旋转-2度 */
    background: radial-gradient(200% 100% at 50% 100%, #0000 30%, var(--mustache) 31%);
    /* 设置径向渐变背景 */
        }


.hat::after {
    content: "";
    /* 伪元素内容为空 */
    display: block;
    /* 显示为块级元素 */
    position: absolute;
    /* 绝对定位 */
    right: -25%;
    /* 距离右侧-25% */
    top: -15%;
    /* 距离顶部-15% */
    width: 40%;
    /* 设置宽度 */
    aspect-ratio: 1;
    /* 设置宽高比为1:1 */
    border-radius: 50%;
    /* 设置圆形边框 */
    background: var(--beard);
    /* 设置背景颜色为胡子色 */
        }


        /* 圣诞老人身体样式 */
.body {
    position: absolute;
    /* 绝对定位 */
    top: 35%;
    /* 距离顶部35% */
    left: 50%;
    /* 距离左侧50% */
    width: 50%;
    /* 设置宽度 */
    height: 50%;
    /* 设置高度 */
    background: var(--suit);
    /* 设置背景颜色为衣服色 */
    border-radius: 100% / 150% 150% 25% 25%;
    /* 设置不规则形状的边框 */
    transform: translate(-50%, 0);
    /* 将身体居中 */
    background-image: radial-gradient(circle at 50% 36%, var(--belt) 2.75%, #0000 3%), radial-gradient(circle at 50% 48%, var(--belt) 3%, #0000 3.25%), radial-gradient(circle at 50% 60%, var(--belt) 2.75%, #0000 3%), radial-gradient(circle at 50% 90%, var(--belt) 2.25%, #0000 2.5%), radial-gradient(circle at 50% -50%, transparent 75%, var(--belt) 75.1% 83%, transparent 83.1%), linear-gradient(to right, transparent 42%, white 42.2% 57%, transparent 57.2%);
    /* 设置径向渐变背景和线性渐变背景 */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 51% 100%, 50% 96%, 49% 100%, 0% 100%);
    /* 设置裁剪路径 */
        }


.belt {
    position: absolute;
    /* 绝对定位 */
    top: 75%;
    /* 距离顶部75% */
    left: 50%;
    /* 距离左侧50% */
    transform: translate(-50%, -50%);
    /* 将腰带居中 */
    width: 23%;
    /* 设置宽度 */
    height: 15%;
    /* 设置高度 */
    background: linear-gradient(var(--belt-buckle) 0 0) 75% 50% / 25% 12% no-repeat, linear-gradient(var(--belt) 0 0) 50% 50% / 85% 80% no-repeat, var(--belt-buckle);
    /* 设置背景图像和背景颜色 */
        }


        /* 圣诞老人手臂样式 */
.arms {
    position: absolute;
    /* 绝对定位 */
    top: 37%;
    /* 距离顶部37% */
    left: 50%;
    /* 距离左侧50% */
    transform: translate(-50%, 0);
    /* 将手臂居中 */
    width: 65%;
    /* 设置宽度 */
    height: 40%;
    /* 设置高度 */
    background: OrangeRed;
    /* 设置背景颜色为橙红色 */
    border-radius: 100% / 170% 170% 25% 25%;
    /* 设置不规则形状的边框 */
    background-image: linear-gradient(transparent 20%, #0003);
    /* 设置线性渐变背景 */
}


.hand {
    --positionX: 18%;
    /* 定义手的水平位置 */
    position: absolute;
    /* 绝对定位 */
    top: 70%;
    /* 距离顶部70% */
    left: var(--positionX);
    /* 使用定义的水平位置 */
    width: 13%;
    /* 设置宽度 */
    height: 13%;
    /* 设置高度 */
    background: var(--belt);
    /* 设置背景颜色为腰带色 */
    border-radius: 50%;
    /* 设置圆形边框 */
}


.hand+.hand {
    left: auto;
    /* 取消之前的left属性 */
    right: var(--positionX);
    /* 设置右侧手的位置 */
}


/* 圣诞老人腿部样式 */
.leg {
    position: absolute;
    /* 绝对定位 */
    top: 75%;
    /* 距离顶部75% */
    left: 29%;
    /* 距离左侧29% */
    width: 19%;
    /* 设置宽度 */
    height: 25%;
    /* 设置高度 */
    background: var(--suit);
    /* 设置背景颜色为衣服色 */
    transform: skew(2deg);
    /* 斜切变形 */
    background-image: linear-gradient(#0002, transparent 70%, var(--belt) 0);
    /* 设置线性渐变背景 */
}


.leg+.leg {
    left: 52%;
    /* 设置右侧腿的位置 */
}


.leg::after {
    content: "";
    /* 伪元素内容为空 */
    display: block;
    /* 显示为块级元素 */
    position: absolute;
    /* 绝对定位 */
    bottom: 0;
    /* 距离底部0 */
    left: -6%;
    /* 距离左侧-6% */
    width: 110%;
    /* 设置宽度 */
    height: 20%;
    /* 设置高度 */
    background: black;
    /* 设置背景颜色为黑色 */
    border-radius: 50% / 100% 100% 0 0;
    /* 设置椭圆形边框 */
}

        
.leg+.leg::after {
    left: -4%;
    /* 设置右侧腿脚的位置 */
}

动画效果

为了让圣诞老人更加生动,我们添加了一些动画效果,如眨眼和胡子的微动。

/* 动画关键帧 */
/* 动画关键帧 */
@keyframes snow {
0% {
background-position: 0 0, 0 0, 0 0, 0 0;
/* 设置初始背景位置 */
}


40% {
background-position: 10px 14vmin, -20px 28vmin, 20px 20vmin, 10px 24vmin;
/* 设置40%时的背景位置 */
}


60% {
background-position: -10px 21vmin, -30px 42vmin, 30px 30vmin, 15px 36vmin;
/* 设置60%时的背景位置 */
}


100% {
background-position: 0 35vmin, 0 70vmin, 0 50vmin, 0 60vmin;
/* 设置100%时的背景位置 */
}
}


@keyframes blink {


0%,
6%,
100% {
height: 12%;
/* 设置眼睛的高度 */
}


3% {
height: 0%;
/* 设置眼睛的高度为0,模拟眨眼 */
}
}


@keyframes moveMustache {


0%,
40%,
44%,
100% {
transform: translate(-100%, 0) rotate(25deg);
/* 设置小胡子的初始和结束状态 */
}


42% {
transform: translate(-100%, 0) rotate(30deg);
/* 设置小胡子的中间状态 */
}
}


/* 定义名为 moveMustache2 的关键帧动画 */
@keyframes moveMustache2 {


/* 在 0%, 40%, 44%, 和 100% 的时间点上,将小胡子旋转 -25 度 */
0%,
40%,
44%,
100% {
transform: rotate(-25deg);
}


/* 在 42% 的时间点上,将小胡子旋转 -30 度 */
42% {
transform: rotate(-30deg);
}
}

媒体查询

为了适配偏好减少动画的用户,我们使用媒体查询来取消动画效果。

/* 媒体查询,适配偏好减少动画的用户 */
@media (prefers-reduced-motion) {


/* 如果用户偏好减少动画,则取消所有元素的动画效果 */
* {
animation: none !important;
}
}

最后看下完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<!-- 设置文档的语言为中文 -->


<head>
    <meta charset="UTF-8">
    <!-- 设置字符编码为UTF-8,确保支持多种字符 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置视口,使页面适应不同设备的屏幕 -->
    <title>CSS手绘圣诞老人 - 编程狮(w3cschool.cn)</title>
    <!-- 设置网页标题 -->
    <style>
        /* 定义颜色变量 */
        :root {
            --skin: PeachPuff;
            /* 圣诞老人皮肤颜色 */
            --eyes: Black;
            /* 圣诞老人眼睛颜色 */
            --cheeks: Salmon;
            /* 圣诞老人脸颊颜色 */
            --beard: GhostWhite;
            /* 圣诞老人胡子颜色 */
            --mustache: white;
            /* 圣诞老人小胡子颜色 */
            --suit: Tomato;
            /* 圣诞老人衣服颜色 */
            --belt: #363636;
            /* 圣诞老人腰带颜色 */
            --belt-buckle: gold;
            /* 圣诞老人腰带扣颜色 */
        }


        /* 全局样式 */
        body {
            background: SkyBlue;
            /* 背景颜色为天蓝色 */
            overflow: hidden;
            /* 隐藏溢出的内容 */
            background-image: radial-gradient(circle at 50% 50%, white 2.5%, transparent 0), radial-gradient(circle at 30% 90%, white 1.5%, transparent 0), radial-gradient(circle at 70% 10%, white 1%, transparent 0), radial-gradient(circle at 10% 40%, white 1%, transparent 0);
            /* 添加雪花背景效果 */
            background-size: 45vmin 35vmin, 50vmin 70vmin, 60vmin 50vmin, 65vmin 60vmin;
            /* 设置背景图像大小 */
            background-position: 0 0;
            /* 设置背景图像位置 */
            animation: snow infinite 7s linear;
            /* 添加雪花飘落动画 */
        }


        /* 画布样式 */
        .canvas {
            width: 60vmin;
            /* 设置画布宽度 */
            aspect-ratio: 1;
            /* 设置画布宽高比为1:1 */
            position: absolute;
            /* 绝对定位 */
            top: 50%;
            /* 距离顶部50% */
            left: 50%;
            /* 距离左侧50% */
            transform: translate(-50%, -50%);
            /* 将画布居中 */
        }


        .canvas::before {
            content: "";
            /* 伪元素内容为空 */
            display: block;
            /* 显示为块级元素 */
            position: absolute;
            /* 绝对定位 */
            top: 90%;
            /* 距离顶部90% */
            left: 50%;
            /* 距离左侧50% */
            width: 200vmax;
            /* 设置宽度 */
            height: 200vmax;
            /* 设置高度 */
            background: white;
            /* 背景颜色为白色 */
            transform: translate(-50%, 0) rotate(1deg);
            /* 将伪元素居中并旋转1度 */
            border-radius: 100% / 20%;
            /* 设置椭圆形边框 */
        }


        /* 圣诞老人头部样式 */
        .head {
            --positionX: 27%;
            /* 定义眼睛和脸颊的水平位置 */
            --positionY: 63%;
            /* 定义眼睛和脸颊的垂直位置 */
            position: absolute;
            /* 绝对定位 */
            top: 10%;
            /* 距离顶部10% */
            left: 50%;
            /* 距离左侧50% */
            border-radius: 50%;
            /* 设置圆形边框 */
            width: 25%;
            /* 设置宽度 */
            height: 25%;
            /* 设置高度 */
            transform: translate(-50%, 0);
            /* 将头部居中 */
            background: var(--skin);
            /* 设置背景颜色为皮肤色 */
        }


        .eye {
            position: absolute;
            /* 绝对定位 */
            top: var(--positionY);
            /* 使用定义的垂直位置 */
            left: var(--positionX);
            /* 使用定义的水平位置 */
            width: 12%;
            /* 设置宽度 */
            height: 12%;
            /* 设置高度 */
            background: var(--eyes);
            /* 设置背景颜色为黑色 */
            border-radius: 50%;
            /* 设置圆形边框 */
            animation: blink 5s infinite linear;
            /* 添加眨眼动画 */
        }


        .eye+.eye {
            left: auto;
            /* 取消之前的left属性 */
            right: var(--positionX);
            /* 设置右侧眼睛的位置 */
        }


        .cheek {
            position: absolute;
            /* 绝对定位 */
            top: calc(var(--positionY) + 7%);
            /* 计算脸颊的垂直位置 */
            left: calc(var(--positionX) - 12%);
            /* 计算脸颊的水平位置 */
            width: 20%;
            /* 设置宽度 */
            height: 12%;
            /* 设置高度 */
            background: var(--cheeks);
            /* 设置背景颜色为脸颊色 */
            border-radius: 50%;
            /* 设置圆形边框 */
        }


        .cheek+.cheek {
            left: auto;
            /* 取消之前的left属性 */
            right: calc(var(--positionX) - 12%);
            /* 设置右侧脸颊的位置 */
        }


        /* 圣诞老人胡须和小胡子样式 */
        .beard {
            position: absolute;
            /* 绝对定位 */
            top: 10%;
            /* 距离顶部10% */
            left: 50%;
            /* 距离左侧50% */
            width: 30%;
            /* 设置宽度 */
            height: 40%;
            /* 设置高度 */
            background: var(--beard);
            /* 设置背景颜色为胡子色 */
            transform: translate(-50%, 0);
            /* 将胡须居中 */
            border-radius: 100% / 120% 120% 80% 80%;
            /* 设置不规则形状的边框 */
        }


        .mustache {
            position: absolute;
            /* 绝对定位 */
            top: 88%;
            /* 距离顶部88% */
            left: 52%;
            /* 距离左侧52% */
            width: 40%;
            /* 设置宽度 */
            height: 40%;
            /* 设置高度 */
            background: var(--mustache);
            /* 设置背景颜色为小胡子色 */
            border-radius: 100% 10% 100% 0;
            /* 设置不规则形状的边框 */
            transform-origin: top right;
            /* 设置变换原点 */
            transform: translate(-100%, 0) rotate(25deg);
            /* 将小胡子向左旋转25度 */
            animation: moveMustache 7s infinite linear;
            /* 添加小胡子移动动画 */
        }


        .mustache+.mustache {
            left: 48%;
            /* 设置左侧小胡子的位置 */
            border-radius: 10% 100% 0 100%;
            /* 设置不规则形状的边框 */
            transform-origin: top left;
            /* 设置变换原点 */
            transform: rotate(-25deg);
            /* 将小胡子向右旋转25度 */
            animation: moveMustache2 7s infinite linear;
            /* 添加小胡子移动动画 */
        }


        /* 圣诞老人帽子样式 */
        .hat {
            position: absolute;
            /* 绝对定位 */
            width: 98%;
            /* 设置宽度 */
            height: 80%;
            /* 设置高度 */
            background: var(--suit);
            /* 设置背景颜色为衣服色 */
            border-radius: 100% 20% 0 0;
            /* 设置不规则形状的边框 */
            top: -40%;
            /* 距离顶部-40% */
            left: 50%;
            /* 距离左侧50% */
            transform: translate(-50%, 0) rotate(1deg);
            /* 将帽子居中并旋转1度 */
        }


        .hat::before {
            content: "";
            /* 伪元素内容为空 */
            display: block;
            /* 显示为块级元素 */
            position: absolute;
            /* 绝对定位 */
            bottom: -17%;
            /* 距离底部-17% */
            left: -5%;
            /* 距离左侧-5% */
            width: 110%;
            /* 设置宽度 */
            height: 40%;
            /* 设置高度 */
            border-radius: 100% / 50%;
            /* 设置椭圆形边框 */
            transform: rotate(-2deg);
            /* 旋转-2度 */
            background: radial-gradient(200% 100% at 50% 100%, #0000 30%, var(--mustache) 31%);
            /* 设置径向渐变背景 */
        }


        .hat::after {
            content: "";
            /* 伪元素内容为空 */
            display: block;
            /* 显示为块级元素 */
            position: absolute;
            /* 绝对定位 */
            right: -25%;
            /* 距离右侧-25% */
            top: -15%;
            /* 距离顶部-15% */
            width: 40%;
            /* 设置宽度 */
            aspect-ratio: 1;
            /* 设置宽高比为1:1 */
            border-radius: 50%;
            /* 设置圆形边框 */
            background: var(--beard);
            /* 设置背景颜色为胡子色 */
        }


        /* 圣诞老人身体样式 */
        .body {
            position: absolute;
            /* 绝对定位 */
            top: 35%;
            /* 距离顶部35% */
            left: 50%;
            /* 距离左侧50% */
            width: 50%;
            /* 设置宽度 */
            height: 50%;
            /* 设置高度 */
            background: var(--suit);
            /* 设置背景颜色为衣服色 */
            border-radius: 100% / 150% 150% 25% 25%;
            /* 设置不规则形状的边框 */
            transform: translate(-50%, 0);
            /* 将身体居中 */
            background-image: radial-gradient(circle at 50% 36%, var(--belt) 2.75%, #0000 3%), radial-gradient(circle at 50% 48%, var(--belt) 3%, #0000 3.25%), radial-gradient(circle at 50% 60%, var(--belt) 2.75%, #0000 3%), radial-gradient(circle at 50% 90%, var(--belt) 2.25%, #0000 2.5%), radial-gradient(circle at 50% -50%, transparent 75%, var(--belt) 75.1% 83%, transparent 83.1%), linear-gradient(to right, transparent 42%, white 42.2% 57%, transparent 57.2%);
            /* 设置径向渐变背景和线性渐变背景 */
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 51% 100%, 50% 96%, 49% 100%, 0% 100%);
            /* 设置裁剪路径 */
        }


        .belt {
            position: absolute;
            /* 绝对定位 */
            top: 75%;
            /* 距离顶部75% */
            left: 50%;
            /* 距离左侧50% */
            transform: translate(-50%, -50%);
            /* 将腰带居中 */
            width: 23%;
            /* 设置宽度 */
            height: 15%;
            /* 设置高度 */
            background: linear-gradient(var(--belt-buckle) 0 0) 75% 50% / 25% 12% no-repeat, linear-gradient(var(--belt) 0 0) 50% 50% / 85% 80% no-repeat, var(--belt-buckle);
            /* 设置背景图像和背景颜色 */
        }


        /* 圣诞老人手臂样式 */
        .arms {
            position: absolute;
            /* 绝对定位 */
            top: 37%;
            /* 距离顶部37% */
            left: 50%;
            /* 距离左侧50% */
            transform: translate(-50%, 0);
            /* 将手臂居中 */
            width: 65%;
            /* 设置宽度 */
            height: 40%;
            /* 设置高度 */
            background: OrangeRed;
            /* 设置背景颜色为橙红色 */
            border-radius: 100% / 170% 170% 25% 25%;
            /* 设置不规则形状的边框 */
            background-image: linear-gradient(transparent 20%, #0003);
            /* 设置线性渐变背景 */
        }


        .hand {
            --positionX: 18%;
            /* 定义手的水平位置 */
            position: absolute;
            /* 绝对定位 */
            top: 70%;
            /* 距离顶部70% */
            left: var(--positionX);
            /* 使用定义的水平位置 */
            width: 13%;
            /* 设置宽度 */
            height: 13%;
            /* 设置高度 */
            background: var(--belt);
            /* 设置背景颜色为腰带色 */
            border-radius: 50%;
            /* 设置圆形边框 */
        }


        .hand+.hand {
            left: auto;
            /* 取消之前的left属性 */
            right: var(--positionX);
            /* 设置右侧手的位置 */
        }


        /* 圣诞老人腿部样式 */
        .leg {
            position: absolute;
            /* 绝对定位 */
            top: 75%;
            /* 距离顶部75% */
            left: 29%;
            /* 距离左侧29% */
            width: 19%;
            /* 设置宽度 */
            height: 25%;
            /* 设置高度 */
            background: var(--suit);
            /* 设置背景颜色为衣服色 */
            transform: skew(2deg);
            /* 斜切变形 */
            background-image: linear-gradient(#0002, transparent 70%, var(--belt) 0);
            /* 设置线性渐变背景 */
        }


        .leg+.leg {
            left: 52%;
            /* 设置右侧腿的位置 */
        }


        .leg::after {
            content: "";
            /* 伪元素内容为空 */
            display: block;
            /* 显示为块级元素 */
            position: absolute;
            /* 绝对定位 */
            bottom: 0;
            /* 距离底部0 */
            left: -6%;
            /* 距离左侧-6% */
            width: 110%;
            /* 设置宽度 */
            height: 20%;
            /* 设置高度 */
            background: black;
            /* 设置背景颜色为黑色 */
            border-radius: 50% / 100% 100% 0 0;
            /* 设置椭圆形边框 */
        }


        .leg+.leg::after {
            left: -4%;
            /* 设置右侧腿脚的位置 */
        }


        /* 动画关键帧 */
        @keyframes snow {
            0% {
                background-position: 0 0, 0 0, 0 0, 0 0;
                /* 设置初始背景位置 */
            }


            40% {
                background-position: 10px 14vmin, -20px 28vmin, 20px 20vmin, 10px 24vmin;
                /* 设置40%时的背景位置 */
            }


            60% {
                background-position: -10px 21vmin, -30px 42vmin, 30px 30vmin, 15px 36vmin;
                /* 设置60%时的背景位置 */
            }


            100% {
                background-position: 0 35vmin, 0 70vmin, 0 50vmin, 0 60vmin;
                /* 设置100%时的背景位置 */
            }
        }


        @keyframes blink {


            0%,
            6%,
            100% {
                height: 12%;
                /* 设置眼睛的高度 */
            }


            3% {
                height: 0%;
                /* 设置眼睛的高度为0,模拟眨眼 */
            }
        }


        @keyframes moveMustache {


            0%,
            40%,
            44%,
            100% {
                transform: translate(-100%, 0) rotate(25deg);
                /* 设置小胡子的初始和结束状态 */
            }


            42% {
                transform: translate(-100%, 0) rotate(30deg);
                /* 设置小胡子的中间状态 */
            }
        }


        /* 定义名为 moveMustache2 的关键帧动画 */
        @keyframes moveMustache2 {


            /* 在 0%, 40%, 44%, 和 100% 的时间点上,将小胡子旋转 -25 度 */
            0%,
            40%,
            44%,
            100% {
                transform: rotate(-25deg);
            }


            /* 在 42% 的时间点上,将小胡子旋转 -30 度 */
            42% {
                transform: rotate(-30deg);
            }
        }


        /* 媒体查询,适配偏好减少动画的用户 */
        @media (prefers-reduced-motion) {


            /* 如果用户偏好减少动画,则取消所有元素的动画效果 */
            * {
                animation: none !important;
            }
        }
    </style>
</head>


<body>
    <div class="canvas" role="img" aria-label="一个站在雪地小山上的圣诞老人卡通形象。">
        <!-- 创建一个画布容器,包含圣诞老人的所有部分,并设置ARIA标签以便于辅助技术 -->
        <div class="hand"></div><!-- 左手 -->
        <div class="hand"></div><!-- 右手 -->
        <div class="arms"></div><!-- 手臂 -->
        <div class="leg"></div> <!-- 左腿 -->
        <div class="leg"></div> <!-- 右腿 -->
        <div class="body"> <!-- 圣诞老人的身体 -->
            <div class="belt"></div> <!-- 圣诞老人的腰带 -->
        </div>
        <div class="beard"></div> <!-- 圣诞老人的胡子 -->
        <div class="head"> <!-- 圣诞老人的头部 -->
            <div class="cheek"></div><!-- 左脸颊 -->
            <div class="cheek"></div> <!-- 右脸颊 -->
            <div class="eye"></div> <!-- 左眼 -->
            <div class="eye"></div> <!-- 右眼 -->
            <div class="mustache"></div> <!-- 左小胡子 -->
            <div class="mustache"></div><!-- 右小胡子 -->
            <div class="hat"></div> <!-- 圣诞老人的帽子 -->
        </div>
    </div>
</body>


</html>

创建一个圣诞老人.html文件并使用编辑器打开,将以上代码粘贴后保存,使用浏览器即可查看效果。

通过本教程,你不仅学会了如何使用CSS来手绘一个圣诞老人形象,还了解了如何通过CSS动画来增强网页的互动性。如果你想要更深入地学习CSS,编程狮(w3cschool.cn)提供了丰富的课程,包括CSS基础、进阶技巧以及实战项目,帮助你成为CSS高手。现在就开始你的学习之旅吧,下一个圣诞节,你或许可以自己制作一个更加复杂的圣诞主题网页!

保姆级Python安装教程,小白一看就懂,收藏!

thbcm阅读(367)

Python是一种非常流行和易用的编程语言,它可以用来做很多有用的事情,比如数据分析、网站开发、游戏制作等等。但是在你开始学习Python之前,你需要先安装Python到你的电脑上。今天,小狮妹就来教你如何安装Python吧!

确定电脑操作系统

首先,你需要确定你的电脑的操作系统是什么。操作系统就是你的电脑运行的基本软件,它可以让你和电脑交互,比如打开文件、浏览网页、运行程序等等。常见的操作系统有Windows、Mac OS、Linux等。

如果你不知道你的电脑是什么系统,你可以这样做:

  • 如果你的电脑是Windows系统,你可以在屏幕左下角找到一个叫做“开始”的按钮,点击它,然后在弹出的菜单中找到一个叫做“设置”的图标,点击它。然后,在打开的窗口中,找到一个叫做“系统”的选项,点击它。在左边的菜单中,找到一个叫做“关于”的选项,点击它。在右边的页面中,你可以看到一些关于你的电脑的信息,其中有一项叫做“设备规格”,下面有一项叫做“系统类型”,这里就显示了你的操作系统的版本和位数。比如,“64位操作系统, x64处理器”就表示你的电脑是64位的Windows系统。

  • 如果你的电脑是Mac OS系统,你可以在屏幕左上角找到一个苹果图标,点击它,然后在弹出的菜单中找到一个叫做“关于本机”的选项,点击它。然后,在打开的窗口中,你可以看到一些关于你的电脑的信息,其中有一项叫做“软件”,这里就显示了你的操作系统的版本和名称。比如,“macOS Big Sur 11.4”就表示你的电脑是最新版的Mac OS系统。

  • 如果你的电脑是Linux系统,那么可能有很多种不同的发行版和桌面环境,所以没有统一的方法来查看操作系统信息。但是,一般来说,你可以在屏幕上找到一个类似于Windows或者Mac OS中“开始”或者“苹果”图标的按钮或者菜单,点击它,然后找到一个叫做“关于”或者“信息”或者“帮助”的选项,点击它。然后,在打开的窗口或者页面中,你可以看到一些关于你的电脑和操作系统的信息。比如,“Ubuntu 20.04.2 LTS”就表示你的电脑是Ubuntu发行版的最新长期支持版。

确定了操作系统之后,我们就可以开始下载和安装Python了。

下载Python

要下载Python,我们需要访问Python官方网站。这个网站提供了Python最新版和历史版的下载链接和文档说明。我们可以根据自己需要选择合适版本和平台(即操作系统)来下载。

如果你不知道该选择哪个版本和平台来下载Python,我建议你这样做:

  • 选择最新版(目前是3.9.6)来下载。因为最新版通常会修复一些错误和增加一些功能,而且大多数第三方库和框架都会支持最新版。除非你有特殊的需求,比如要运行一些只能在旧版Python上工作的代码,否则不建议你下载旧版Python。
  • 选择和你的操作系统和位数相匹配的平台来下载。比如,如果你的电脑是64位的Windows系统,那么你就应该选择“Windows x86-64 executable installer”来下载。如果你的电脑是Mac OS系统,那么你就应该选择“macOS 64-bit Intel installer”来下载。如果你的电脑是Linux系统,那么你就应该选择“Linux”来下载,然后根据你的发行版和包管理器来选择合适的安装方式。

下载好Python之后,我们就可以开始安装Python了。

安装Python

要安装Python,我们需要运行下载好的安装文件或者包,并按照提示进行操作。不同的操作系统可能有不同的安装步骤,所以我们要根据自己的情况来进行。

如果你不知道该如何安装Python,我建议你这样做:

  • 如果你的电脑是Windows系统,那么你可以双击下载好的“Windows x86-64 executable installer”文件,然后会弹出一个安装向导窗口。在这个窗口中,你可以看到一些选项,比如“Install Now”(立即安装)、“Customize installation”(自定义安装)、“Add Python 3.9 to PATH”(将Python 3.9添加到环境变量)等。我建议你勾选“Add Python 3.9 to PATH”这个选项,这样就可以让你在任何地方都可以运行Python。然后,你可以选择“Install Now”这个选项,这样就会使用默认的设置来安装Python。如果你想自己选择安装位置或者安装组件,你可以选择“Customize installation”这个选项,然后按照提示进行操作。无论你选择哪个选项,都要等待安装完成,并点击“Close”按钮关闭窗口。

  • 如果你的电脑是Mac OS系统,那么你可以双击下载好的“macOS 64-bit Intel installer”文件,然后会弹出一个安装向导窗口。在这个窗口中,你可以看到一些步骤,比如“Introduction”(介绍)、“Read Me”(阅读我)、“License”(许可协议)、“Destination Select”(目标选择)、“Installation Type”(安装类型)、“Installation”(安装)、“Summary”(总结)等。我建议你按照默认的设置来进行安装,只需要点击“Continue”按钮,并在需要时输入密码或者同意协议即可。等待安装完成,并点击“Close”按钮关闭窗口。

  • 如果你的电脑是Linux系统,那么你可以根据你的发行版和包管理器来选择合适的安装方式。比如,如果你的电脑是Ubuntu系统,并且使用apt作为包管理器,那么你可以在终端中输入以下命令来安装Python:
 
 
sudo apt update # 更新软件源sudo apt install python3 # 安装Python 3

如果你想要更详细的安装指南或者遇到了一些问题,请参考Python官方网站上提供的文档。

验证Python

安装好Python之后,我们需要验证一下是否成功。我们可以用以下方法来检查:

  • 如果你的电脑是Windows系统或者Mac OS系统,那么你可以打开一个叫做“命令提示符”或者“终端”的程序,在里面输入以下命令:
 
 
python --version # 查看Python版本

如果输出类似于“Python 3.9.6”的信息,就表示成功安装了Python。

  • 如果你的电脑是Linux系统,那么你可以在终端中输入以下命令:
 
 
python3 --version # 查看Python 3版本

如果输出类似于“Python 3.9.6”的信息,就表示成功安装了Python 3。

如果你没有看到这样的信息,或者看到了一些错误提示,那么可能是你的安装过程出了一些问题,或者你的环境变量没有设置正确。你可以尝试重新安装Python,或者检查一下你的环境变量是否包含了Python的路径。如果你不知道如何设置环境变量,请参考Python官方网站上提供的文档。

运行Python

验证好Python之后,我们就可以开始运行Python了。我们可以用以下方法来运行Python:

  • 如果你的电脑是Windows系统或者Mac OS系统,那么你可以打开一个叫做“命令提示符”或者“终端”的程序,在里面输入以下命令:
 
 
python # 启动Python交互式解释器

如果成功启动了Python交互式解释器,你会看到类似于这样的信息:

 
 
Python 3.9.6 (tags/v3.9.6:db3ff76, Jun 28 2021, 15:26:21) [MSC v.1929 64 bit (AMD64)] on win32Type "help", "copyright", "credits" or "license" for more information.>>>

这里的>>>就是一个提示符,表示你可以在这里输入Python代码,并按回车键执行。比如,你可以输入以下代码:

 
 
print("Hello, world!") # 打印一句话

然后按回车键,就会看到以下输出:

Hello, world!

这就表示你成功运行了一段Python代码。你可以在这里尝试更多的Python代码,学习和练习Python的语法和功能。如果你想退出Python交互式解释器,你可以输入以下命令:

 
 

exit() # 退出Python交互式解释器

然后按回车键,就会回到命令提示符或者终端中。

  • 如果你的电脑是Linux系统,那么你可以在终端中输入以下命令:
 
 
python3 # 启动Python 3交互式解释器

如果成功启动了Python 3交互式解释器,你会看到类似于这样的信息:

 
 
Python 3.9.6 (default, Jun 29 2021, 05:25:02)
[GCC 10.2.0] on linuxType "help", "copyright", "credits" or "license" for more information.>>>

这里的>>>就是一个提示符,表示你可以在这里输入Python代码,并按回车键执行。比如,你可以输入以下代码

print("Hello, world!") # 打印一句话

然后按回车键,就会看到以下输出:

Hello, world!

这就表示你成功运行了一段Python代码。你可以在这里尝试更多的Python代码,学习和练习Python的语法和功能。如果你想退出Python交互式解释器,你可以输入以下命令:

 
 

exit() # 退出Python交互式解释器

然后按回车键,就会回到终端中。

恭喜你!你已经完成了Python的安装、验证、运行。接下来,你可以继续学习更多的Python知识和技能,并且尝试编写更多有趣和有用的程序。小狮妹希望你能享受Python编程带给你的乐趣和挑战~

零基础学Python?这些软件是你的最佳选择!

thbcm阅读(365)

你是不是对Python很感兴趣,想要学习这门流行的编程语言?你是不是对编程软件有些迷茫,不知道该用什么软件来写Python代码?如果你是一个Python新手,那么这篇文章就是为你准备的。

小狮妹将给你介绍一些基本的编程软件的概念,以及推荐几款适合初学者的Python IDE。

1,了解基础概念

如果你在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环境、IDE、代码编辑器、编译器、调试器等等。这些都是编程过程中必不可少的工具,它们可以帮助你更方便地编写、运行和调试代码。下面我简单地给你解释一下它们的含义和作用:

  • 开发环境:开发环境就是指你用来编程的软件和硬件的集合,它包括了操作系统、编程语言、代码编辑器、编译器、调试器等等。不同的编程语言可能需要不同的开发环境,比如Java需要安装JDK(Java Development Kit),而Python需要安装Python解释器。
  • IDE:IDE是Integrated Development Environment的缩写,意思是集成开发环境。它是一种集合了代码编辑器、编译器、调试器等多种功能于一体的软件,可以让你在一个界面中完成编程的各个步骤。IDE通常会提供一些便利的功能,比如代码提示、代码高亮、代码格式化、代码检查、代码运行、代码调试等等。
  • 代码编辑器:代码编辑器就是用来输入和编辑代码的软件,它可以让你方便地输入和修改代码,同时也可以显示代码的结构和语法。代码编辑器通常会支持多种编程语言,比如Notepad++、Sublime Text、VS Code等等。



  • 编译器:编译器就是用来将源代码转换为可执行文件的软件,它可以让你的代码在目标平台上运行。不同的编程语言可能需要不同的编译器,比如C语言需要GCC(GNU Compiler Collection),而Java需要Javac(Java Compiler)。
  • 调试器:调试器就是用来检查和修复代码错误的软件,它可以让你在运行代码时查看变量的值、设置断点、单步执行等等。调试器通常会和IDE或者代码编辑器配合使用,比如PyCharm自带了Python调试器。

2、为什么要安装Python开发环境?

如果你想运行Python程序,那么必不可少的就是Python的开发环境。Python开发环境主要包括了Python解释器和一些标准库和第三方库。

Python解释器是用来执行Python代码的软件,它可以让你在命令行或者交互式解释器中输入和运行Python代码。标准库和第三方库是一些提供了各种功能和模块的软件包,它们可以让你更方便地编写和运行Python代码。比如,你可以使用标准库中的math模块来进行数学运算,或者使用第三方库中的requests模块来进行网络请求。

要安装Python开发环境,你可以直接从Python官网下载Python安装包,或者使用一些专门的Python发行版,比如Anaconda、WinPython等等。这些发行版通常会预装一些常用的第三方库,比如NumPy、Pandas、Matplotlib等等,可以让你更快地开始Python编程。

3、如何选择合适的Python IDE?

有了开发环境了,就需要有编辑器之类的软件来编写Python代码了。市面上Python IDE有很多,每个IDE都有自己的特点和长处,只有选择适合自己的IDE,开发才会得心应手,事半功倍。那么,如何选择合适的Python IDE呢?我觉得可以从以下几个方面考虑:

  • 功能:不同的IDE可能提供不同的功能,比如代码提示、代码高亮、代码格式化、代码检查、代码运行、代码调试等等。你可以根据自己的需求和喜好,选择一个功能丰富且易用的IDE。
  • 兼容性:不同的IDE可能对不同的操作系统和Python版本有不同的支持,比如有些IDE只能在Windows上运行,有些IDE只能支持Python 3.x版本。你可以根据自己的开发环境,选择一个兼容性好且稳定的IDE。
  • 社区:不同的IDE可能有不同的社区和用户群体,比如有些IDE很受专业开发者的欢迎,有些IDE很受初学者的青睐。你可以根据自己的水平和目标,选择一个社区活跃且资源丰富的IDE。

4、几款适合初学者的Python IDE

下面我就给大家推荐几款我认为适合初学者的Python IDE,它们都是免费且易用的,你可以根据自己的喜好和需求进行选择和尝试:


  • PyCharm:PyCharm是一款非常流行且强大的Python IDE,它提供了很多便利和高级的功能,比如智能代码提示、代码重构、代码调试、版本控制、项目管理等等。PyCharm有两个版本,分别是免费的社区版和付费的专业版。对于初学者来说,社区版已经足够使用了。
  • VS Code:VS Code是一款轻量级且跨平台的代码编辑器,它支持多种编程语言,包括Python。VS Code通过安装插件来扩展功能,比如Python插件可以让你在VS Code中编写、运行和调试Python代码。VS Code也提供了一些实用和友好的功能,比如代码提示、代码高亮、代码格式化、代码检查等等。



  • Thonny:Thonny是一款专门为初学者设计的Python IDE,它非常简洁且易用。Thonny内置了Python解释器和调试器,可以让你直接在Thonny中运行和调试Python代码。Thonny也提供了一些帮助初学者理解编程原理的功能,比如显示变量的值、显示代码的执行过程、显示错误的原因等等。
  • Mu:Mu是另一款专门为初学者设计的Python IDE,它也非常简洁且易用。Mu内置了Python解释器和一些常用的第三方库,可以让你在Mu中编写、运行和调试Python代码。Mu也提供了一些针对不同场景的模式,比如Python模式、Web模式、游戏模式等等,可以让你更快地开始Python编程。

以上就是小狮妹给大家介绍的几款适合初学者的Python IDE,你可以根据自己的情况进行选择和尝试~希望这篇文章能够对你有所帮助,祝你学习Python顺利!

零基础HTML+CSS教程:制作马赛克背景并居中显示图片

thbcm阅读(365)

欢迎来到编程狮(W3Cschool),这里是您学习编程的起点。在这个教程中,我们将一起学习如何使用HTML和CSS来创建一个具有马赛克背景的网页,并在页面中居中显示一张图片。同时,我们会介绍一个强大的AI编程工具——豆包MarsCode,它将帮助您更高效地编写代码。

效果截图

第一步:了解HTML基础

在开始编写代码之前,让我们先了解一些HTML的基础知识。HTML(HyperText Markup Language)是构建网页和网上应用的标准标记语言。它由一系列的元素组成,这些元素告诉浏览器如何展示内容。

如果您是零基础用户,推荐您先学习编程狮上的HTML + CSS 基础实战,这将帮助您快速掌握HTML的基本结构和常用标签。

第二步:编写HTML结构

现在,让我们看看如何构建这个网页的基本结构。打开您的文本编辑器,创建一个新的HTML文件,并输入以下代码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML+CSS实现马赛克背景 | 编程狮(w3cschool.cn)</title>
</head>
<body>
    <div class="center">
        <img src="https://7nsts.w3cschool.cn/images/w3c/w3cschool-logo.png?t=191105" alt="w3cschool-logo">
    </div>
    <!-- 页面内容 -->
</body>
</html>

代码解释

  • <!DOCTYPE html> 声明了文档类型和HTML版本。
  • <html lang="zh"> 是根元素,lang="zh" 表示页面内容使用中文。
  • <head> 包含了文档的元数据,如字符编码和视口设置。
  • <title> 定义了网页的标题。
  • <body> 包含了可见的页面内容。
  • <div class="center"> 是一个容器,用于居中显示内容。
  • <img> 标签用于插入图片,src 属性指定图片的URL,alt 属性提供了图片的替代文本。

第三步:学习CSS基础

接下来,我们需要使用CSS来美化我们的网页。CSS(Cascading Style Sheets)用于设置HTML元素的样式。

对于CSS的初学者,编程狮提供了CSS入门课程,帮助您掌握CSS的选择器、属性和布局技巧。

第四步:编写CSS样式

在<head>标签内,添加一个<style>标签,并输入以下CSS代码:

body {
    margin: 0;
    padding: 0;
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc 100%),
                      linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc 100%);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
}


.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

代码解释

  • body 选择器设置了页面的外边距和内边距为0,并定义了背景图像。
  • background-image 使用了两个线性渐变来创建马赛克效果。
  • background-size 和 background-position 控制背景图像的大小和位置。
  • .center 类使用了Flexbox布局来水平和垂直居中显示内容。

第五步:使用AI编程工具——豆包MarsCode

在编程过程中,我们可以使用豆包MarsCode来提高编码效率。它提供了代码补全、单测生成、代码解释等功能,非常适合初学者和专业开发者。

安装MarsCode

  1. 访问豆包MarsCode官网,了解其功能并下载安装。
  2. 在Visual Studio Code中安装MarsCode插件,重启IDE并登录,即可开始使用。

最后一起看下完整源代码吧(为方便初学者学习,每行代码后面都使用豆包marscode添加了详细的注释),新建一个文本文件,复制并粘贴以下代码,保存后将文件名及后缀修改为css实现马赛克背景编程狮教程.html,用浏览器就可以打开查看效果了

<!DOCTYPE html>
<html lang="zh">
<head>
    <!-- 定义文档的字符编码为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置视口的宽度和初始缩放比例 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 定义文档的标题 -->
    <title>HTML+CSS实现马赛克背景 | 编程狮(w3cschool.cn)</title>
    <style>
        /* 设置页面的外边距和内边距为0 */
        body {
            margin: 0;
            padding: 0;
            /* 设置页面的背景图像为两个线性渐变的组合 */
            background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc 100%),
                              linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc 100%);
            /* 设置背景图像的大小为50像素x50像素 */
            background-size: 50px 50px;
            /* 设置背景图像的位置为0 0和25像素 25像素 */
            background-position: 0 0, 25px 25px;
        }


        /* 定义一个类名为center的样式 */
        .center {
            /* 使用flex布局 */
            display: flex;
            /* 水平居中对齐 */
            justify-content: center;
            /* 垂直居中对齐 */
            align-items: center;
            /* 高度为100vh,即整个视口的高度 */
            height: 100vh;
        }
    </style>
</head>
<body>
    <!-- 使用center类来居中显示内容 -->
    <div class="center">
        <!-- 插入一张图片,图片的URL为https://7nsts.w3cschool.cn/images/w3c/w3cschool-logo.png?t=191105 -->
        <img src="https://7nsts.w3cschool.cn/images/w3c/w3cschool-logo.png?t=191105" alt="w3cschool-logo">
    </div>
    <!-- 页面内容 -->
</body>
</html>

结语

通过这个教程,您不仅学会了如何使用HTML和CSS来创建一个具有马赛克背景的网页,还了解了如何使用豆包MarsCode来提升您的编程效率。编程狮(w3cschool.cn)提供了丰富的编程课程,帮助您从零基础成长为编程高手。豆包MarsCode官网则是您编程路上的得力助手,让您的编码之旅更加顺畅。开始您的编程之旅吧!

如何用CSS3创建圆角矩形并居中显示?

thbcm阅读(384)

在网页设计中,圆角矩形因其美观和现代感而被广泛使用,居中显示元素也是一个常见的需求。今天,我们将学习如何使用CSS3的border-radius属性来创建圆角矩形,并将其居中显示在页面上。

如果你正在学习CSS,那么这个实例将非常适合你练手。如果想要更生动的学习CSS,推荐编程狮W3Cschool的HTML + CSS 基础实战,它能让你像玩游戏一样闯关中掌握更多的多前端开发实用技巧。

如果你没有HTML基础请先学习《HTML入门课程(含HTML5)》

一、创建圆角矩形

首先,我们来看如何创建一个圆角矩形:

.rectangle { <!-- 定义矩形样式 -->
    width: 400px; <!-- 设置矩形宽度为400像素 -->
    height: 300px; <!-- 设置矩形高度为300像素 -->
    background-color: #4CAF50; /* 设置背景颜色为绿色 */
    border: 2px solid #000; /* 设置边框为2像素的黑色实线 */
    border-radius: 10px; /* 设置圆角为10像素 */
}

要使用CSS3创建圆角矩形,你需要使用border-radius属性。border-radius属性允许你为元素的四个角设置圆角。以下是一些基本的使用方法:

单个值

如果你为border-radius属性提供一个值,那么这个值将应用于所有四个角:

css

.rectangle {
  border-radius: 10px; /* 所有四个角都是10px的圆角 */
}

两个值

如果你提供两个值,第一个值将应用于左上角和右下角,第二个值将应用于右上角和左下角:

css

.rectangle {
  border-radius: 10px 20px; /* 左上角和右下角是10px的圆角,右上角和左下角是20px的圆角 */
}

三个值

如果你提供三个值,第一个值将应用于左上角,第二个值将应用于右上角和左下角,第三个值将应用于右下角:

css

.rectangle {
  border-radius: 10px 20px 30px; /* 左上角是10px的圆角,右上角和左下角是20px的圆角,右下角是30px的圆角 */
}

四个值

如果你提供四个值,它们将分别应用于左上角、右上角、右下角和左下角:

css

.rectangle {
  border-radius: 10px 20px 30px 40px; /* 左上角是10px的圆角,右上角是20px的圆角,右下角是30px的圆角,左下角是40px的圆角 */
}

当然你也可以使用编程狮上的在线生成CSS圆角工具来快速一键获取圆角的css代码

二、居中显示

要将圆角矩形居中显示,我们可以使用以下两种方法之一:

方法1:使用Flexbox

将矩形包裹在一个容器中,并使用Flexbox来居中它:

<!DOCTYPE html> <!-- 定义文档类型为HTML5 -->
<html>
<head>
  <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
  <title>居中显示圆角矩形示例 | 编程狮(w3cschool.cn)</title> <!-- 页面标题 -->
  <style>
    .container { /* 定义容器样式 */
      display: flex; /* 使用Flexbox布局 */
      justify-content: center; /* 水平居中子元素 */
      align-items: center; /* 垂直居中子元素 */
      height: 100vh; /* 使容器高度占满整个视口高度 */
    }
    .rectangle { /* 定义矩形样式 */
      width: 400px; /* 设置矩形宽度为400像素 */
      height: 300px; /* 设置矩形高度为300像素 */
      background-color: #4CAF50; /* 设置背景颜色为绿色 */
      border: 2px solid #000; /* 设置边框为2像素的黑色实线 */
      border-radius: 10px; /* 设置圆角为10像素 */
    }
  </style>
</head>
<body>
  <div class="container"> <!-- 使用容器类 -->
    <div class="rectangle"></div> <!-- 使用矩形类 -->
  </div>
</body>
</html>

在这个示例中,.container类使用display: flex属性创建了一个Flexbox布局,justify-content: center和align-items: center属性分别在水平和垂直方向上居中了子元素。这段代码使用了Flexbox,这是一种现代的布局方式,非常适合于简单的居中任务。

推荐学习

方法2:使用绝对定位

如果你不想使用Flexbox,也可以使用绝对定位来居中元素:

<!DOCTYPE html> <!-- 定义文档类型为HTML5 -->
<html>
<head>
  <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
  <title>居中显示圆角矩形示例 | 编程狮(w3cschool.cn)</title> <!-- 页面标题 -->
  <style>
    /* 定义html和body的样式 */
    html, body {
      height: 100%; /* 设置高度为视口的100% */
      margin: 0; /* 移除默认的外边距 */
    }


    /* 定义内容容器样式 */
    .body-content {
      position: relative; /* 设置定位为相对定位,用于绝对定位子元素的参考 */
      height: 100%; /* 设置高度为100% */
    }


    /* 定义矩形样式 */
    .rectangle {
      position: absolute; /* 设置定位为绝对定位 */
      top: 50%; /* 设置顶部距离为容器高度的50% */
      left: 50%; /* 设置左边距离为容器宽度的50% */
      transform: translate(-50%, -50%); /* 使用变换将矩形向上和向左移动50%,实现居中 */
      width: 400px; /* 设置矩形宽度为400像素 */
      height: 300px; /* 设置矩形高度为300像素 */
      background-color: #4CAF50; /* 设置背景颜色为绿色 */
      border: 2px solid #000; /* 设置边框为2像素的黑色实线 */
      border-radius: 10px; /* 设置圆角为10像素 */
    }
  </style>
</head>
<body>
  <div class="body-content"> <!-- 使用内容容器类 -->
    <div class="rectangle"></div> <!-- 使用矩形类 -->
  </div>
</body>
</html>

在这个示例中,.rectangle类使用position: absolute属性相对于其最近的相对定位祖先(.body-content)进行定位,然后使用transform: translate(-50%, -50%)将其向左和向上移动50%,以实现居中。这段代码使用了绝对定位和transform属性,这是一种更传统的方法,也可以实现相同的效果。

推荐学习:

三、提升开发效率的工具

在开发过程中,我们可以使用豆包MarsCode编程助手来提升我们的编码效率。豆包 MarsCode提供了智能补全、智能预测、智能问答等功能,帮助开发者节省时间,释放创造力。它支持超过100种编程语言,并兼容VSCode和JetBrains代码编辑器,是你编程路上的得力助手。详情见《豆包MarsCode官方使用指南》

通过这篇文章,我们不仅学习了如何使用CSS3创建圆角矩形,还了解了如何将其居中显示在页面上。希望这些知识能够帮助你在前端开发的道路上更进一步。如果你对编程感兴趣,不妨访问编程狮W3Cschool,开始你的编程学习之旅。

【示例代码】Python3实现AI版贪吃蛇

thbcm阅读(395)

本文转载至知乎ID:
Charles(白露未晞)知乎个人专栏

下载W3Cschool手机App,0基础随时随地学编程
>>戳此了解

导语

利用Python简单地实现AI版的贪吃蛇。。。

just for fun…

没有用深度学习。。。

算法是由一个叫Hawstein的人在好多好多年以前提出,感觉很有趣,就花了点时间复现了一下他的想法。。。

至于效果。。。

看脸。。。

真的只是觉得他的想法很有趣,仅此而已,因为如果你想让蛇机械地充满整个空间,只需要让蛇一直走S就好了,但是这就变得很无趣了。。。

相关文件

百度网盘下载链接: 💡 温馨提示:使用手机网盘APP转存,即可🎁 订阅更新本资源。后续更新都会直接推送至您的网盘,并收到APP订阅通知,无需再次寻找链接!

百度网盘链接:https://pan.baidu.com/s/1KPAV6FKLUFj11myoVjzQ2Q
" target="_blank">
💡 温馨提示:使用手机网盘APP转存,即可🎁 订阅更新本资源。后续更新都会直接推送至您的网盘,并收到APP订阅通知,无需再次寻找链接!
百度网盘链接:https://pan.baidu.com/s/1KPAV6FKLUFj11myoVjzQ2Q
 

密码: gb7k

主要思路

(1)蛇每走一步,就使用BFS计算游戏界面中每个位置(蛇身除外)到达食物的最短路径长;

(2)将蛇的安全定义为蛇是否可以跟着蛇尾运动,即蛇头和蛇尾间是否存在路径;

(3)蛇每次行动前先利用虚拟的蛇进行探路,若虚拟的蛇吃完食物后是安全的,真蛇才行动;

(4)若蛇和食物之间不存在路径或者吃完食物后并不安全,就跟着蛇尾走;

(5)若蛇和食物之间、蛇和蛇尾之间均不存在路径,就随便挑一步可行的来走;

(6)保证目标是食物时蛇走最短路径,目标是蛇尾时蛇走最长路径。

不足之处

由于食物是随机出现的,若虚拟的蛇跑一遍发现去吃食物是不安全的,真蛇就不会去吃食物,而是选择追着蛇尾跑,若一直如此,就陷入了死循环,蛇一直追着蛇尾跑跑跑。。。

直到你终止游戏为止。。。

开发工具

Python版本:3.5.4

相关模块:

pygame模块以及一些Python自带的模块。

环境搭建

安装Python并添加到环境变量,pip安装需要的相关模块即可。

运行方式

在cmd窗口运行AI_snake.py文件即可。

结果展示

动图一直上传失败。。。

所以随便截几个图吧~~~

更多

(1)为了保证代码简单易懂,所提供的代码冗余度较高(比如进行了不必要的重复计算),有兴趣者可对代码进行优化;

(2)相关文件中也提供了普通版本的贪吃蛇游戏(Normal_snake.py)。

CSS尺寸单位全解析:Web前端开发的必备知识

thbcm阅读(339)

在Web前端开发中,掌握CSS尺寸单位是构建响应式和适配不同设备的关键。编程狮将在本文中为您详细解读CSS中的各种尺寸单位,帮助您在移动端和桌面端都能游刃有余。

概览

CSS尺寸单位分为绝对单位和相对单位,它们共同构成了我们布局和设计的基础。

绝对单位

绝对单位提供了一个固定的尺寸,不受显示器或父元素的影响。

  • px (Pixel):像素,基于设备屏幕分辨率。
    div { font-size: 12px }
    p { text-indent: 24px }
  • pt (Points):磅,1 pt = 1/72 英寸。
    div { font-size: 10pt }
    p { height: 100pt }
  • pc (Picas):派卡,印刷中使用的单位。
    div { font-size: 10pc }
    p { height: 10pc }
  • in (Inches):英寸。
    div { font-size: 10in }
    p { height: 10in }
  • mm (Millimeter):毫米。
    div { font-size: 10mm }
    p { height: 10mm }
  • cm (Centimeter):厘米。
    div { font-size: 10cm }
    p { height: 10cm }
  • q (Quarter millimeters):1/4毫米。
    div { font-size: 20q }
    p { height: 100q }

相对单位

相对单位则依据其他尺寸或比例来定义。

  • % (Percentage):百分比,相对于父元素的宽度。
    <body>
    <div class="parent">
      <div class="children"></div>
    </div>
    </body>
    <style>
    .parent { width: 100px }
    .children { width: 66.6% }
    /* children的宽度为 66.6px */
    </style>
  • em (Element meter):根据当前文档对象内文本的字体尺寸计算。
    body { font-size: 14px }
    .element { font-size: 16px; width: 2em; /* 2em === 32px */ }
  • rem (Root element meter):根据根文档(body/html)字体计算尺寸。
    body { font-size: 14px }
    .element { font-size: 16px; width: 2rem; /* 2rem === 28px */ }
  • ex (Height of the letter x):文档字符“x”的高度。
    .x { height: 1ex; overflow: hidden; background: #aaa; }
  • ch (Width of the digit 0):文档数字“0”的宽度。
    .0 { width: 10ch; overflow: hidden; background: #ccc; }

运算

  • calc:允许进行四则运算。
    h1 { width: calc(100% - 10px + 2rem); }

单位比例

了解单位之间的转换比例对于精确设计至关重要:

  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

视口单位

  • vh (View height) / vw (View width):相对于视口的高度和宽度。
    .element { width: 50vw; height: 80vh; /* 根据视口尺寸计算 */ }
    .full-height { height: 100vh; /* 与视口同等高度 */ }
    h1 { width: 100vw; /* 与视口同宽 */ }
  • vmin / vmax:视口宽度或高度中较小/较大的那个尺寸。
    .box { height: 100vmin; width: 100vmin; /* 根据视口较小尺寸计算 */ }
    .box { height: 100vmax; width: 100vmax; /* 根据视口较大尺寸计算 */ }

以上就是CSS尺寸单位的全面解析,希望对您的Web前端开发之旅有所帮助。如果您想学习更多css免费教程,可以访问W3Cschool的CSS尺寸教程。

为什么要学Python?选择Python的八大理由。编程小白请入,写在学习前的建议。

thbcm阅读(384)

0
1
为什么要学Python?

学起来容易:

Python 就像英语⼀样,学起来挺直⽩的。它的代码看起来就像是在写英⽂,所以初学者学起来不会觉得头疼。

啥都能⼲:

想做⽹站?搞数据分析?或者是弄个机器⼈?Python 都能帮忙。它就像是⼀个多⾯⼿,各种活都能⼲。

资源超多:

Python 就像⼀个超⼤的⼯具箱,⾥⾯什么⼯具都有,⽽且⽹上还有超多的教程和帮助,遇到问题也容易找到答案。

到处都能跑:

不管你⽤的是 Windows 还是 Mac,甚⾄是 Linux,Python 都能在上⾯运⾏,⾮常⽅便。

开发快速:

⽤ Python 写程序就像搭积⽊⼀样快。它让你能快速把想法变成现实,不⽤花太多时间在繁琐的代码上。

有个超⼤的社区:

⽤ Python 就像加⼊了⼀个超⼤的俱乐部,遇到问题,总有⼈能帮忙解决。这个社区超级活跃,⽆论你是新⼿还是⽼⼿,都能从中受益。

学校⾥也爱⽤:

Python 因为简单,很多学校都⽤它来教编程。⽽且科学家们也爱⽤它来做研究,可以说是学术界的宠⼉。

新技术的最佳伙伴:

在 AI、机器学习这些最前沿的领域,Python 就像是⼀把利器,帮助⼈们开发出很多酷炫的东⻄。

学习建议
0
2

从基础开始:

先学习 Python 的基本语法,⽐如变量、循环、条件判断等。这是打好基础的关键。

动⼿实践:

编程最重要的是实践。你可以边学边做⼀些⼩项⽬,⽐如⼀个⼩游戏、数据分析项⽬或者⼀个⼩⽹站。这样可以加深理解。

利⽤在线资源:

⽹上有很多免费的 Python 教程和课程,⽐如 Codecademy、W3Cschool编程狮等,这些都是很好的学习资源。

加⼊社区:

Python 有⼀个很活跃的社区。你可以加⼊相关的论坛或社群,⽐如 StackOverflow 上的 Python 板块,那⾥可以找到很多志同道合的朋友,还可以提问和解决问题。

阅读代码:

看看别⼈是怎么写 Python 代码的。GitHub 上有很多开源项⽬,你可以学习其中的代码⻛格和结构。

多做项⽬:

实际的项⽬经验⾮常重要。你可以从⼩项⽬做起,逐渐增加难度。

学习框架和库:

了解和学习⼀些流⾏的 Python 库和框架,⽐如 Flask 或 Django(Web 开发),Pandas 和 NumPy(数据分析),TensorFlow 或 PyTorch(机器学习)。

持续更新知识:

技术是不断发展的,定期更新你的 Python 知识很重要。可以通过阅读官⽅⽂档、技术博客、参加线上或线下的研讨会等⽅式。

错误是你的朋友:

在编程中遇到错误是很正常的,不要⽓馁。错误是学习过程中的⼀部分,通过解决错误,你可以学到更多。

享受编程:

最重要的是,享受编程的过程。让编程成为⼀种乐趣,⽽不仅仅是⼀项任务。

联系我们