css基础实例1-利用类选择器画颜色不同的盒子

女爷i 2022-11-04 11:05 1阅读 0赞

目标如下：  
![在这里插入图片描述][20210301231035912.png]  
完成如上图所示的内容  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>利用类选择器画盒子</title>
        <style>
            div{
         
                text-align: center;
            }
            .red{
         
                width: 100px;
                height: 100px;
                color: red;
                background-color: yellow;
            }
            .green{
         
                width: 100px;
                height: 100px;
                color: red;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="red">第一个盒子</div>
        <div class="green">第二个盒子</div>
        <div class="red">第三个盒子</div>
    </body>
    </html>

要求掌握的内容：  
1.类选择器的使用规范  
2.文字居中的使用（text-align）  
3.对div标签的高和宽的设置（height与width）  
完成效果如下图所示：  
![在这里插入图片描述][20210301231241993.png]

[20210301231035912.png]: /images/20221023/ea0e23fe33404860b4eb3ae19159fb56.png
[20210301231241993.png]: /images/20221023/064a209e85244657bb15d8d020bea139.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关盒子背景颜色（HTML、CSS）

盒子背景颜色（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <me

Dear 丶/ 2023年10月03日 12:50/ 0 赞/ 50 阅读

相关 CSS-基础选择器，标签选择器、id 选择器、类选择器、通配符 *的用法详解

概述想要实现对 HTML 页面中的元素进行一对一，一对多或者多对一的控制，这就需要用到 CSS 选择器；CSS 选择器有很多，大致可分为：基础选择器、高级选择器、伪类选

超、凢脫俗/ 2023年08月17日 16:28/ 0 赞/ 224 阅读

相关 css选择器 - 1

\[attribute\] <table> <thead> <tr> <th>例子</th> <th>例子描述</th> </tr>

柔光的暖阳◎/ 2023年07月04日 08:50/ 0 赞/ 34 阅读

相关 css基础知识2-元素选择器、id选择器、类选择器

css里面有很多选择器，这次就是为大家介绍一下css里面基本的几个选择器元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器

谁借莪１个温暖的怀抱￠/ 2022年12月22日 09:41/ 0 赞/ 314 阅读

相关 CSS的基础选择器和复合选择器的学习(1)

选择器 > 选择器分为基础选择器和复合选择器两个大类。 1,基础选择器 > 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器标签选择器(元素

ゞ浴缸里的玫瑰/ 2022年11月30日 01:59/ 0 赞/ 213 阅读

相关 1.1 CSS简介与基础选择器

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址： 1. H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教

野性酷女/ 2022年11月18日 04:57/ 0 赞/ 210 阅读

相关 CSS 类选择器

CSS 类选择器任务描述相关知识任务描述本关任务是通过类选择器的方式，更改独立于文档元素的属性。 ![在这里插入图片描述][waterma

雨点打透心脏的1/2处/ 2022年11月13日 00:46/ 0 赞/ 245 阅读

相关【css】选择器+盒子模型

做牛腩的时候曾接触过css，有一篇博客总结如下：[【牛腩】HTML+CSS基础了解][HTML_CSS] 【如何引入css】曾写了一篇文章：[【JavaScri

超、凢脫俗/ 2022年08月22日 13:27/ 0 赞/ 248 阅读

相关前端基础1——html常用标签讲解、css选择器、css盒子模型

目录一、html常用标签讲解 1，基本结构 2，文本类标签 3，超链接 4，图片 5，列表 6，表格 7，表单二、css选择器 1，标签选择器 2，类

﹏ヽ暗。殇╰゛Y/ 2022年05月08日 01:54/ 0 赞/ 330 阅读

相关 CSS基础选择器

CSS基础选择器标签选择器（元素选择器）标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

布满荆棘的人生/ 2022年03月21日 05:12/ 0 赞/ 306 阅读