问一下这个图片的html应该怎么写，对应的css块元素是不是不能跟着html嵌套啊

img

rt，左上第一个块里面的四个文字就不知道怎么设置位置，摸了半天没摸出来😂想问问这张图片上这样的应该怎么设置，是个什么思路啊？然后对应的css应该大概是什么样的？

然后中间那个每个文字后面有个背景方框可以写在一个盒子里吗？【捂脸】

给个大概的框架吧，仅供参考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .header {
            height: 10%;
            text-align: center;
            font-size: 50px;
            border-style: groove;
        }
        .show {
            height: 90%;
        }
        .menu {
            margin-left: 20px;
            margin-right: 20px;
            font-size: 20px;
            text-align: center;
            border-style: groove;
        }
        .content{
            height: 400px;
            width: 33%;
            float: left;
            border-style: groove;
        }
    </style>
</head>
<body>
    <div class="header">大题目</div>
    <div class="show">
        <div class="menu">导航栏</div>
        <div class="show">
            <div class="content"></div>
            <div class="content" style="border: none;"></div>
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
        </div>
    </div>
</body>
</html>

img

四个文字，如果一个文字占四分之一的话，每个文字块设置父盒子宽度的50%，高度设置父盒子高度的50%，然后设置垂直居中和水平居中，就能使文字形成这样的位置关系

用flex布局，你可以找一些相似的网站，然后F12自己查看源代码，对应的css块元素是不是不能跟着html嵌套这个问题，并不一定要跟着嵌套，只要你保证不影响其它的就可以了，css嵌套的也最好不要超过四层

上面标题正常俩个div

下边的 可以俩行
每行最外面的写 css

    display: flex;
    overflow-x: hidden;
    flex-wrap: nowrap;

然后每个div写 flex：1
最后一行同理

图片可能只是一个背景图而已

直接用
Dreamweaver设计
所见即所得

用dreamwave或者其他页面设计工具，先把门框设计出来，然后再去用jQuery的去做折线图和饼图那些，这个布局看着应该不会很难的！

float 浮动 然后margin 定位