鹤戾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条)

报告相同问题？

  • 使用前端css该如何打出此图 css html5 前端
    2023-03-01 16:48
    回答 4 已采纳 若有帮助，望给个采纳，谢谢！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
  • 开发前端css怎么快速取图片的十六进制 css html 前端
    2022-01-22 10:03
    回答 2 已采纳 纯色图片的图片颜色么？有很多截图软件都带有取色功能的，比如：Snipaste
  • 前端开发 css图片大小的设置 css
    2023-03-27 15:31
    回答 4 已采纳 首先要确定div的宽高比和图片的宽高比一样，才可以在图片不变形的状态下撑满div，否则肯定会撑不满外层div设置宽高，内层img只需要设置width:100%或者height:100%就行，图片会自适
  • 2023前端HTML+CSS最全面试题和答案汇总
    2023-02-09 18:50
    内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。...阅读建议：此资源覆盖了前端技术栈中Html+css全部知识点，知识点较多，所以在背题的过程要结合这些内容一起来实践，并调试对应的代码
  • 前端css如何写才能实现 css html 前端
    2022-02-10 14:17
    回答 3 已采纳 <!DOCTYPE html> <html> <head> <title></title> <style>
  • css前端设计文本垂直居中问题 css html 前端
    2022-04-08 14:45
    回答 2 已采纳 很多办法，最简单是用footer的padding，设置上下一样的padding，他就居中了。行高也可以，但是要多包一层，外层设置为footer高度一样的行高，内存设置为每行固定的一个高度。还有flex
  • 前端CSS背景图片添加不上 css css3
    2020-04-07 18:55
    回答 4 已采纳 C:\Users\戴尔\Picture\zhong.jpg => C:/Users/戴尔/Picture/zhong.jpg
  • 前端css实例--图片切片动效
    2020-12-15 16:57
    跟大家分享一些原生css的实际例子，这些例子比较简单，但都是实际开发之中可能遇到的。相信还是会对部分童鞋有所帮助~ 前端css图片切片动效讲解，包含老师录屏图片切片动效讲解、css源码、html、PDF显示。
  • 前端css3动画部分有疑问希望友友们帮助解惑 css3 html 前端
    2022-10-21 16:53
    回答 2 已采纳 div+div加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥有相同的父元素，所选到的仅为一个B元素标签。 2.-webkit-xxx是 兼容写法，针对浏览器内核的 。CS
  • css前端设计文本居中问题 css html 前端
    2022-04-08 14:21
    回答 4 已采纳 在span标签外添加center标签
  • 居中显示 CSS样式 前端 样式 css 前端
    2022-03-14 10:49
    回答 1 已采纳 padding 要么不设 要不左右两边都设 你现在是span属性 是行内标签 设置不了宽高 改成inline-block行内块，不需要设置padding 宽高都给个20px border-radi
  • 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实现鼠标移动到图片上更换为另一张图片？ css html 前端
    2022-03-12 10:08
    回答 3 已采纳 这样改变不了，一个是图片类型引入，一个是背景引入，并不能替换。统一改成背景图 .bottomBox1{ width: 300px; height: 300px;
  • 前端学习 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:29
    前端学习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+js前端...
  • 没有解决我的问题, 去提问

问题事件

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

悬赏问题

  • ¥15 Stata链式中介效应代码修改
  • ¥15 latex投稿显示click download
  • ¥15 请问读取环境变量文件失败是什么原因？
  • ¥15 在若依框架下实现人脸识别
  • ¥15 添加组件无法加载页面,某块加载卡住
  • ¥15 网络科学导论，网络控制
  • ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比，为什么Snetinel-2计算的结果最小值特别小，而Lansat8就很平均
  • ¥15 metadata提取的PDF元数据，如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错