web 基于VScode 两个盒子只显示大的，小的不显示


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width:300px;height:300px;
        background-color:rgb(255,0,0);
        background-image:url(图片\红毛怪.jpg)
        }
        .box1{width:"100px"; height:"100px";
        background-color:rgba(255,0,0,0.5);
        }
    </style>
</head>
<body>
    <div class="box">大家好
        <div class="box1"></div>
    </div>
</body>
</html>

1.把这两个地方的双引号去掉
2.给box1换个颜色，这两个盒子颜色太接近了

img


<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .box {
         width: 300px;
         height: 300px;
         background-color: rgb(255, 0, 0);
         background-image: url(图片\红毛怪.jpg)
      }

      .box1 {
         width: 100px;
         height: 100px;
         /* background-color: rgba(255, 0, 0, 0.5); */
         background: green;
      }
   </style>
</head>

<body>
   <div class="box">大家好
      <div class="box1"></div>
   </div>
  
</body>

</html>
  1. style里 width :100px 不用加 引号
  2. 颜色 都是红色 ，太相近 看不出来

第14行：需要改成下面的，width和height的值 不是字符串

 .box1{width:100px; height:100px;