54.纯 CSS 创作一副国际象棋
原文地址：https://segmentfault.com/a/1190000015310484
感想：棋盘是 CSS 画的，棋子是 unicode 字符。
HTML code：
<html>
<head>
<link rel="stylesheet" href="index.css">
<title>棋盘是 CSS 画的，棋子是 unicode 字符。</title>
</head>
<body>
<!-- 定义 dom，一共 8 个列表，每个列表包含 8 个元素 -->
<!-- 可以搜索象棋符：https://unicode-table.com/cn/sets/-->
<!-- 博客园：http://www.cnblogs.com/change-oneself/p/5329837.html-->
<div class="chess">
<ul>
<li>♜</li>
<li>♞</li>
<li>♝</li>
<li>♛</li>
<li>♚</li>
<li>♝</li>
<li>♞</li>
<li>♜</li>
</ul>
<ul>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
</ul>
<ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul>
<ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul>
<ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul>
<ul>
<li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li>
</ul>
<ul>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
<li>♟</li>
</ul>
<ul>
<li>♜</li>
<li>♞</li>
<li>♝</li>
<li>♛</li>
<li>♚</li>
<li>♝</li>
<li>♞</li>
<li>♜</li>
</ul>
</div>
</body>
</html>
CSS code：
html, body, ul {
margin:;
padding:;
}
/* body子元素水平垂直居中 */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: darkslategray;
}
/* 设置.chess容器的样式 */
.chess{
font-size: 32px;
background-color: burlywood;
border: 0.2em solid tan;
box-shadow: 0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3);
}
/* 画出网格状棋盘 */
.chess ul{
display: table;
}
.chess ul:nth-child(-n+2) {
color: black;
}
.chess ul:nth-child(n+7) {
color: white;
}
.chess ul li{
display: table-cell;
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5em;
/* 给字符（符号）加粗 */
font-weight: bold;
}
/* 设置网格交错的颜色 */
.chess ul:nth-child(odd) li:nth-child(even),
ul:nth-child(even) li:nth-child(odd){
background-color: rgba(0, 0, 0, 0.6);
}
54.纯 CSS 创作一副国际象棋的更多相关文章
- 如何用纯 CSS 创作一副国际象棋
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WyXrjz 可交互视频 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 前端每日实战：113# 视频演示如何用纯 CSS 创作一个赛车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...
- 75.纯 CSS 创作一支摇曳着烛光的蜡烛
原文地址:https://segmentfault.com/a/1190000015580809 学习后效果地址:https://scrimba.com/c/c8PQ3PTB 感想:CSS 真强大! ...
- 74.纯 CSS 创作一台 MacBook Pro
原文地址:https://segmentfault.com/a/1190000015568609 HTML code: <div class="macbook"> &l ...
- 73.纯 CSS 创作一只卡通狐狸
原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6EzdSd 感想:过渡效果,圆角,定位 ...
- 72.纯 CSS 创作气泡填色的按钮特效
原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> & ...
随机推荐
- javascript 判断是否移动客户端 userAgent isMobile
var isMobile = { Android: function () { return (/android/i.test(navigator.userAgent.toLowerCase())); ...
- 容易掉坑的地方The value for the useBean class attribute XXX is invalid
1.在编译 JSP 时,指定的 Bean 类没找到(没找到原因有多种所以复杂就在这里,比如文件名是否写错,包名是否写错,<jsp:useBean class="路径"> ...
- Xshell里连接VirtualBox里的Centos7
关闭虚拟机 右键虚拟机->设置->网络,连接方式选择NAT,如下图: 3.在Xshell里连接即可.
- ALGO-147_蓝桥杯_算法训练_4-3水仙花数
问题描述 打印所有100至999之间的水仙花数.所谓水仙花数是指满足其各位数字立方和为该数字本身的整数,例如 =^+^+^. 样例输入 一个满足题目要求的输入范例. 例: 无 样例输出 xxx xxx ...
- C++进阶--静态初始化的惨败
/* Initialization Fiasco 一个会使程序崩溃的细微的问题 */ // 不同文件的编译顺序是不确定的 // 如果一个文件依赖另一个文件的对象先初始化,可能出现问题 // 解决方法: ...
- Facet with Lucene
Facets with Lucene Posted on August 1, 2014 by Pascal Dimassimo in Latest Articles During the develo ...
- Ubuntu 14.10 下Eclipse操作HBase
环境介绍 64位Ubuntu14.10,Hadoop 2.5.0 ,HBase 0.99.0 准备环境 1 安装Hadoop 2.5.0,可参考http://www.cnblogs.com/liuch ...
- ASP.NET MVC如何在Action中返回脚本并执行
我们都知道在aspx页面的cs文件中只要用Respos.Write("<script></scritp>")就可以在前台执行脚本 但是在MVC中就不一样了, ...
- P1015回文数
传送 回文数的判断有个神奇的公式: g[i]==g[leng+-i] 其中leng为字符串长度,看每个g[i]是否都满足它,若满足,就是回文数 ps:洛谷的impossible有毒,必须得复制题干中的 ...
- LinkedList的自定义实现
一.背景 LinkedList双向链表: 代码: Node.java: package com.cy.collection; public class Node { Node previous; // ...