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

使用前端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条)

报告相同问题？

  • 2023前端HTML+CSS最全面试题和答案汇总
    2023-02-09 18:50
    内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。...阅读建议：此资源覆盖了前端技术栈中Html+css全部知识点，知识点较多，所以在背题的过程要结合这些内容一起来实践，并调试对应的代码
  • 前端css实例--图片切片动效
    2020-12-15 16:57
    跟大家分享一些原生css的实际例子，这些例子比较简单，但都是实际开发之中可能遇到的。相信还是会对部分童鞋有所帮助~ 前端css图片切片动效讲解，包含老师录屏图片切片动效讲解、css源码、html、PDF显示。
  • 前端技术：网站性能优化之CSS无图片技术
    2021-03-02 07:12
    在不使用CSSImage(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术。首先我们通过yslow的statistics查看新浪微博最新版首页的文件...
  • 前端页面（使用html+js+css实现轮播图效果）
    2024-07-31 13:25
    使用html+js+css实现轮播图效果
  • 淘宝首页web前端课设（HTML+css+js）
    2022-06-10 18:15
    本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果...
  • html+css前端学习笔记.zip
    2024-01-01 16:42
    html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
  • 基于CSS的送餐前端设计源码
    2024-09-29 17:00
    文件夹如js、css和icons分别存放JavaScript脚本、CSS样式表和图标图片等资源，而.fonts文件夹可能包含了网页中使用的字体文件。 综合以上信息，本项目为开发人员提供了一套完整的前端设计源码，涵盖了前端开发的...
  • 前端学习 html,css,js.zip
    2024-01-05 00:27
    前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js 前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js 前端学习 html,css,js前端学习 html,css,...
  • 前端学习 html css js 算法.zip
    2024-01-05 00:25
    前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js ...
  • 前端基础的学习html+css.zip
    2024-01-05 00:24
    前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css...
  • 没有解决我的问题, 去提问

问题事件

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