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

news2024/11/23 18:33:57

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

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

  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.coloradmin.cn/o/1566292.html

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

相关文章

AJAX —— 学习(三)

目录 一、jQuery 中的 AJAX &#xff08;一&#xff09;get 方法 1.语法介绍 2.结果实现 &#xff08;二&#xff09;post 方法 1.语法介绍 2.结果实现 &#xff08;三&#xff09;通用型的 AJAX 方法 1.语法介绍 2.结果实现 二、AJAX 工具库 axios &#xff08;…

js 基础知识 forEach 和 map 的区别,及 map 不加 return 返回什么

问题一&#xff1a;forEach 和 map 之间的区别&#xff1a; 1、forEach 不返回新数组&#xff0c;map 返回新数组&#xff0c;其中包含回调函数的返回值。 2、用途&#xff1a;如果只想要遍历数组并对每个元素执行某些操作而不产生新数组&#xff0c;那么应该使用 forEach&am…

全网最强JavaWeb笔记 | 万字长文爆肝JavaWeb开发——day04_Maven入门

万字长文爆肝黑马程序员2023最新版JavaWeb教程。这套教程打破常规&#xff0c;不再局限于过时的老套JavaWeb技术&#xff0c;而是与时俱进&#xff0c;运用的都是企业中流行的前沿技术。笔者认真跟着这个教程&#xff0c;再一次认真学习一遍JavaWeb教程&#xff0c;温故而知新&…

ETL工具-nifi干货系列 第八讲 处理器PutDatabaseRecord 写数据库(详细)

1、本节通过一个小例子来讲解下处理器PutDatabaseRecord&#xff0c;该处理器的作用是将数据写入数据库。 如下流程通过处理器GenerateFlowFile 生成数据&#xff0c;然后通过处理器JoltTransformJSON转换结构&#xff0c;最后通过处理器PutDatabaseRecord将数据写入数据库。如…

软件架构风格_4.虚拟机体系结构风格

虚拟机体系结构风格的基本思想是人为构建一个运行环境&#xff0c;在这个环境之上&#xff0c;可以解析与运行自定义的一些语言&#xff0c;这样来增加架构的灵活性。虚拟机体系结构风格主要包括解释器风格和规则系统风格。 1.解释器体系结构风格 一个解释器通常包括完成解释工…

首个适配Visual Studio平台的国产智能编程助手CodeGeeX正式上线!C#程序员必备效率神器!

CodeGeeX是一款免费的智能编程助手。 继CodeGeeX在Visual Studio Code、JetBrains IDEs全家桶、HBuilderX、deepin-IDE等主流IDE中上线后&#xff0c;用户呼声最高的Visual Studio平台的适配插件产品也正式推出上线了&#xff01;成为首个适配Visual Studio平台的国产智能编程…

docker导出导入镜像

docker导出镜像 查看要导出的镜像 docker images主要有两列 REPOSITORY TAG 导出命令 导出公式 docker save -o xxxx.tar REPOSITORY:TAG例子 docker save -o minio.tar minio/minio:latestminio/minio:latest可以使用image id代替&#xff0c;但是使用image id会导致导…

笔记: JavaSE day15 笔记

第十五天课堂笔记 数组 可变长参数★★★ 方法 : 返回值类型 方法名(参数类型 参数名 , 参数类型 … 可变长参数名){}方法体 : 变长参数 相当于一个数组一个数组最多只能有一个可变长参数, 并放到列表的最后parameter : 方法参数 数组相关算法★★ 冒泡排序 由小到大: 从前…

基于springboot实现校园周边美食探索及分享平台系统项目【项目源码+论文说明】

基于springboot实现园周边美食探索及分享平台系统演示 摘要 美食一直是与人们日常生活息息相关的产业。传统的电话订餐或者到店消费已经不能适应市场发展的需求。随着网络的迅速崛起&#xff0c;互联网日益成为提供信息的最佳俱渠道和逐步走向传统的流通领域&#xff0c;传统的…

2024 ccfcsp认证打卡 2023 05 01 重复局面

2023 05 01 重复局面 题目题解1题解2区别&#xff1a;数据存储方式&#xff1a;时间复杂度&#xff1a;空间复杂度&#xff1a; 总结&#xff1a; 题目 题解1 import java.util.*;public class Main {public static void main(String[] args) {Scanner input new Scanner(Sys…

vivado eFUSE 寄存器访问和编程

eFUSE 寄存器访问和编程 注释 &#xff1a; 在 MPSoC 和 Versal 器件上不支持以下 eFUSE 访问和编程方法。 7 系列、 UltraScale 和 UltraScale 器件具有一次性可编程位用于执行特定功能 &#xff0c; 称为 eFUSE 位。不同 eFUSE 位类型如 下所述&#xff1a; • …

利用Winform实现简陋版的温度计(仅供参考)

本人水平有限&#xff0c;如有写得不对的地方&#xff0c;望指正。为了简单化&#xff0c;做了一个简陋版的温度计控件&#xff0c;有点丑哈。本文的内容仅供参考 测试环境&#xff1a; visual studio 2017 .net framework 4.0 效果图如下&#xff1a; 步骤如下&#xff1a;…

SpringBoot 微服务项目,打包报错:找不到符号

错误定位到这个代码&#xff0c;调试、编译都正常&#xff0c;就打包报错 最后发现&#xff0c;这个类是其他项目里的&#xff0c;需要重新生成其他项目后&#xff0c;再来打包就行了。

dhcp中继代理

不同过路由器分配ip了&#xff0c;通过一台服务器来代替&#xff0c;路由器充当中继代理功能&#xff0c;如下图 服务器地址&#xff1a;172.10.1.1/24 配置流程&#xff1a; 1.使能dhcp功能 2.各个接口网关地址&#xff0c;配置dhcp中继功能 dhcp select relay &#xff0…

ansible-自动化工具

一、ansible概述 不是C/S架构&#xff0c;就是一种工具 1&#xff1a;linux自动化运维 编写程序实现运维自动化&#xff1a;shell python 工具模式自动化&#xff1a; ①OS Provisioning&#xff1a; RedHat satellite&#xff1b;PXE&#xff08;可实现dhcp和tftp&#…

基于深度学习的吸烟检测系统(网页版+YOLOv8/v7/v6/v5代码+训练数据集)

摘要&#xff1a;本文深入研究了基于YOLOv8/v7/v6/v5等深度学习模型的吸烟行为检测系统&#xff0c;核心采用YOLOv8并整合了YOLOv7、YOLOv6、YOLOv5算法&#xff0c;进行性能指标对比&#xff1b;详述了国内外研究现状、数据集处理、算法原理、模型构建与训练代码&#xff0c;及…

HDLbits 刷题 --Conditional

学习: Verilog has a ternary conditional operator ( ? : ) much like C: (condition ? if_true : if_false) This can be used to choose one of two values based on condition (a mux!) on one line, without using an if-then inside a combinational always block. …

MyBatis强大的动态Sql功能

1.动态不定增加 根据需求 , 动态的拼接SQL 。 用户有的信息是必须输入&#xff0c;但有的不是必须进行输入 比如在填写注册信息的时候&#xff0c;有时候密码是一定要填写的&#xff0c;而银行卡号不是必须填写的 1)注解方式 测试类中 &#xff1a; 使用 if 标签 可以实现动…

SAP 销售订单BOM使用场景简介

SAP系统中通常会存在很多的BOM类型,有生产订单BOM、销售订单BOM、WBSBOM、标准BOM这几类。 订单BOM >= 销售BOM >= 标准BOM 订单BOM:通常是根据标准BOM基础上由PMC去调整一个物料的用量等,根据生产订单的BOM 销售BOM:根据销售订单号+行项目号创建的BOM,是根据特定…

定时器与晶振时钟、中断系统、定时中断

定时器 简介&#xff1a; C51中的定时器和计数器是同一个硬件电路支持的&#xff0c;通过寄存器配置不同&#xff0c;就可以将他当做定时器 或者计数器使用。 确切的说&#xff0c;定时器和计数器区别是致使他们背后的计数存储器加1的信号不同。当配置为定时器使用时&#xff0…