如何在html和CSS中绘制此图表？

Question

请问如何用HTML和CSS做这个图表？

圆圈是按钮..

Answer 1

使用以下内容：
您的基本圈子：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;  /*Make it a circle (border-radius = 1/2*width & height)*/
  background-color: hotPink;
  border: none;
}

<button class="circle">Motion Detection</button>
<!-- Using a button to generate the circle -->

然后使用position: absolute;与left和right属性来定位圈子。

使用以下内容将“实时”置于页面中间位置：

<style>
 #text {
    font-family: MyFont, sans-serif;
    color: white;
 }
<style>

对于线条，我会使用div，并给它们一个2px的高度和任何宽度（例如350px。）对于定位，再次使用position属性（在这里学习如何使用它：w3schools.com /css/css_positioning.asp） - 刚刚编辑joe_young

使用上述内容来帮助您创建所需内容，但正如已经说过的那样，

  

这不是代码生成服务，请尝试自己并询问有关您遇到问题的代码的问题。

换句话说，请耐心等待，当您尝试并遇到特定问题时，请回复我们 祝你好运