象棋html

最新推荐文章于 2023-10-26 17:55:23 发布
最新推荐文章于 2023-10-26 17:55:23 发布
阅读量381 收藏 2
点赞数
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Li_xiaofen/article/details/120743486
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="wall">
        <div class="wintitle"></div>
    </div>
    <div class="wrap">
       
        <div item="black" class="qizi black" Index="0"  rule="车" row="1" line="1">
            <div >車</div>
        </div>
        <div item="black" class="qizi black" Index="1" row="1" line="2" rule="马">
            <div >馬</div>
        </div>
        <div item="black" class="qizi black" Index="2" row="1" line="3" rule="相">
            <div >象</div>
        </div>
        <div item="black" class="qizi black" Index="3" row="1" line="4" rule="士">
            <div >仕</div>
        </div>
        <div item="black" class="qizi black" Index="4" row="1" line="5" rule="帅" live="1">
            <div >帥</div>
        </div>
        <div item="black" class="qizi black" Index="5" row="1" line="6" rule="士">
            <div >仕</div>
        </div>
        <div item="black" class="qizi black" Index="6" row="1" line="7" rule="相">
            <div >象</div>
        </div>
        <div item="black" class="qizi black" Index="7" row="1" line="8" rule="马">
            <div>馬</div>
        </div>
        <div item="black" class="qizi black" Index="8" rule="车" row="1" line="9">
            <div >車</div>
        </div>
        <div item="black" class="qizi black" Index="9" row="3" line="2" rule="炮">
            <div >炮</div>
        </div>
        <div item="black" class="qizi black" Index="10" row="3" line="8" rule="炮">
            <div>炮</div>
        </div>
        <div item="black" class="qizi black" Index="11" row="4" line="1" rule="兵">
            <div >卒</div>
        </div>
        <div item="black" class="qizi black" Index="12" row="4" line="3" rule="兵">
            <div>卒</div>
        </div>
        <div item="black" class="qizi black" Index="13" row="4" line="5" rule="兵">
            <div>卒</div>
        </div>
        <div item="black" class="qizi black" Index="14" row="4" line="7" rule="兵">
            <div>卒</div>
        </div>
        <div item="black" class="qizi black" Index="15" row="4" line="9" rule="兵">
            <div>卒</div>
        </div>
        <div item="red" class="qizi red" Index="16" row="7" line="1" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="17" row="7" line="3" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="18" row="7" line="5" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="19" row="7" line="7" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="20" row="7" line="9" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="21" row="8" line="2" rule="炮">
            <div>炮</div>
        </div>
        <div item="red" class="qizi red" Index="22" row="8" line="8" rule="炮">
            <div>炮</div>
        </div>   
        <div item="red" class="qizi red" Index="23" rule="车" row="10" line="1">
            <div>車</div>
        </div>
        <div item="red" class="qizi red" Index="24" row="10" line="2" rule="马">
            <div>馬</div>
        </div>
        <div item="red" class="qizi red" Index="25"  row="10" line="3"  rule="相">
            <div>相</div>
        </div>
        <div item="red" class="qizi red" Index="26"  row="10" line="4" rule="士">
            <div>士</div>
        </div>
        <div item="red" class="qizi red" Index="27"  row="10" line="5" rule="帅" live="2">
            <div>將</div>
        </div>
        <div item="red" class="qizi red" Index="28"  row="10" line="6" rule="士">
            <div>士</div>
        </div>
        <div item="red" class="qizi red" Index="29"  row="10" line="7"  rule="相"> 
            <div>相</div>
        </div>
        <div item="red" class="qizi red"  Index="30" row="10" line="8" rule="马">
            <div>馬</div>
        </div>
        <div item="red" class="qizi red" Index="31" rule="车"  row="10" line="9">
            <div>車</div>
        </div>
      
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="qipan">      
            </div>
        <div style="position: relative; top: 20px;left:28px;font-size: 18px;">
            开发者--李志强，如在使用过程中发现bug或者不合理的地方，可以联系作者进行修改
        </div>
    </div>
    <script src="1.js" ></script>
</body>
</html>
<style>
    body{
        margin: 0px 0px;
        user-select: none;
    }
    .wrap{
        margin: auto;
        /* margin-top: 40px; */
        width: 764px;
        height: 848px;
        position: relative;
      
    }
    .qipan{
        top: 32px;
        left: 32px;
        width: 700px;
        height: 784px;
        background-image: url('./象棋.jpg');
        position: relative;
        z-index: -5;
    }
    .weizhi{
        width: 84px;
        height: 84px;
        float: left;
    }
    .qizi{
        width: 84px;
        height: 84px;
        cursor: pointer;
        position: absolute;
        z-index: 2;
        transition:top 0.3s linear,left 0.3s linear;
    }
    .qizi div{
        width: 70px;
        height: 70px;
        border: 2px solid #bebebe;
        box-shadow: 0px 0px 2px #888888;
        background: rgba(216, 216, 216, 1);
        margin-left: 6px;
        margin-top: 6px;
        border-radius: 50%;
        text-align: center;
        line-height: 70px;
        font-size:30px;
    }
    .red{
        color: red;
    }
    .wintitle{
        position: fixed;
        left: 42%;
        top: 41%;
        height: 70px;
        width: 300px;
        text-align: center;
        border-radius: 30px;
        background: white;
        color: black;
        font-size: 40px;
        font-weight: bold;
        line-height: 70px;
    }
    .wall{
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999;
        background: rgba(0,0,0,0.3);
        display: none;
    }
</style>
李小楓
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 圆形扩散特效 水波
笔记库
10-16 2062
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=...
js实现进度条
qq_64037242的博客
06-21 610
【代码】js实现进度条。
js实现页面显示加载进度条效果
CodingNoob
10-11 3510
我们上网的时候经常会看到一些平台或者网站顶部在页面加载的时候显示加载的进度条，这样用户可以知道还有多少没有加载完，给用户比较友好的用户体验效果，现在我们就来模拟一下这个效果是如何去实现的。 页面加载一般来说是资源加载的问题，资源主要还是css、js、img、视频等资源，这些资源加载完成后都会触发一个onload事件，这样我们就可以在事件里面做一些事情，主要原理是计算页面资源的总数，然后资源载入的...
CSS实现三个加载中的小动画
Sirius小鑫的博客
04-09 1217
使用CSS的动画animation定义动画的属性：动画名、执行时间、执行速度函数和执行的次数，定义关键帧@keyframe来实现动画细节。
Odoo owl 学习笔记之11—slots 目录 插槽概述... 1 命名槽... 2 渲染上下文
05-10
Odoo owl 学习笔记之11—slots 目录 插槽..... 1 概述... 1 命名槽... 2 渲染上下文... 3 默认插槽... 3 默认内容... 4 动态插槽... 5 插槽和道具... 5 插槽参数... 5 插槽范围... 7 单个插槽 | 默认插槽 | 匿名插槽... 9 概述 Owl 是一个基于模板的组件系统。因此需要能够制造通用组件。例如，想象一个通用Navbar 组件，它显示一个导航栏，但有一些可定制的内容。由于具体内容只有 的用户知道Navbar，所以最好在使用的模板中指定它Navbar
中国象棋HTML5源码
03-18
中国象棋HTML5源码
国际象棋html5 JavaScript 源码
09-01
国际象棋html5 JavaScript 中的 3D 游戏 这是一款简单的多人 3D 国际象棋游戏，完全使用 JavaScript 和 HTML5 开发，并添加 CSS，使其具有漂亮的外观和画龙点睛之笔。该项目已使用 javascript 和 jquery 进行验证。...
国际象棋html网站模板
04-02
国际象棋html网站模板
象棋HTML制作
08-25
简单的一款HTML制作的。
HTML5国际象棋AI版源码
11-11
一个基于HTML5的国际象棋，它也提供人机对战，不过智商相对较低，像我一个国际象棋初级入门的人都可以轻轻松松赢得比赛。如果你对人工智能感兴趣，你也可以改造这款国际象棋的机器智商，让它变得更为强大。
js实现简单进度条效果
10-15
主要为大家详细介绍了js实现简单进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS中实现一个下载进度条及播放进度条的代码
10-16
主要介绍了JS中实现一个下载进度条及播放进度条的代码,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
css3实现旋转风车动画特效.zip
07-04
css3实现旋转风车动画特效是一款基于CSS3实现的转动的大风车特效下载。
JavaScript使用setInterval()实现真实进度条
Lance的博客
12-17 3215
参考博客：https://blog.csdn.net/q1w2e3r4470/article/details/72702406 1.为什么要使用真实进度条： 最近做到的一项业务数据量大，单次操作执行时间很长，所以需要前端看到真实进度条（根据前端上传的Excel表格处理其中的数据） 2.编码过程 我的项目前后端不分离，前端是jsp，后台是java 2.1前端： 为了方便理解，我把代码尽量精简 <style> button { width: 100%; .
Vue学习之插槽vue.$slot的使用/使用插槽vm.$slots实现一个导航栏结构
最新发布
m0_64074057的博客
10-26 437
【代码】Vue学习之插槽vue.$slot的使用/使用插槽vm.$slots实现一个导航栏结构。
javascript 进度条js
z_haaaa的博客
03-22 189
JS创建简易进度条
Vue3插槽Slots
性感码农在线写笔记
05-08 846
Vue3插槽 slots
web制作QQ会员导航
y943711797的博客
11-10 837
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QQ会员-不做大多数</title> <link rel="icon" href="img/logo.png" type="x-png" /> <style> li { list-style: none;
制作qq会员页面导航
jiamaa的博客
05-31 3757
制作qq会员页面导航@TOC 我在网上搜了很多帮助文档，样式设计都没有做得很好的，CSS样式设计都做得不够完美，这个是我总结了很多别人的经验和自己的经验出来的，希望对大家有所帮助，谢谢。 这个是最终结果图： 下面是代码块： 制作会员页面导航-上机练习1 <img src="img/qq会员.png" alt="logo"/> <nav class="nav"> <ul> <li><a hre
用html写一个象棋小游戏
06-01
好的，以下是一个简单的象棋小游戏的 HTML 代码示例： ```html <!DOCTYPE html> <html> 象棋小游戏 .square { width: 50px; height: 50px; display: inline-block; border: 1px solid black; }...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值