console
<div class="music">
<header>
<div class="music-title">
我和我的祖国
<small>央视热播歌曲</small>
</header>
<div class="music-symbols">
<div class="music-mode">
1 =
<span class="music-mode-value">C</span>
</div>
<div class="music-speed">
<span class="music-speed-symbol">♩</span>
=
<span class="music-speed-valvalue">120</span>
</div>
<div class="music-author">
小崔 作曲<br>
广一 作词
</div>
</div>
<div class="score">
<div class="bar do loop">
<div class="bar-line-first"></div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="bar-line-last"></div>
</div>
<div class="bar do">
<div class="bar-line-first"></div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="bar-line-last"></div>
</div>
<div class="bar">
<div class="bar-line-first"></div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="bar-line-last"></div>
</div>
<div class="bar">
<div class="bar-line-first"></div>
<div class="tie start end" style="left:10%;right:73%">3</div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note with-top-dot">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="bar-line-last"></div>
</div>
<div class="bar">
<div class="bar-line-first"></div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="bar-line-last"></div>
</div>
<div class="bar with-segno">
<div class="house start end">1</div>
<div class="bar-line-first"></div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="bar-line-last"></div>
<div class="symbol segno"></div>
</div>
<div class="bar">
<div class="bar-line-first"></div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="bar-line-last"></div>
<div class="ds">D.S.</div>
</div>
<div class="bar loop with-coda">
<div class="symbol coda"></div>
<div class="bar-line-first"></div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">11</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-double-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot with-single-line ">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="music-item with-bottom-dot">
<div class="note">
<div class="top-dot"></div>
<div class="pitch">1</div>
<div class="underline"></div>
<div class="bottom-dot"></div>
</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
<div class="lynic">我</div>
</div>
<div class="bar-line-last"></div>
</div>
</div>
</div>
.music {
background: white;
padding: 2em;
font-size: 16px;
color:black;
}
.music-symbols{
display:flex;
align-items:center;
}
.music-mode{
padding-right:2em;
}
.music-author{
font-size: 12px;
margin-left:auto;
}
.music-title {
border: none;
display: block;
margin: 0 auto 8px auto;
text-align: center;
font-size: 32px;
}
.music-title small {
display: block;
font-size: 16px;
}
.score{
display: flex;
align-items:top;
flex-wrap:wrap;
}
.bar {
text-align: center;
display: flex;
margin-top:2em;
margin-bottom:1em;
flex:auto;
position:relative;
}
.music-item{
flex:auto;
width:24px;
}
.note{
padding-bottom: 10px;
}
.note .pitch{
line-height: 14px;
vertical-align: middle;
}
.bar > .bar-line-last{
border-left:solid thin currentColor;
}
[class^=bar-line]{
margin-left:1px;
margin-right:1px;
position:absolute;
height:30px;
}
.bar-line-last{
right:0;
}
.with-top-dot .top-dot{
visibility: visible;
}
.with-bottom-dot .bottom-dot{
visibility: visible;
}
.with-single-line{
width:20px;
}
.with-double-line{
width:16px;
}
.with-single-line .underline{
border-top-color: currentColor;
}
.with-double-line .underline{
border-color: currentColor;
}
.loop .bar-line-last{
border-right: 2px solid currentColor;
width:1px;
margin-right: 0px;
}
.loop .bar-line-last:after{
content:":";
position: absolute;
top:0;height:100%;left:-7px;
font-size:26px;
line-height: 18px;
}
.do .bar-line-first{
visibility: visible;
border-left: 2px solid;
border-right: 1px solid;
width:1px;
margin-left:-2px;
}
.do .bar-line-first:after{
content:":";
position: absolute;
top:0;height:100%;right:-7px;
font-size:26px;
line-height: 18px;
}
.top-dot,.bottom-dot{
width:0px;
height:0px;
border:1px solid currentColor;
border-radius: 50%;
margin:auto;
visibility: hidden;
}
.underline{
height:2px;
border-width:1px;
border-style:solid none solid none;
border-color: transparent;
margin-bottom:3px;
}
.symbol{
width:16px;
height:16px;
position:absolute;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
top:-24px;
}
.symbol.segno{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 44'%3E %3Cpath d='M.9 8.8c-.1 1.1-.1 2.2.2 3.4.4 1.6 1.2 3.1 2 4.3 1.3 1.7 2.9 3.2 4.5 4.3 1.4 1.1 2.8 1.8 4.1 2.7-3.5 6-7.6 13.3-10.9 19.1h3.9c3.3-5.7 6.9-12.3 9.9-17.3 1.2.6 2.3 1.5 3.3 2.3 1.1.9 1.9 1.8 2.8 2.8.9 1.1 1.5 2.3 2.1 3.5.7 1.9 1.1 4.2-.5 6-1 .9-2 1-3 .7-1.1-.3-1.8-1.1-2.1-1.9.1-.4.8-.4 1.3-1.2.7-1.1 1-2.2.8-3.5-.2-1.2-.8-2.1-1.7-2.8-.6-.4-1.3-.4-1.9-.4-.6-.1-1.4.1-1.8.3-.5.3-.9.8-1.2 1.4-.3.6-.4 1.4-.4 2.2.1 1.3.4 2.5 1 3.7.6 1.1 1.4 2 2.5 2.8 1.6 1.1 3.3 1.5 5.1 1.4 1.8-.2 3.4-.9 4.8-2.3 1.4-1.5 2.3-3.3 2.5-5.4.1-1.1.1-2.2-.2-3.4-.2-.9-.5-1.7-.8-2.4-.5-1.5-1.9-2.9-2.9-3.9-.8-.8-1.7-1.6-2.8-2.4-1.4-1.1-2.8-1.8-4.1-2.7C20.9 14.1 25 6.8 28.3 1h-3.9c-3.2 5.6-7 12.2-9.9 17.3-1.1-.4-2.4-1.5-3.4-2.3-1.1-.9-2-1.7-2.8-2.8-.9-1.1-1.5-2.1-2.1-3.5-.3-.8-.5-1.6-.6-2.5-.2-1.5.1-2.5 1.1-3.6 1-.9 1.8-1 3-.7 1.1.3 1.8 1 2.1 1.9-.4.5-1 .6-1.3 1.2-.7 1.1-1 2.2-.8 3.5.2 1.2.8 2.1 1.7 2.8.6.4 1.3.4 1.9.4.8 0 1.2-.1 1.8-.3.5-.3.9-.8 1.2-1.4.3-.6.4-1.4.4-2.3-.1-1.3-.4-2.5-1-3.6s-1.4-2-2.5-2.8c-.7-.5-1.5-.8-2.2-1C9.9 1 8.7 1 7.6 1.1c-.7.1-1.5.3-2.3.7-.8.4-1.3.9-2 1.6C1.9 4.9 1.1 6.9.9 8.8zm20.7 8.9c0 .7.4 1.5 1.1 1.8.6.3 1.4.1 2-.2.5-.4.7-1 .7-1.5 0-1-.6-1.7-1.4-1.9-.5-.1-1.2 0-1.75.4s-.55.9-.65 1.4zM4.2 27c.3.5.9.9 1.7 1 .8.1 1.4-.4 1.7-1.1.4-.7.2-1.6-.3-2.2-.5-.7-1.3-.7-2.1-.5-.6.1-.9.6-1.15 1.15-.25.55-.15 1.15.15 1.65z'/%3E %3C/svg%3E");
right:0;margin-right:-8px;
}
.symbol.coda{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E %3Cpath d='M.513 13.216l.035-.7 4.01-.037c.29-4.195 3.114-7.277 6.983-8.009L11.55.51c.321 0 .21.005.554.005l-.017 12.571zm11.023-7.89c-2.708.853-3.092 5.413-3.14 7.07l3.038.019z'/%3E %3Cpath d='M23.487 13.216c-.015-1.532-.035.708-.035-.7l-4.01-.037c-.29-4.195-3.114-7.277-6.983-8.009L12.45.51l-.553.005.017 12.571c3.98 0 7.494.13 11.573.13zm-11.023-7.89c2.708.853 3.091 5.413 3.141 7.07l-3.039.019z'/%3E %3Cpath d='M.513 12.788c.015 1.532.035-.708.035.699l4.01.038c.289 4.194 3.114 7.276 6.983 8.008l.008 3.962.554-.006-.017-12.571zm11.023 7.89c-2.708-.854-3.092-5.413-3.141-7.071l3.04-.018z'/%3E %3Cpath d='M23.487 12.788l-.035.699-4.011.038c-.289 4.194-3.113 7.276-6.982 8.008l-.009 3.962-.553-.006.017-12.571c3.98 0 7.494-.13 11.573-.13zm-11.023 7.89c2.708-.854 3.09-5.413 3.141-7.071l-3.04-.018z'/%3E %3C/svg%3E");
left:0;margin-left:-8px;
}
.ds,.dc{
position: absolute;
font-size: 12px;
font-family: Cursive;
top:28px;
right:-12px;
}
.with-coda .bar-line-first{
border-left:solid thin;
}
.with-segno .bar-line-last{
border-right:solid thin;
width:2px;
}
.house,.tie {
position: absolute;
font-size:10px;
height:10px;
top:-13px;left:0;right:0;
border-top:solid 1px;
text-align: left;
}
.house.start,.tie.start{
border-left:solid 1px;
}
.house.end,.tie.end{
border-right:solid 1px;
}
.tie{
border-radius: 12px 12px 0 0;
height:5px;
top:-8px;
text-align: center;
font-size: 12px;
line-height: 0;
}
.lynic{
font-size:15px;
line-height:20px;
}