实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS

实现简易版德州扑克

1.先上达到网页效果图（简易版德州扑克）

网页分为发牌区和牌池，上面为发牌区，下面是牌池区

2. 代码实现

2.1 HTML和JS代码

`

`

2.2 CSS代码

1：
2：

3：
1是JQuery，2为Underscore，3为link本地自写CSS
下面是自写CSS（style.css）
`body {
background-color: cornflowerblue;
}
.card {
height: 175px;
width: 125px;
background-image: url('./cards/back.png');
background-size: 100% 100%;
margin: 3px;
}

.pool {
display: flex;
border-style: dashed;
border-color: aliceblue;
border-width: 2px;
width: 655px;
height: 181px;
}

.f1 {
background-image: url('./cards/f1.png');

}

.f2 {
background-image: url("./cards/f2.png");
}

.f3 {
background-image: url("./cards/f3.png");
}

.f4 {
background-image: url("./cards/f4.png");
}

.f5 {
background-image: url("./cards/f5.png");
}

.f6 {
background-image: url("./cards/f6.png");
}

.f7 {
background-image: url("./cards/f7.png");
}

.f8 {
background-image: url("./cards/f8.png");
}

.f9 {
background-image: url("./cards/f9.png");
}

.f10 {
background-image: url("./cards/f10.png");
}

.f11 {
background-image: url("./cards/f11.png");
}

.f12 {
background-image: url("./cards/f12.png");
}

.f13 {
background-image: url("./cards/f13.png");

}
`