HTML5绘制国际象棋,如何用纯CSS实现一副国际象棋
这篇文章主要介绍了关于如何用纯CSS实现一副国际象棋 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,一共 8 个列表,每个列表包含 8 个元素:
居中显示:body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: darkslategray;
}
定义容器的背景色和尺寸(由字号决定尺寸):.chess {
background-color: burlywood;
font-size: 32px;
}
画出网格状棋盘:ul {
display: table;
margin: 0;
padding: 0;
}
li {
display: table-cell;
width: 1.5em;
height: 1.5em;
}
设置网格交错的颜色:ul:nth-child(odd) li:nth-child(even),
ul:nth-child(even) li:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.6);
}
在棋盘上安放棋子:
- ♜
- ♞
- ♝
- ♛
- ♚
- ♝
- ♞
- ♜
- ♟
- ♟
- ♟
- ♟
- ♟
- ♟
- ♟
- ♟
- ♟
- ♟
- ♟
- ♟
- ♟
- ♟
- ♟
- ♟
- ♜
- ♞
- ♝
- ♛
- ♚
- ♝
- ♞
- ♜
设置棋子的颜色:ul:nth-child(-n+2) {
color: black;
}
ul:nth-child(n+7) {
color: white;
}
最后,为棋盘增加一点立体效果:.chess {
border: 0.2em solid tan;
box-shadow: 0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3);
}
大功告成!
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
HTML5绘制国际象棋,如何用纯CSS实现一副国际象棋相关推荐
- 如何用纯 CSS 创作一副国际象棋
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WyXrjz 可交互视频 ...
- 如何用纯 CSS 创作一副国际象棋 1
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WyXrjz 可交互视频 ...
- 前端每日实战:54# 视频演示如何用纯 CSS 创作一副国际象棋
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WyXrjz 可交互视频 此视频是可 ...
- 如何用纯 CSS 实现优惠券效果
背景 本文来自CODE.FUN ,讲述如何用纯 CSS 实现优惠券效果的实践案例,分享给大家. 优惠券视觉效果 上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它的主要框架,希望对大家有 ...
- 如何用纯CSS将图片填满div,自适应容器大小
如何用纯CSS将图片填满div,自适应容器大小 2016-10-11 13:33 网页设计 标签:css 代码 5987 3 我有一个模板,想按常规做一个div里面放置一个img图 ...
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- html图片自适应表格,如何用纯CSS实现自适应布局表格
您可能感兴趣的话题: CSS 核心提示:这是自适应布局技术中的一个难题,如何让table元素也能表现出自适应性. 以手机.平板等移动设备为平台的浏览行为变得越来越平常,甚至有些人叫嚣PC将死.虽然说的 ...
- 试用php语言写气泡,如何用纯CSS实现语音聊天气泡框效果
本篇文章主要给大家介绍怎么用纯css实现语音聊天气泡框效果. 推荐参考教程:<CSS教程> 语音聊天气泡框效果,在我们日常生活中或者社交网站上,都是非常常见且流行的一种对话框效果. 比如微 ...
- css3媒体查询导航设计,如何用纯css 媒体查询media queries实现响应式汉堡导航菜单...
Hamburger_icon PC端和手机移动端均适配,依据设备的宽度大小决定是否值下拉菜单样式 一. head里添加meta移动端的样式 width viewport的宽度 height viewp ...
最新文章
- php上传文件后定时删除,PHP根据条件定时删除文件代码
- vs2010 qt中文乱码 最终版
- 如何选择正确的容器编排以及如何进行部署
- 操作多台_一支热电偶能否连接多台显示仪表
- Magento 创建唯一优惠券 Create unique coupon code in Magento
- ssh转发代理:ssh-agent用法详解
- Nginx模块Lua-Nginx-Module学习笔记(二)Lua指令详解(Directives)
- python自动化写作_50行代码让python自动生成文章
- Windows下编译sqlite3
- 虹软人脸识别java调用依赖Cant‘t find dependent library错误,需安装vc2013运行环境
- 免疫算法(matlab)
- linux将时钟放在桌面上的,天气预报时钟插件加入你的Ubuntu桌面中
- 巧用 arp 命令 防p2p终结者的方法
- The Elder(树形dp 斜率优化)
- java 如何防止恶意注册表,如何防止恶意网页篡改注册表
- Android自定义九宫格图片展示,类似微信朋友圈
- Ubuntu 搜狗输入法无法调出问题解决备忘
- 船东提单和货代提单差距这么大?
- 免费mp3音乐文件上传外链空间精选合辑
- python统计套利_「手把手教你」使用Python实现统计套利
热门文章
- PHOTOSHOP CC 2019 无法导出渲染视频的解决文案
- VS2022安装教程(超详细)
- Maven - 5、私服详解
- HDU 3313 Key Vertex 胡搞(网络流最小割拆点什么的人家才不会呢)
- 很欢喜傅首尔的一段话 “当30岁还在为10块打费车结纠,天雨
- 鸿蒙开发实例 | 为什么选择HarmonyOS?
- vivado17.4支持w25q128的方法
- ctfshow萌新计划web22
- 支付账户跨行转账将被叫停 免费转账时代或终结
- python生成快递取件码_快递,顺丰,python,截图,15Seconds