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

2019-07-05 20:43:53 阅读：215 来源： 互联网

标签：jQuery body div01 从业汇智学堂有着 append

效果图：
在这里插入图片描述
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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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