html代码四个矩形

HTML代码四个矩形

!DOCTYPE html>
    html>
      head>
        title>
    HTML代码四个矩形/title>
      /head>
      body>
        div style="background-color: blue;
     width: 100px;
     height: 100px;
    ">
    /div>
        div style="background-color: red;
     width: 150px;
     height: 150px;
    ">
    /div>
        div style="background-color: green;
     width: 200px;
     height: 200px;
    ">
    /div>
        div style="background-color: purple;
     width: 250px;
     height: 250px;
    ">
    /div>
      /body>
    /html>
    

上面这段HTML代码可以实现展示四个矩形的效果，其中每个矩形都是用div标签实现的。这个div标签可以看作是一个容器，我们可以通过定义样式来决定它的大小和背景颜色。

对于上面的代码，我们对每个矩形的样式进行了定义，分别设置了它们的背景颜色和大小。在HTML中，我们可以通过style属性来增加元素的样式，style属性中的内容就是CSS代码，此处我们直接将CSS代码写在style属性中，也可以将CSS代码单独写在CSS文件中，然后在HTML中引入。

通过这个例子，我们可以了解到HTML和CSS是如何配合实现Web页面的布局和样式的。在实际应用中，我们可以根据需求自由的组合标签和样式，实现各式各样的页面。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！