我试图用HTML/CSS创建吉他谱。
我已经有了这个基本的布局,你可以在这里看到。
样式
* {
margin:0;
padding:0;
box-sizing: border-box;
font-family:sans-serif;
}
.wrapper {
height:100px;
width:600px;
margin: 70px auto;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.string {
height:1px;
width:100%;
background:black;
}
Html
<div class="wrapper">
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
</div>
<div class="wrapper">
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
</div>
我想在吉他弦上标注注释(数字)
------0-
-----0--
----0---
---2----
--2-----
-0------
同样也有和弦,例如:
-0------
-0------
-0------
-2------
-2------
-0------
这应该怎样最容易实现呢?