其他分享
首页 > 其他分享> > 【汇智学堂】-div+css布局十九(汇智学堂导师列表页-jQuery添加元素)

【汇智学堂】-div+css布局十九(汇智学堂导师列表页-jQuery添加元素)

作者:互联网

效果图:
在这里插入图片描述
html:

<!DOCTYPE html>

<html>
	
	<head>
		<meta charset="UTF-8">
		<title>jQuery控制div</title>
	</head>
	
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>	
	
	<script type="text/javascript">
		
		function a(){
			
			$("body").append("<div style='padding-left: 880px;padding-top:50px;'><h1>导师简介</h1></div>");
			$("body").append("<div><hr style='width:300px;text-align: center;height: 5px;background-color: black;'></div>")
			$("body").append("<div id='div01' style='margin-left: 320px;margin-top: 50px;height: 500px;width: 1500px;background-image: url(imgs/teacher.png);background-repeat:no-repeat'></div>")
			
			$("#div01").append("<div style='padding-left: 70px;padding-top: 150px;float: left;width: 200px;'><p>XiangRong.Guo</p><p>人民大学硕士</p><p>从业22年,有着广泛的企业合作基础</p></div>");
			$("#div01").append("<div style='padding-left: 90px;padding-top: 150px;float: left;width: 200px;'><p>Hao.Chen</p><p>工信部项目管理专家组成员</p><p>从业23年,有着深厚的项目技术管理背景</p></div>");
			$("#div01").append("<div style='padding-left: 110px;padding-top: 150px;float: left;width: 200px;''><p>HuiHui.Wei</p><p>十三五规划教材特约作者</p><p>从业20年,有着15年测试工作经验</p></div>");
			$("#div01").append("<div style='padding-left: 110px;padding-top: 150px;float: left;width: 200px;''><p>YuGuang.Lei</p><p>工信部人才中心特聘讲师</p><p>从业23年,有着15年架构师工作经验</p></div>");
		}
	
	</script>
	
	<body onl oad="a()">
	</body>
</html>

标签:jQuery,body,div01,从业,汇智,学堂,有着,append
来源: https://blog.csdn.net/weixin_39593940/article/details/94759808