JQuery实现简单的国际象棋棋盘

最新推荐文章于 2023-08-04 14:35:17 发布

dclef

最新推荐文章于 2023-08-04 14:35:17 发布

阅读量7k

点赞数 7

本文链接：https://blog.csdn.net/drclef/article/details/114824071

版权

从零开始的JQuery学习之路专栏收录该内容

1 篇文章 0 订阅

订阅专栏

介于网上没有简单的JQuery的国际象棋棋盘在此写了一个，供大家参考

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			ul,
			li {
				list-style: none
			}

			li {
				width: 100px;
				height: 100px;
				float: left;
				border: 1px solid black;
				box-sizing: border-box;
			}

			#container {
				width: 300px;
				height: 300px;
				margin: 100px auto;
				border: 2px solid black;
			}
		</style>
		<script src="../../../../jquery-3.6.0.min.js"></script>
	</head>
	<body>

		<div id="container">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script>
			$("#container>ul").children("li:even").css("background", "black");
			
		</script>
	</body>
</html>

效果如图
在这里插入图片描述

dclef

关注

7
点赞
踩
39

收藏

觉得还不错? 一键收藏
2
评论
JQuery实现简单的国际象棋棋盘

介于网上没有简单的JQuery的国际象棋棋盘在此写了一个，供大家参考<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } ul, li { list-style: none }
复制链接

扫一扫