commit
This commit is contained in:
进进啊
108
css/Chess.css
Normal file
108
css/Chess.css
Normal file
@@ -0,0 +1,108 @@
|
||||
#board #space{
|
||||
width: 450px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
top: -100%;
|
||||
margin: -25px;
|
||||
}
|
||||
#board #space article{
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
float: left;
|
||||
transition: box-shadow 0.35s,outline 0.35s,border 0.35s,transform 0.35s;
|
||||
border: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
#board #space article:hover{
|
||||
box-shadow:0 0 25pt rgba(0, 0, 0, 0.35);
|
||||
border: 3px double rgba(0, 0, 0, 0.15);
|
||||
transform: scale(1.1,1.1);
|
||||
}
|
||||
.CS{
|
||||
border-radius: 500px;
|
||||
}
|
||||
.C{
|
||||
font-family: "微软雅黑 light", "微软雅黑", Arial,sans-serif;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 25px;
|
||||
border-radius: 50px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
box-shadow: 0 0 25pt rgba(0, 0, 0, 0.35);
|
||||
transition:transform 0.35s ;
|
||||
cursor: pointer;
|
||||
}
|
||||
/*.C:hover{
|
||||
transform: scale(1.1,1.1);
|
||||
}*/
|
||||
.BR{
|
||||
border-color: #6ec672;
|
||||
color: #f3f3f3;
|
||||
background-color: #46804a;
|
||||
}
|
||||
.BB{
|
||||
border-color: #6ec672;
|
||||
color: #232323;
|
||||
background-color: #46804a;
|
||||
}
|
||||
.PR{
|
||||
border-color: #c69c13;
|
||||
color: #f3f3f3;
|
||||
background-color: #805435;
|
||||
}
|
||||
.PB{
|
||||
border-color: #c69c13;
|
||||
color: #232323;
|
||||
background-color: #805435;
|
||||
}
|
||||
.JR{
|
||||
border-color: #c6385a;
|
||||
color: #f3f3f3;
|
||||
background-color: rgba(128, 43, 34, 0.75);
|
||||
}
|
||||
.JB{
|
||||
border-color: #c6385a;
|
||||
color: #232323;
|
||||
background-color: rgba(128, 43, 34, 0.75);
|
||||
}
|
||||
.MR{
|
||||
border-color: #c6a902;
|
||||
color: #f3f3f3;
|
||||
background-color: #806328;
|
||||
}
|
||||
.MB{
|
||||
border-color: #c6a902;
|
||||
color: #232323;
|
||||
background-color: #806328;
|
||||
}
|
||||
.XR{
|
||||
border-color: #2c806e;
|
||||
color: #f3f3f3;
|
||||
background-color: #5d9eb2;
|
||||
}
|
||||
.XB{
|
||||
border-color: #2c806e;
|
||||
color: #232323;
|
||||
background-color: #5d9eb2;
|
||||
}
|
||||
.SR{
|
||||
border-color: #bebebe;
|
||||
color: #820725;
|
||||
background-color: rgba(216, 216, 216, 0.95);
|
||||
}
|
||||
.SB{
|
||||
border-color: #bebebe;
|
||||
color: #232323;
|
||||
background-color: rgba(216, 216, 216, 0.95);
|
||||
}
|
||||
.J{
|
||||
border-color: #820725;
|
||||
color: #820725;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.S{
|
||||
border-color: #232323;
|
||||
color: #232323;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
170
css/index.css
Normal file
170
css/index.css
Normal file
@@ -0,0 +1,170 @@
|
||||
* {
|
||||
/* 清除默认的外边距和内边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
background-color: #ececec;
|
||||
/* 初始化select标签的样式 */
|
||||
/* 其中的-xx-xx是浏览器的私有前缀，这么写可以保证兼容性
|
||||
也就是各个浏览器下样式表现一致
|
||||
*/
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
#ground {
|
||||
/* 设置棋盘外部容器的大小，并为其添加绝对定位以及溢出隐藏 */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
#board {
|
||||
/* 添加棋盘样式并通过绝对定位固定其位置 */
|
||||
width: 401px;
|
||||
height: 451px;
|
||||
padding: 30px;
|
||||
background-color: #8f7a66;
|
||||
position: relative;
|
||||
top: 45%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: -220px auto;
|
||||
border: 3px solid rgb(192, 166, 137);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 25px rgba(143, 97, 76, 0.35);
|
||||
}
|
||||
#board #line {
|
||||
/* 设置棋盘中的格子线的样式 */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#board #line #rows {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#board #line #lines {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
top: -100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#board #line .row {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #571b16;
|
||||
margin-bottom: 49px;
|
||||
}
|
||||
#board #line .line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: #571b16;
|
||||
margin-right: 49px;
|
||||
float: left;
|
||||
}
|
||||
#board #line .end {
|
||||
margin: 0;
|
||||
}
|
||||
#board #line #river {
|
||||
width: 461px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
top: -200%;
|
||||
left: -30px;
|
||||
}
|
||||
#board #line #river article {
|
||||
position: relative;
|
||||
top: 201px;
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
background-color: rgba(143, 122, 102, 0.95);
|
||||
/*background-image: url("ass/Riv.png");*/
|
||||
box-shadow: inset 0 0 25px rgba(79, 139, 191, 0.55);
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 45px;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
color: #817c77;
|
||||
opacity: 0.95;
|
||||
}
|
||||
#board #flower {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
top: -300%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#board #flower article {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
left: 37px;
|
||||
top: 37px;
|
||||
float: left;
|
||||
border: 1px solid rgba(134, 42, 3, 0.55);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
#board #flower .L2 {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
#board #flower .L5 {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
/* 使用子代选择器设置.L2中第二个article的样式 */
|
||||
#board #flower .L2 article:nth-child(2) {
|
||||
margin-left: 273px;
|
||||
}
|
||||
#board #flower .L5 article:nth-child(1n + 2) {
|
||||
margin-left: 73px;
|
||||
}
|
||||
#board #flower .L5 article:nth-child(1) {
|
||||
margin-left: -50px;
|
||||
}
|
||||
#board #flower .L5 article:nth-child(2) {
|
||||
margin-left: 50px;
|
||||
}
|
||||
#board #flower #F {
|
||||
margin-top: 50px;
|
||||
height: 200px;
|
||||
}
|
||||
#board #cross {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
top: -400%;
|
||||
}
|
||||
#board #cross #T {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: 51px;
|
||||
}
|
||||
#board #cross #B {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
#board #cross article {
|
||||
margin: 0 auto;
|
||||
width: 140px;
|
||||
height: 1px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
background-color: #752e2b;
|
||||
}
|
||||
#board #cross article:nth-child(1) {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
#board #cross article:nth-child(2) {
|
||||
margin-top: -1px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
#board #cross #B article {
|
||||
position: relative;
|
||||
top: 149px;
|
||||
}
|
||||
Reference in New Issue
Block a user