177 lines
3.3 KiB
CSS
177 lines
3.3 KiB
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;
|
|
}
|