CSS基础选择器 小案例复习(画三个小盒子)

(大家好,前面我们学习了基础的选择器,俗话说:温故而知新。所以今天我们将通过小案例来复习前面学过的小知识点。另,十分感谢大家对我文章的支持❤️)

通过这个案例复习两个地方:

  1. 类选择器的使用。
  2. div就是一个盒子,用来装网页内容的。

以下是我们要创造的(画三个小盒子):

 

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS基础选择器小案例(画三个小盒子)</title><style>.red{width: 100px;height: 100px;background-color: red;}.green{width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><div class="red"></div><div class="green"></div><div class="red"></div>
</body>
</html>

 (今日文案分享:请把努力当成一种习惯,而不是三分钟热度。

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二叉树的高效非递归层次遍历:一种O(n)时间复杂度与固定空间复杂度的解决方案

TOC 在计算机科学中&#xff0c;二叉树是一种非常重要的数据结构&#xff0c;它在算法设计和问题解决中扮演着关键角色。本文将探讨如何使用非递归方法遍历一个给定的二叉树&#xff0c;并在不修改树结构的前提下&#xff0c;输出每个节点的关键字。这个过程将在O(n)的时间复杂…

Xmind安装在指定目录

场景&#xff1a; Xmind安装默认是安装C盘。 问题描述 一般用户都习惯将软件安装在其他盘&#xff0c;但是Xmind不支持安装的时候指定磁盘或目录。 解决方案&#xff1a; 1、在D盘创建一个文件夹&#xff0c;用于安装Xmind&#xff0c;比如创建一个D:\Program Files (x86)…

车载通信与DDS标准解读系列(4):DDSI-RTPS协议

▎什么是RTPS 在DDS协议中&#xff0c;主要描述了实现数据分发服务的DCPS模型和QoS策略&#xff0c;但是我们还不清楚数据怎样在网络中传输&#xff0c;想要了解这些内容&#xff0c;就需要请出咱们的数据搬运工——RTPS。 RTPS全称是Real-Time Publish-Subscribe Protocol&a…

JavaScript高级 —— 学习(一)

目录 一、作用域 &#xff08;一&#xff09;局部作用域 1.函数作用域 2.块作用域 &#xff08;二&#xff09;全局作用域 二、垃圾回收机制 GC &#xff08;一&#xff09;生命周期 1.内存分配 2.内存使用 3.内存回收 4.特殊情况——内存泄漏&#xff1a; 注意&…

了解与生成火焰图

目录 一、如何看懂火焰图 1、基本特征 2、基本分类 二、如何生成火焰图 1、捕获调用栈 2、折叠栈 3、转换为 svg 格式 4、展示 svg 一、如何看懂火焰图 1、基本特征 &#xff08;1&#xff09;纵轴&#xff1a;即每一列代表一个调用栈&#xff0c;每一个格子代表一个函…

【跨境商家福音】一款性价比高、好用的跨境选品工具

亚马逊、速卖通、Shopee 、Lazada、美客多、eBay、SHEIN、Temu、Tiktok、shopify等跨境电商平台&#xff0c;其用户消费喜好多样&#xff0c;涵盖服装、美妆、电子产品等多个品类。而店雷达作为一款基于大数据和人工智能技术的电商分析工具&#xff0c;为商家提供了强大的选品和…

2024年github之node排行榜top50

如果有帮助到您还请动动手帮忙点赞&#xff0c;关注&#xff0c;评论转发&#xff0c;感谢啦&#xff01;&#x1f495;&#x1f495;&#x1f495;&#x1f618;&#x1f618;&#x1f618; 本文由Butterfly一键发布工具发布 2024年github之node排行榜top50 语言star项目名称…

宁盾身份域管与Coremail邮件系统完成兼容互认证,持续深化信创布局

在信创国产化改造的背景下&#xff0c;企业邮箱的替换是许多党政、央国企、金融、制造企业面临的重要任务。为了满足企业对国产邮箱、OA等其他应用、终端实现统一身份认证&#xff0c;宁盾国产化身份域管与 Coremail XT 安全增强电子邮件系统 V5.0、V6.0 完成了产品兼容互认证&…

破解密码:掌握2024年的营销归因

Cracking the Code: Mastering Marketing Attribution in 2024 营销归因是识别哪些营销渠道和触及点有助于销售或转化的过程。随着消费者继续通过多个渠道与品牌互动&#xff0c;掌握营销归因对企业来说变得越来越重要。在这篇文章中&#xff0c;我们将探讨破解代码和有效衡量…

【MySQL】数据类型2

一、字符类型 char 和 varchar char&#xff08;N&#xff09;&#xff0c;N&#xff1a;容量多大&#xff0c;相当于C语言中char [N]的数组开多大。 varchar&#xff08;N&#xff09;&#xff0c;N:最大限制&#xff0c;相当于C的string一样&#xff0c;它会根据我们的字符多…

游戏运营分析:如何在新游戏上线初期实现精细化运营?

一、背景介绍 在当今的手游市场中&#xff0c;每一款新游戏的发布都如同踏上一段充满未知与挑战的探险之旅。游戏刚上线时&#xff0c;运营情况往往如同飘摇的小船&#xff0c;随时可能受到风浪的侵袭。此时&#xff0c;如何准确地找到问题所在&#xff0c;为游戏的健康运营和持…

【Python项目】AI动物识别工具

目录 背景 技术简介 系统简介 界面预览 背景 成像技术在全球科技发展中扮演了关键角色。在科学研究领域&#xff0c;拍摄所得的图像成为了一种不可或缺的研究工具。特别是在生态学与动物学研究中&#xff0c;鉴于地球的广阔地域和多样的气候条件&#xff0c;利用图像技术捕…

【Qt 学习笔记】输入框实现helloworld | QLineEdit的使用

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 输入框实现helloworld | QLineEdit的使用 文章编号&#xff1a;Qt 学习…

pytest接口自动化框架实际应用

一、自动化实现的目标 1、测试用例数据驱动。 2、测试数据和用例分离。 3、每个测试用例拥有专属的测试数据有明确的测试初始状 4、测试用例的执行不依赖其他测试用例执行所产生的数据 5、建立体系化测试数据&#xff0c;进行数据依赖管理&#xff0c;覆盖全部测试分层策略要求…

PCB的电气/物理特性检查项目需思考的问题

在PCB设计、制造和装配过程中&#xff0c;为确保产品性能和质量&#xff0c;电子工程师必须进行电气特性和物理特性检查&#xff0c;然而对很多新人来说如何高效进行检查是个难题&#xff0c;所以下面将分别探讨这些检查时需要考虑的问题。 1、PCB电气特性检查项目①导线参数分…

CLIP 图文检索,相似度计算

CLIP 是OpenAI提出的神经网络&#xff0c;它可以从自然语言监督中有效地学习视觉概念。 CLIP 可以应用于任何视觉分类基准&#xff0c;只需提供要识别的视觉类别的名称&#xff0c;类似于 GPT-2 和 GPT-3 的“零样本”功能。 相关paper 用法可以参考github 这里举几个使用CLI…

CTK插件框架学习-信号槽(05)

CTK插件框架学习-事件监听(04)https://mp.csdn.net/mp_blog/creation/editor/137171155 一、主要流程 信号发送者告诉服务要发送的信号信号发送者发送信号信号接收者告诉服务当触发某个订阅的主题时通知槽函数信号接收者处理槽函数信号槽参数类型必须为&#xff08;const ctk…

如何使用Kimi API开发应用

如何使用Kimi API开发应用 使用Kimi时&#xff0c;需要安装一个OpenAI的客户端&#xff0c;注意不是langchain-openai&#xff0c;是openai。需要申请一个Kimi的A PI-KEY。 示例代码如下&#xff1a; from openai import OpenAIclient OpenAI(api_key"my-api-key&quo…

拓扑排序(习题笔记 思路整理)之一

​​​​​​1.P4017 最大食物链计数 确实比较板子&#xff0c;但是考验思维&#xff0c;我愿称之为思维拓扑排序 作为拓扑的第一题&#xff0c;确实没想到要进行思维处理 这里考虑用一种dp的思维方式&#xff08;&#xff1f; 多引入两个变量&#xff0c;一个记录出度&…

[RK3588-Android12] 调试MIPI-双通道-压缩屏(Video Mode/MIPI Dphy 8Lane/DSC 144HZ)

问题描述 被测屏幕&#xff1a;小米Pad6 分辨率&#xff1a;1800X2880 模式&#xff1a;Video Mode/MIPI Dphy 8Lane/DSC 144HZ PPS: 11 00 00 89 30 80 0B 40 03 84 00 14 01 C2 01 C2 02 00 01 F4 00 20 01 AB 00 06 00 0D 05 7A 06 1A 18 00 10 F0 03 0C 20 00 06 0B 0B 33…