Question

我正在尝试在主页上创建一个包含4个框的HTML仪表板。顶部3个，底部1个大型。这些盒子将填充数据，如文本，图形（使用高图），火花线等...但是，我无法弄清楚我的生活如何做到这一点！

我是HTML / CSS / Bootstrap等的新手，所以原谅我缺乏理解。这是我想要做的图表...我已经给出了我的图像的链接，因为Stackoverflow不会让我发布照片。

谢谢!!!

http://i1158.photobucket.com/albums/p618/g12mcgov/ScreenShot2013-12-30at101503AM.jpg

Answer 1

欢迎来到SO。

在这个网站上，您需要（通常）询问您尝试过的一些代码示例。

您的问题涉及许多我们无法猜测的参数（例如，您是否需要响应式布局，您希望在这些框中放置哪种元素，......）。

我制作了这个快速布局，您可以使用它来开始，但您必须了解（至少）HTML和CSS的基础知识才能使用它并进一步。

请参阅 FIDDLE

HTML：

<div id="navbar">
    <p>NAVBAR</p>
</div>
<div id="wrap">
    <div class="line_up"></div>
    <div class="line_up"></div>
    <div class="line_up"></div>
    <div class="clr"></div>
</div>

<div id="bottom"></div>

CSS：

body{
    width:1050px;
    margin:0 auto;
}
#navbar{
    width:100%;
    height:80px;
    line-height:80px;
    background:grey;
    text-align:center;
    margin-bottom:100px;
}
#wrap{
    width:100%;
}

.line_up{
    width:330px;
    height:200px;
    margin:10px;
    float:left;
    background:red;
}
.clr{
    clear:both;
}

#bottom{
    height: 200px;
    width:1030px;
    margin:10px;
    background:grey;
}

如何在HTML页面上制作框以填充数据（文本，高图，图表等）

1 个答案: