battleship/参考项目/battleship-ui/battleship.css

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body,
html {
    width: 1260px;
    margin: auto;
    color: darkslategray;
    background-color: lightgrey;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

h1,
h2 {
    text-align: center;
    margin: 2rem 0 0.5rem;
    text-shadow: 1px 1px 2px white;
}

#游戏区域 {
    display: flex;
    justify-content: space-between;
}

.棋盘 {
    width: 600px;
    height: 600px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

#我方海域 {
    background: url(images/sea.png);
}

#敌方海域 {
    background: url(images/grey.png);
    cursor: url(images/crosshair.png) 16 16, crosshair;
}

.战舰 {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    left: 60px;
}

.甲板 {
    width: 60px;
    height: 60px;
}

#航空母舰 {
    width: 60px;
    height: 300px;
    top: 60px;
}
#航空母舰.水平放置 {
    height: 60px;
    width: 300px;
}
#航空母舰0.甲板 {
    background: url(images/ship1.png) -2px 0px no-repeat;
}
#航空母舰1.甲板 {
    background: url(images/ship1.png) -2px -60px no-repeat;
}
#航空母舰2.甲板 {
    background: url(images/ship1.png) -2px -120px no-repeat;
}
#航空母舰3.甲板 {
    background: url(images/ship1.png) -2px -180px no-repeat;
}
#航空母舰4.甲板 {
    background: url(images/ship1.png) -2px -240px no-repeat;
}

#战列舰 {
    width: 60px;
    height: 240px;
    top: 120px;
}
#战列舰.水平放置 {
    width: 240px;
    height: 60px;
}
#战列舰0.甲板 {
    background: url(images/ship2.png) -2px 0px no-repeat;
}
#战列舰1.甲板 {
    background: url(images/ship2.png) -2px -60px no-repeat;
}
#战列舰2.甲板 {
    background: url(images/ship2.png) -2px -120px no-repeat;
}
#战列舰3.甲板 {
    background: url(images/ship2.png) -2px -180px no-repeat;
}

#巡洋舰 {
    width: 60px;
    height: 180px;
    top: 180px;
}
#驱逐舰 {
    width: 60px;
    height: 180px;
    top: 240px;
}
#驱逐舰.水平放置,
#巡洋舰.水平放置 {
    width: 180px;
    height: 60px;
}
#巡洋舰0.甲板 {
    background: url(images/ship3.png) -2px 0px no-repeat;
}
#巡洋舰1.甲板 {
    background: url(images/ship3.png) -2px -60px no-repeat;
}
#巡洋舰2.甲板 {
    background: url(images/ship3.png) -2px -120px no-repeat;
}
#驱逐舰0.甲板 {
    background: url(images/ship4.png) -2px 0px no-repeat;
}
#驱逐舰1.甲板 {
    background: url(images/ship4.png) -2px -60px no-repeat;
}
#驱逐舰2.甲板 {
    background: url(images/ship4.png) -2px -120px no-repeat;
}

#巡逻艇 {
    width: 60px;
    height: 120px;
    top: 300px;
}
#巡逻艇.水平放置 {
    width: 120px;
    height: 60px;
}
#巡逻艇0.甲板 {
    background: url(images/ship5.png) -2px 0px no-repeat;
}
#巡逻艇1.甲板 {
    background: url(images/ship5.png) -2px -60px no-repeat;
}

.水平放置 .甲板 {
    transform-origin: top left;
    transform: scaleY(-1) rotate(-90deg);
}

.拖拽中 {
    z-index: -10;
}

.平静海面 {
    width: 60px;
    height: 60px;
    position: absolute;
    background: url(images/sea.png) no-repeat center;
}

.爆炸海面 {
    width: 60px;
    height: 60px;
    position: absolute;
    background: url(images/boom.png) no-repeat center, url(images/sea.png) no-repeat center;
}