1.打印中字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
//定义5*5的格子样式
#d1>div>div{
width: 50px;
height: 50px;
border: 1px solid red;
}
#d1>div{
display: flex;
width: 255px;
}
#d1{
width: 255px;
}
</style>
</head>
<body>
<div id="d1">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
//将2，4行背景色调成黑色
$("#d1>div:odd").css("background-color","black");
//将1，3，5列调成黑色
$("#d1>div>div:even").css("background-color","black");
//将第一行和第五行的首位和最后一位元素调成白色
$("#d1>div:even:eq(0) :first,#d1>div:even:eq(0) :last,#d1>div:even:eq(2) :first,#d1>div:even:eq(2) :last").css("background-color","white");
</script>
</html>
2.打印申字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1>div>div{
width: 50px;
height: 50px;
border: 1px solid red;
}
#d1>div{
display: flex;
width: 255px;
}
#d1{
width: 255px;
}
</style>
</head>
<body>
<div id="d1">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
//将2，4，6行调成黑色
$("#d1>div:odd").css("background-color","black");
//将1，3，5列调成黑色
$("#d1>div>div:even").css("background-color","black");
//将第一行和最后一行的首位和最后一位元素调成白色
$("#d1>div:even:eq(0) :first,#d1>div:even:eq(0) :last,#d1>div:even:eq(3) :first,#d1>div:even:eq(3) :last").css("background-color","white");
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
