SOURCE

console 命令行工具 X clear

                    
>
console
//未来将会用JS渲染页面。
//话说模板字符串可是好东西,但还不是时候……
<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;
}