Question

我没有网页设计的经验，我正拼命想要创建一个包含D3.js图形（一个用于创建图形和仪表板的甜蜜框架）的简单网页，但我的定位问题非常严重元件。

我想要一个我代表的页面：

图形数据将由与某些ajax代码交互的后端进程生成。我知道这很简单，但我的位置，边距，填充等都存在问题。

到目前为止我尝试的是：

<!DOCTYPE html>
</html>


<head>
  <title>E-Commerce data - Interactive Map</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="{% static 'interactive_map.css' %}?v=00001">
</head>

<body bgcolor="#170061">
    <div id="graph_div">
      // The graph will be here
    </div>
    <div id="pannel_div">
      // The buttons to controle the graph will be here
    </div>
</body>
</html>

一个看起来像这样的css文件：

div#graph_div
    {
      border-radius: 2px;
      vertical-align: middle;
      position: relative;
      width: 40%;
      height: 80%;
      top: 20px;
      bottom: 20px;
      right: 180px;
      left: 20px;
      background-color: #ffffff;
    }

div#panel_div
    {
      border-radius: 2px;
      vertical-align: middle;
      position: relative;
      width: 40%;
      height: 80%;
      top: 20px;
      bottom: 180px;
      right: 20px;
      left: 20px;
      background-color: #ffffff;
    }

显然这不起作用（我知道）。任何人都可以帮我吗？提前谢谢

Answer 1

以下是您可以开始做的示例：https://jsfiddle.net/Le232kar/

CSS看起来像这样：

body, html {
    margin:0;
    padding:0;
    height:100%;
}

#topbar {
    width:100%;
    height:100px;
    background:grey;
    margin:0;
}

#graph_div {
    width:60%;
    height:100%;
    float:left;
    background:blue;
}
#panel_div { 
    width:40%;
    float:right;
    background:darkgrey;
    height:100%;
}

祝你好运。

如何为简单的仪表板创建此html页面？

1 个答案: