CSS实现：红绿灯效果横向布局考试表单页

最新推荐文章于 2024-08-07 11:21:21 发布

m0_67403013

最新推荐文章于 2024-08-07 11:21:21 发布

阅读量215

点赞数

分类专栏：前端 html 文章标签：网络 tcp/ip vue.js

本文链接：https://blog.csdn.net/m0_67403013/article/details/123344500

版权

本文介绍了如何使用HTML和CSS实现红绿灯效果，通过展示具体步骤和图片，展示了三个颜色的圆在灰色矩阵中的布局。此外，还讲解了利用flex布局进行横向布局的方法，并给出了考试表单页的CSS样式制作过程。

摘要由CSDN通过智能技术生成

红绿灯效果

使用HTML+CSS实现如图所示的红绿灯效果。
在这里插入图片描述

从图中我们可以知道有三个不同颜色的圆，并且三个圆都在灰色矩阵之中

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .parent {
            width: 200px;
            height: 600px;
            margin: 0 auto;
            background-color: gray;
            padding: 25px;
        }
        .one,.two,.three {
            width: 150px;
            height: 150px;
            border-radius: 50%;
        } 
        .one {
            background-color: red;
        }
        .two {
            background-color: green;
            margin-top: 50px;
            /* 50px为上下两个圆的边距 */
        }
        .three {
            background-color: yellow;
            margin-top: 50px;
        }
    </style>
    <div class="parent">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>

横向布局

基于 flex 布局来实现横向布局

实现效果如图所示：
在这里插入图片描述

图中布局分为四个小部分，我们可以使用flex布局来实现

<style>
        * {
            margin: 0;
            padding:0;
            box-sizing: border-box;
        }
        .parent {
            background-color: gray;
        }
        .nav {
            background-color: red;
            color: white;
            text