*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
.chessboard{
    position:relative;
    top:30px;
    left:300px;    
    width:500px;
    height:560px;
    background-image: url(../img/bg.png);
    background-size: 100% 100%;
}
img{
    position:absolute;
    width:50px;
    height:50px;
    background-size:100% 100%;
    /*transform: rotate(15deg);
    transform: scale(0.5);*/
}
/*菜单区*/
.menu{
    position:absolute;    
    top:50px;
    width:200px;
    bottom:100px;
    left:50px;    
    display:flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: space-around;
}
.menu button{
    margin-top:20px;
    margin-left:30px;
    height:50px;
    width:100px;
    background: rgb(10, 74, 77);
    color:#fff;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
}
.menu button:hover{
    background: rgb(10, 141, 148);
    border-radius: 10px;
}
/*走棋子显示区域*/
.board{
    position:absolute;      
    top:50px;
    width:200px;
    bottom:100px;
    left:840px; 
}
.panel{
    position: absolute;
    top:50px;
    left:10px;
    right:10px;
    bottom:10px;
    border: 1px solid #000; 
    overflow-y: scroll; /*处动添加滚动条*/
}
#tb{
    position: relative;
    top:0px;
    left:0;
    width:100%;  
    overflow-y:scroll; /*处动添加滚动条*/   
}
/*奇数行显示一种颜色*/
#tb tr:nth-child(odd){
    background: #f7f7f7;
}
/*偶数行显示一种颜色*/
#tb tr:nth-child(even){
    background: #c7c7c7;
}
#tb tr td{
    height:25px;
    text-align: center;
    margin: 0%;
    padding: 0%;
}
h3{
    margin-bottom: 10px;
    color:#0b0744;
}