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

news/2024/12/22 13:37:54/

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

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

  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.ppmy.cn/news/1405403.html

相关文章

SQLite中的隔离(八)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite版本3中的文件锁定和并发(七&#xff09; 下一篇&#xff1a;SQLite 查询优化器概述&#xff08;九&#xff09; 数据库的“isolation”属性确定何时对 一个操作的数据库对其他并发操作可见。 数据库连接之…

Ubuntu服务器搭建 - 环境篇

Ubuntu服务器搭建 - 环境篇 基于腾讯云服务器 - Ubuntu 20.04 LTS 一、安装 - MySQL 1.1 概述 MySQL安装方式有三种: 1. 使用Ubuntu 包管理工具 apt安装 2. 使用MySQL官方APT存储库安装 3. 使用MySQL官方二进制发行版安装 1.2 安装 MySQL 使用MySQL官方APT存储库安装 $ wget…

基于springboot+vue+Mysql的招生管理系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

【python学习笔记】pandas写入数据库时出现 “nan can‘t be used with mysql“ 错误的解决方法

pandas写入数据库时出错&#xff1a;nan cant be used with mysql pandas写入数据库时出错的解决方法pandas 2.0以前的版本pandas 2.0以上版本2.0以前版本的pandas是否能采用2.0以上版本的方法替换成None&#xff1f; pandas写入数据库时出错的解决方法 在使用pandas将一段数据…

为 Linux 中的 Docker 配置阿里云和网易云国内镜像加速下载中心

由于默认情况下&#xff0c;Docker 的镜像下载中心默认为国外的镜像中心&#xff0c;使用该镜像中心拉去镜像会十分缓慢&#xff0c;所以我们需要配置国内的 Docker 镜像下载中心&#xff0c;加速 Docker 镜像的拉取。Docker 的国内镜像下载中心常用的有&#xff1a;阿里云、网…

快速跨国传输怎么实现?

在当今全球化的商业舞台上&#xff0c;迅速且安全地跨国界传输大型文件已经成为企业运营的一个核心环节。但是&#xff0c;这一过程往往面临速度缓慢和安全隐患的问题&#xff0c;这些问题严重地影响了企业的工作效率和数据的安全性。小编将会深入探讨企业在进行跨国大文件传输…

大日志精选案例四:某省级大数据集团日志审计优化实战解析

“在集团日常运营中&#xff0c;数据安全始终是我们关注的重点。过去&#xff0c;数据量大、处理速度慢&#xff0c;导致日志数据难以迅速获取和分析&#xff0c;影响业务决策。但自从引入聚铭大日志解决方案后&#xff0c;系统日志和用户行为数据都得到了高效处理与存储。该方…

第九章动态规划——不同路径(二)有障碍物

目录 力扣题号&#xff1a;63. 不同路径 II - 力扣&#xff08;LeetCode&#xff09; 题目描述 示例 提示 思路 解法一&#xff1a;动态规划 &#xff08;1&#xff09;dp数组的下标及其含义 &#xff08;2&#xff09;确定递推公式 &#xff08;3&#xff09;初始化递…