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.hqwc.cn/news/589470.html

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

相关文章

GICv3学习

中断分组 GICD_CTLR&#xff1a;配置是否支持group0、安全group1、非安全group1中断&#xff1b; 怎么配置中断在哪个组&#xff1b; 怎么知道中断是安全的还是非安全的&#xff1b; GICD_IGROUPR&#xff1a; 配置中断分组、中断是安全还是非安全&#xff1b; 4.4 软件产生中…

北方经贸经济类知网收录月刊投稿发表论文

《北方经贸》期刊是由国家新闻出版总署批准&#xff0c;黑龙江省教育厅主管&#xff0c;黑龙江省经济管理干部学院主办的经济类综合期刊。期刊融理论性、知识性、实践性于一体&#xff0c;立足龙江&#xff0c;辐射全国&#xff0c;面向世界&#xff0c;注重研究解决重大现实理…

探索智慧物流园区系统的发展蓝图

在当今数字化时代&#xff0c;智慧物流园区系统正经历着深刻的变革和快速的发展。那么&#xff0c;智慧物流园区系统的发展趋势究竟是什么呢&#xff1f;让我们一同深入探讨。 &#xff08;1&#xff09;智能化是智慧物流园区系统的重要发展趋势之一。通过人工智能、大数据等先…

双机 Cartogtapher 建图文件配置

双机cartogtapher建图 最近在做硕士毕设的最后一个实验&#xff0c;其中涉及到多机建图&#xff0c;经过调研最终采用cartographer建图算法&#xff0c;其中配置多机建图的文件有些麻烦&#xff0c;特此博客以记录 非常感谢我的同门 ”叶少“ 山上的稻草人-CSDN博客的帮助&am…

文心一言指令词宝典之旅行篇

作者&#xff1a;哈哥撩编程&#xff08;视频号、抖音、公众号同名&#xff09; 新星计划全栈领域优秀创作者博客专家全国博客之星第四名超级个体COC上海社区主理人特约讲师谷歌亚马逊演讲嘉宾科技博主极星会首批签约作者 &#x1f3c6; 推荐专栏&#xff1a; &#x1f3c5;…

【C++】理解vector的底层原理并模拟实现(手撕vector)

目录 01.成员变量 02.构造与析构 03.管理内存 1.reserve函数 2.reszie函数 04.访问元素 05.修改元素 之前的一篇博客讲到了vector的介绍及其运用&#xff1a;vector的介绍及使用说明 但是我们不仅要会用&#xff0c;还要理解它的底层原理&#xff0c;今天我们通过手撕一个…

wireshark解析grpc/protobuf的方法

1&#xff0c;wireshark需要安装3.20以上 下载地址&#xff1a;https://www.wireshark.org/ 2&#xff0c;如果版本不对&#xff0c;需要卸载&#xff0c;卸载方法&#xff1a; sudo rm -rf /Applications/Wireshark.app sudo rm -rf $HOME/.config/wireshark sudo rm -rf /…

设计模式-结构型-享元模式Flyweight

享元模式的特点&#xff1a; 享元模式可以共享相同的对象&#xff0c;避免创建过多的对象实例&#xff0c;从而节省内存资源 使用场景&#xff1a; 常用于需要创建大量相似的对象的情况 享元接口类 public interface Flyweight { void operate(String extrinsicState); } 享…

报错 | 2023新版IDEA/PyCharm连接远程服务器的Docker需使用密钥认证

文章目录 01 问题情景02 需求场景及工作原理03 解决步骤3.1 在本地生成密钥对3.2 将公钥保存至服务器3.3 本地连接时选择私钥文件 网上有很多文章讲怎么解决&#xff0c;但都要么写得很复杂&#xff0c;要么没有写明白原理或操作详情&#xff0c;造成我一头雾水。 01 问题情景…

一维卷积神经网络的特征可视化

随着以深度学习为代表的人工智能技术的不断发展&#xff0c;许多具有重要意义的深度学习模型和算法被开发出来&#xff0c;应用于计算机视觉、自然语言处理、语音处理、生物医疗、金融应用等众多行业领域。深度学习先进的数据挖掘、训练和分析能力来源于深度神经网络的海量模型…

vue2+element-ui 实现OSS分片上传+取消上传

遇到问题&#xff1a;项目中需要上传500MB以上的视频。一开始使用上传组件el-upload&#xff0c;调用后台接口&#xff0c;但是出现了onprogress显示百分百后接口一直pending&#xff0c;过了很多秒后接口才通&#xff0c;如果遇到大文件的话&#xff0c;接口就会报超时。 解决…

Linux网络协议栈从应用层到内核层④

文章目录 1、网卡接受数据2、网络设备层接收数据3、ip层接受数据4、tcp层接受数据5、上层应用读取数据6、数据从网卡到应用层的整体流程 1、网卡接受数据 当网卡收到数据时&#xff0c;会触发一个中断&#xff0c;然后就会调用对应的中断处理函数&#xff0c;再做进一步处理。…