CSS简介

1. CSS简介

  1. CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表,文件后缀名为.css,用于HTML文档中元素样式的定义。
  2. CSS语法:
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color: yellowgreen;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>这是一个h1标题</h1>
</body>


</html>

在这里插入图片描述

2. CSS的引入样式

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

3. 选择器

3.1 全局选择器

可以与任何元素匹配,优先级最低,一般做样式初始化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
            margin: 0;
            padding: 0;
       }
    </style>
</head>
<body>
    <h1>这是一个h1标题</h1>
</body>


</html>

在这里插入图片描述

3.2 元素选择器

HTML文档中的元素,p、b、div、a、img、body等所有的标签,选择的使页面上所有这种类型的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       h1{
            font-size: 40px;
       }

       span{
        color:red;
       }
    </style>

</head>
<body>
    <h1>这是一个h1<span>标题</span></h1>
</body>
</html>

在这里插入图片描述

3.3 类选择器

用 . 来定义,针对想要的所有标签使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .title1{
            font-size: 40px;
       }

       .title1{
        color:red;
       }
    </style>

</head>
<body>
    <h1 class="title1">这是一个h1<span>标题</span></h1>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

3.4 ID选择器

以 # 来定义,针对某一个特定的标签来使用,只能使用一次,ID名称不可重复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #mytitle{
            font-size: 35px;
       }

       #mytitle{
        color:blueviolet;
       }
    </style>

</head>
<body>
    <h1 id="mytitle">这是一个h1<span>标题</span></h1>
</body>
</html>

在这里插入图片描述在这里插入图片描述

3.5 合并选择器

提取共同的样式,减少重复代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     h1,div{
        color:#856;
     }
    
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="text">这是一段文本...</div>
</body>
</html>

在这里插入图片描述

3.6 选择器的优先级

在这里插入图片描述

4.背景属性

CSS背景属性:
在这里插入图片描述

  • 设置背景颜色:通过background-color实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box{
        width: 300px;
        height: 300px;
        background-color: palevioletred;
     }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

  • 设置背景图片:通过background-image实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box{
        width: 300px;
        height: 480px;
     
        background-image: url(1.jpg);
     }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

  • 设置如何平铺背景图像:通过background-repeat实现。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box{
        width: 2010px;
        height: 1480px;
     
        background-image: url(1.jpg);
        background-repeat: repeat-x;
     }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

  • 设置背景图像的大小:通过background-size实现
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box{
        width: 2010px;
        height: 1480px;
     
        background-image: url(1.jpg);
        background-repeat: repeat-x;
        background-size: cover;
     }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

5. 文本属性

  • 指定元素文本的水平对齐方式:通过text-align实现
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    h1{
        text-align: center;
    }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

  • 设置添加到文本的修饰,通过text-decoration实现
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    h1{
        text-decoration: overline;
    }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span></h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

  • 控制文本的大小写:通过text-transform实现
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    h1{
        text-transform: capitalize;
    }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span>apple,banana</h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

  • 设置文本块中首行文本的缩进:通过text-indent实现
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    h1{
        text-indent: 60px;
    }
    </style>

</head>
<body>
    <h1 class="header">这是一个h1<span>标题</span>apple,banana</h1>
    <div class="box">这是一段文本... </div>
</body>
</html>

在这里插入图片描述

6. 表格属性

  • 设置表格边框:通过border实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 2px solid plum;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

  • 设置表格的边框是否被折叠成一个单一的边框或隔开:通过border-collapse实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 2px solid plum;
            border-collapse: collapse;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

  • 设置表格的宽度和高度:通过weith和height实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 2px solid plum;
            
        }
        table{
            width: 500px;
            border-collapse: collapse;    
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

  • 设置表格文字对齐方式:通过text-align实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 2px solid plum;
            
        }
        table{
            width: 500px;
            border-collapse: collapse;    
        }
        td{
            text-align: center;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

  • 设置表格线和文字之间的间隙:通过padding实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 2px solid plum;
            border-collapse: collapse;  
        }
        td{
            text-align: center;
            padding: 20px;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

  • 设置表格的颜色:通过background-color来实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 2px solid plum;
            border-collapse: collapse;  
        }
        td{
            text-align: center;
            padding: 20px;
            background-color: aqua;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

7. 关系选择器

  • 后代选择器:
    选择所有被E元素包含的F元素,中间用空格隔开: E F{}。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
           color: aqua;
        }
        
    </style>

</head>
<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
</body>
</html>

在这里插入图片描述

  • 子代选择器:
    选择所有作为E元素的直接子元素F,对更深一层的元素不起作用,用>表示。
    E>F{}。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul>li{
           color: aqua;
        }
        
    </style>

</head>
<body>
    <ul>
        <li>水果
            <div>苹果</div>
        </li>
        <div>饮料
            <div>可乐</div>
        </div>
    </ul>
</body>
</html>

在这里插入图片描述

  • 相邻兄弟选择器
    选择紧跟E元素后面的F元素,用加号表示,E+F{}。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2+p{
            color:red;
        }
    </style>

</head>
<body>
    <h2>h2标题</h2>
    <p>段落1</p>
    <p>段落2</p>
</body>
</html>

在这里插入图片描述

  • 通用兄弟选择器
    选择E元素之后的所有兄弟元素F,作用于多个元素
    E~F{}。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2~p{
            color:red;
        }
    </style>

</head>
<body>
    <h2>h2标题</h2>
    <p>段落1</p>
    <p>段落2</p>
</body>
</html>

在这里插入图片描述

8. CSS盒子模型

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            padding: 50px 10px;
            border: 5px solid chartreuse;
            margin: 30px;
        }
    </style>

</head>
<body>
    <h2>h2标题</h2>
    <p>段落1</p>
    <p>段落2</p>
</body>
</html>

在这里插入图片描述

9. 文档流

标准流有诸多限制:

  • 高矮不齐,底边对齐
  • 空白折叠
    • 无论多少个空格、换行、tab,都会折叠为一个空格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            width: 50px;
            height: 80px;
        
            background-color: palevioletred;
        }
        img{
            width: 100px;
            height: 180px;
            
        }

    </style>

</head>
<body>
    <span>这是一段文本</span>
    <img src="1.jpg" alt="">

    
</body>
</html>

在这里插入图片描述

10. 浮动

在这里插入图片描述

浮动原理:

  • 浮动以后使元素脱离了文档流
  • 浮动只有左、右浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
    </style>

</head>
<body>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
    </ul>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul li{
        float: left;
        margin: 30px;;
      }
    </style>

</head>
<body>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
    </ul>
</body>
</html>

在这里插入图片描述

  • 绝对定位
  • 固定定位

11. 清除浮动

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/516716.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言—用EasyX实现反弹球消砖块游戏

代码效果如下 #undef UNICODE #undef _UNICODE #include<graphics.h> #include<conio.h> #include<time.h> #include<stdio.h>#define width 640 #define high 480 #define brick_num 10int ball_x, ball_y; int ball_vx, ball_vy; int radius; int ba…

删除中间节点(狸猫换太子法)

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 每一个裂缝都是为透出光而努力&#…

香橙派OPI Airpro上的智能交通监管系统(保姆级代码)

首先&#xff0c;你需要安装必要的软件包和库&#xff0c;例如Python3和TensorFlow。然后&#xff0c;你可以编写脚本来处理数据采集、分析和报告生成等任务。以下是一个简单的示例&#xff1a; # 安装必要的软件包 sudo apt-get update sudo apt-get install -y python3 pyth…

腾讯云4核8G服务器性能怎么样?大明白来说说

腾讯云4核8G服务器价格&#xff1a;轻量4核8G12M优惠价格646元15个月、CVM S5服务器4核8G配置1437元买1年送3个月。腾讯云4核8G服务器支持多少人同时在线&#xff1f;支持30个并发数&#xff0c;可容纳日均1万IP人数访问。腾讯云百科txybk.com整理4核8G服务器支持多少人同时在线…

4月4号总结

java学习 一.接口 1.介绍 定义接口需要使用到关键字interface去定义接口。 格式如下&#xff1a; 类与接口的关系不是继承&#xff0c;而是实现&#xff0c;用关键字 implements &#xff0c;格式如下&#xff1a; 这个类去实现接口&#xff0c;其中的关系就相当于&#xf…

DFS(基础,回溯,剪枝,记忆化)搜索

DFS基础 DFS(深度优先搜索) 基于递归求解问题&#xff0c;而针对搜索的过程 对于问题的介入状态叫初始状态&#xff0c;要求的状态叫目标状态 这里的搜索就是对实时产生的状态进行分析检测&#xff0c;直到得到一个目标状态或符合要求的最佳状态为止。对于实时产生新的状态…

不到2000字,轻松带你搞懂STM32中GPIO的8种工作模式

大家好&#xff0c;我是知微&#xff01; 学习过单片机的小伙伴对GPIO肯定不陌生&#xff0c;GPIO &#xff08;general purpose input output&#xff09;是通用输入输出端口的简称&#xff0c;通俗来讲就是单片机上的引脚。 在STM32中&#xff0c;GPIO的工作模式被细分为8种…

gitcode 配置 SSH 公钥

在 gitcode 上配置SSH公钥后&#xff0c;可以通过SSH协议安全地访问远程仓库&#xff0c;无需每次都输入用户名和密码。以下是配置SSH公钥的步骤&#xff1a; 5分钟解决方案 用 OpenSSH公钥生成器 生成 公钥和私钥&#xff0c;私钥文件&#xff08;id_rsa&#xff09;下载&am…

算法设计与分析实验报告python实现(排序算法、三壶谜题、交替放置的碟子、带锁的门)

一、 实验目的 1&#xff0e;加深学生对算法设计方法的基本思想、基本步骤、基本方法的理解与掌握&#xff1b; 2&#xff0e;提高学生利用课堂所学知识解决实际问题的能力&#xff1b; 3&#xff0e;提高学生综合应用所学知识解决实际问题的能力。 二、实验任务 1、排序算法…

python中如何使用help()

help()函数帮助我们了解模块、类型、对象、方法、属性的详细信息。 1、帮助查看类型详细信息&#xff0c;包含类的创建方式、属性、方法 >>> help(list) Help on class list in module builtins: class list(object)| list() -> new empty list| list(iterable)…

EmpireCMS:帝国源码cms网站搬家/数据迁移方法教程

帝国cms迁移数据&#xff0c;从一台旧的服务器把网站文件都搬迁到新的服务器&#xff0c;会涉及到附件&#xff0c;数据库信息等&#xff0c;很多人在搬迁的时候也会遇到各种问题&#xff0c;下面是小编整理的关于如何搬迁帝国cms数据的解决方案和思路&#xff0c;方便新手站长…

957: 逆置单链表

学习版 【C语言】 #include<iostream> using namespace std; typedef struct LNode {char data;struct LNode* next;LNode(char x) :data(x), next(nullptr) {} }LNode; void creatlist(LNode *&L) {int n;char e;cin >> n;LNode* p1, * p2;p1 L;for (int i…

Kubernetes的基础概念

目录 一、概述 二、为什么要用Kubernetes 2.1 从技术层面分析 2.1.1 问题解答 2.1.2 Docker等“裸容器”的不足 2.1.2.1 宕机无法自动恢复 2.1.2.2 健康检查不到位 2.1.2.3 部署、回滚、扩容问题 2.1.2.4 运维难 2.1.3 总结 2.2 从开发人员层面分析 2.2.1 分析日志 …

关于首助编辑高手

首助编辑高手是一款专为现代办公场景设计的集合软件&#xff0c;致力于提升用户的办公效率和便利性。它集成了多种实用的办公辅助工具&#xff0c;包括但不限于文档编辑、图片处理、PDF编辑、文本批量操作等功能&#xff0c;帮助用户轻松应对各种办公挑战。 首助编辑高手主要功…

ChatGPT 在做什么,为什么有效?

原文&#xff1a;What Is ChatGPT Doing … and Why Does It Work? 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 序言 这本简短的书试图从第一原理解释 ChatGPT 是如何工作的。在某种程度上&#xff0c;这是关于技术的故事。但它也是关于科学的故事。以及关于哲学…

【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(五)- 向量加载和存储

1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容&#xff1a; 这是一份关于向量扩展的详细技术文档&#xff0c;内容覆盖了向量指令集的多个关键方面&#xff0c;如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…

七大开源基金会联合制定符合 CRA 法案的共同标准

欧洲议会上个月通过的《欧洲网络弹性法案》(CRA) 制定通用规范和标准 Apache 软件基金会、Blender 基金会、Eclipse 基金会、OpenSSL 软件基金会、PHP 基金会、Python 软件基金会 和 Rust 基金会 这项工作由 Eclipse 基金会牵头&#xff0c;旨在建立基于现有开源最佳实践的安全…

我认识的Git-Git工作流

WorkFlow 的字面意思&#xff0c;工作流&#xff0c;即工作流程。工作流不涉及任何命令&#xff0c;因为它就是一个规则&#xff0c;完全由开发者自定义&#xff0c;并且自遵守。 集中式工作流 集中式工作流以中央仓库作为项目所有修改的单点实体。相比svn缺省的开发分支trunk…

canvas+javascript 实现贪吃蛇游戏

引言 在当今数字化时代&#xff0c;编程已经成为一种极具创造力和趣味性的活动。通过编写代码&#xff0c;我们可以创造出各种各样的应用程序和游戏&#xff0c;其中包括经典的贪吃蛇游戏。本文将向您介绍如何使用 JavaScript 编程语言制作一个简单而有趣的贪吃蛇游戏&#xf…

韩顺平Java | C23 反射Reflection

需求&#xff1a;通过外部文件配置&#xff0c;在不修改源码情况下控制程序&#xff08;符合设计模式ocp开闭原则&#xff1a;不修改源码的情况下扩容功能&#xff09; ※反射机制 反射机制允许程序在执行期间借助于ReflectioAPI取得任何类的内部信息&#xff08;如成员变量&…