鹤戾223 2023-03-01 16:48 采纳率: 42.9%
浏览 83
已结题

使用前端css该如何打出此图

初学,初学前端
使用前端,html5,css该如何打出此图内容,

img

  • 写回答

4条回答 默认 最新

  • 全栈小5 全栈领域优质创作者 2023-03-01 17:20
    关注

    若有帮助,望给个采纳,谢谢!

    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-sca">
        <title>Document</title>
        <style>
            body, html { margin: 0; padding: 0; }
        </style>
    </head>
    <body>
    
        <!--第一行-->
        <div style="width: 966px; height: 103px;">
            <!--左浮动-红色块-->
            <div style="float: left; width: 277px; height: 103px; background: #EA3223; "></div>
            <!--右浮动-绿色区域-->
            <div style="float: left; width: 679px; height: 103px; margin-left: 10px; ">
                <div style="float: right; width: 137px; height: 49px; background: #75F94C;"></div>
                <div style="float: right; width: 679px; height: 49px; background: #75F94C; margin-top: 8px;"></div>
            </div>
        </div>
    
        <!--第二行-->
        <div style="width: 970px; height: 435px;margin-top:10px;">
            <!--左浮动-黄色块-->
            <div style="float: left; width: 310px; height: 435px; background: #F8CD46;"></div>
            <!--右浮动区域--->
            <div style="float: left; width: 650px; height: 435px; margin-left: 10px; ">
                <!--上区域-->
                <div style="float: left; width: 650px; height: 400px;">
                    <!--左边蓝色区域-->
                    <div style="float:left;width:450px;height:400px;">
                        <!--第一个蓝色块-->
                        <div style="width: 450px; height: 240px; background: #4F99F7;"></div>
                        <!--第二个蓝色块-->
                        <div style="width: 450px; height: 110px; background: #4F99F7;margin-top:10px;"></div>
                        <!--第三个蓝色块-->
                        <div style="width: 450px; height: 30px; background: #4F99F7;margin-top:10px;"></div>
                    </div>
                    <!--右边紫色区域-->
                    <div style="float: left; width: 190px; height: 400px; margin-left: 10px; background: #BB4295;"></div>
                </div>
                <!--下区域-->
                <div style="float: left; width: 650px; height: 25px; margin-top: 10px; background: #509C2C; "></div>
            </div>
        </div>
    
        <!--第三行-->
        <div style="width: 970px; height: 35px; margin-top: 10px; background: #000F91;"></div>
    
    </body>
    </html>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 3月11日
  • 已采纳回答 3月3日
  • 创建了问题 3月1日

悬赏问题

  • ¥50 potsgresql15备份问题
  • ¥15 Mac系统vs code使用phpstudy如何配置debug来调试php
  • ¥15 目前主流的音乐软件,像网易云音乐,QQ音乐他们的前端和后台部分是用的什么技术实现的?求解!
  • ¥60 pb数据库修改与连接
  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗?
  • ¥15 拟通过pc下指令到安卓系统,如果追求响应速度,尽可能无延迟,是不是用安卓模拟器会优于实体的安卓手机?如果是,可以快多少毫秒?
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题!!
  • ¥15 ikuai客户端多拨vpn,重启总是有个别重拨不上