JQuery练习--写“申”和“中”

最新推荐文章于 2024-07-20 10:36:53 发布

fatloongcat

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量237

点赞数

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/fatdragoncat/article/details/123175273

版权

使用JQ选择器来设置div样式写出“申”字和“中”字。

“中”字：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 50px;
				/* border: 1px solid red; */
				background-color: ;
			}
		</style>
	</head>
	<body>
		<div id="d1" style="display:flex;">
			<div id="dd1"></div>
			<div></div>
			<div></div>
		</div>
		<div id="d2" style="display:flex;">
			<div></div>
			<div id="dd3"></div>
			<div></div>
		</div>
		
	</body>
    <!-- 导入jQuery -->
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$("#dd1+div").css({"border":"10px solid red","width":"30px","height":"205px","background-color":"red"})
		$("#dd3").css({"border":"30px solid red","width":"895px","height":"30px"})
	</script>
</html>

“申”字：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!-- 导入jQuery -->
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				width: 200px;
				height: 50px;
				/* border: 1px solid red; */
				background-color: ;
			}
		</style>
	</head>
	<body>
		<div id="d1" style="display:flex;">
			<div></div>
			<div id="dd1"></div>
			<div></div>
		</div>
		<div id="d2" style="display:flex;">
			<div></div>
			<div id="dd2"></div>
			<div></div>
		</div>
		<div id="d3" style="display:flex;">
			<div></div>
			<div id="dd3"></div>
			<div></div>
		</div>
		<div id="d4" style="display:flex;">
			<div></div>
			<div id="dd4"></div>
			<div></div>
		</div>
		
	</body>
	<script type="text/javascript">
		$("#dd1").css({"border":"10px solid red","width":"30px","height":"265px","background-color":"red"})
		$("#dd2").css({"background-color":"red","width":"895px","height":"30px"})
		$("#dd3").css({"background-color":"red","width":"895px","height":"30px"})
		$("#dd4").css({"background-color":"red","width":"895px","height":"30px"})
		$("#d2>div:eq(0)").css({"background-color":"red","height":"140px"})
		$("#d2>div:eq(2)").css({"background-color":"red","height":"140px"})
		
		
	</script>
</html>

fatloongcat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery练习--写“申”和“中”

使用JQ选择器来设置div样式写出“申”字和“中”字。“中”字：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ width: 200px; height: 50px; /* border: 1px so...
复制链接

扫一扫