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

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

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

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

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

html 复制代码
<!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>

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

相关推荐
反向跟单策略2 分钟前
期货反向跟单:跨合约跟单的意义及操作方法
大数据·人工智能·学习·数据分析·区块链
前端付豪4 分钟前
Prompt Playground(实现提示词工作台)
前端·人工智能·后端
竹林8184 分钟前
在NFT项目中集成IPFS:从Pinata上传到前端展示的完整实战与踩坑
前端·javascript
取名不易5 分钟前
canves实现画布
前端
格林威7 分钟前
Baumer相机铝型材表面划伤长度测量:实现损伤量化评估的 5 个关键技术,附 OpenCV+Halcon 实战代码!
开发语言·人工智能·数码相机·opencv·计算机视觉·c#·工业相机
AlkaidSTART8 分钟前
深入浅出 React Hooks 原理:从 Fiber 的 memoizedState 链表讲到 updateQueue 调度
前端
计算机安禾8 分钟前
【数据结构与算法】第16篇:串(String)的定长顺序存储与朴素模式匹配
c语言·数据结构·c++·学习·算法·visual studio code·visual studio
一颗小行星10 分钟前
Harness Engineering 前端开发的下一个阶段
前端·ai编程
AI科技星17 分钟前
基于v≡c公设的理论优化方案
c语言·开发语言·算法·机器学习·数据挖掘