主题为吉他的html,HTML5 可视化吉他指板

CSS

语言：

CSSSCSS

确定

@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400");

* {

margin: 0;

padding: 0;

list-style-type: none;

}

body {

background: #eee;

font-family: "Source Sans Pro", sans-serif;

letter-spacing: 0.05em;

}

h1 {

text-transform: uppercase;

text-align: center;

margin-top: 40px;

}

.guitar-neck {

position: relative;

margin-top: 40px;

left: 50%;

margin-left: -450px;

width: 960px;

height: 250px;

background: #755628;

box-shadow: inset -1px 0px 11px 0px rgba(0, 0, 0, 0.75);

}

.guitar-neck .open-notes {

position: absolute;

top: 3px;

left: -35px;

}

.guitar-neck .open-notes li {

text-transform: capitalize;

margin-bottom: 20px;

font-size: 18px;

color: #fff;

}

.guitar-neck .open-notes li.active {

color: #fa990f;

}

.guitar-neck .fret {

float: left;

width: 3px;

height: 250px;

background: #d7d6d6;

margin-left: 75px;

border-right: 2px solid #686868;

}

.guitar-neck .fret.first {

position: absolute;

width: 50px;

left: -52px;

top: 0;

margin-left: 0;

background: #211f1d;

}

.guitar-neck .dots {

position: absolute;

width: 642px;

height: 20px;

top: 44%;

left: 19.5%;

}

.guitar-neck .dots li {

float: left;

width: 20px;

height: 20px;

border-radius: 50%;

background: #383530;

margin-right: 140px;

}

.guitar-neck .strings {

position: absolute;

left: 0;

top: 10px;

width: 960px;

height: 250px;

}

.guitar-neck .strings li {

height: 1px;

display: inline-block;

width: 100%;

background: #c8bb93;

margin-bottom: 38px;

border-bottom: 2px solid #958963;

box-sizing: border-box;

}

.guitar-neck .strings li:nth-child(2) {

height: 2px;

}

.guitar-neck .strings li:nth-child(3) {

height: 3px;

}

.guitar-neck .strings li:nth-child(4) {

height: 4px;

}

.guitar-neck .strings li:nth-child(5) {

height: 5px;

}

.guitar-neck .strings li:nth-child(6) {

height: 6px;

}

.guitar-neck .notes {

position: absolute;

left: 17px;

top: -7px;

width: 960px;

height: 258px;

overflow-x: hidden;

}

.guitar-neck .notes .mask {

position: absolute;

right: -189px;

bottom: 0;

width: 1184px;

height: 30px;

}

.guitar-neck .notes .mask ul {

position: relative;

float: left;

}

.guitar-neck .notes .mask ul li {

float: left;

width: 30px;

height: 30px;

margin-right: 50px;

background: #fa990f;

color: #fff;

border-radius: 50%;

text-align: center;

line-height: 30px;

box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);

}

.guitar-neck .notes .mask.a {

bottom: 47px;

}

.guitar-neck .notes .mask.d {

bottom: 93px;

}

.guitar-neck .notes .mask.g {

bottom: 137px;

}

.guitar-neck .notes .mask.b {

bottom: 181px;

}

.guitar-neck .notes .mask.high-e {

bottom: 224px;

}

.controls {

position: relative;

margin-top: 40px;

left: 50%;

margin-left: -380px;

width: 760px;

height: 300px;

text-align: center;

color: #333;

}

.controls a {

text-decoration: none;

background: #333;

color: #fff;

padding: 5px 10px;

margin-right: 40px;

}

.controls a.down {

margin-right: 0;

}

.controls h2 {

text-transform: uppercase;

margin: 40px 0;

}

.controls ul li {

float: left;

width: 40px;

height: 20px;

background: #333;

color: #fff;

margin-right: 20px;

cursor: pointer;

}

.controls ul li:last-child {

margin-right: 0;

}