html+css个人简历/网页界面

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人简历</title>
		<link rel="stylesheet" href="css/li.css" />
	</head>
	<body>
		<div class="q">
			<!--第一部分-->
			<div class="a">
				<div class="a1">
					<img src="img/1.jpg" height="100px" width="100px" />
				</div>
				<br />
				<br />
				<br />
				<!--个人信息-->
				<b><font color="dodgerblue" size="4">&nbsp;&nbsp;&nbsp;&nbsp;个人信息:</font></b>
				<div class="a2"></div>
				<br />
				<div class="a3">
				<h4><b>地址:</b><h4>
				<h5>陕西省西安市</h5>
				<h4><b>生日:</b><h4>
				<h5>1999.3.21</h5>
				<h4><b>电话:</b><h4>
				<h5>18034609730</h5>
				<h4><b>邮箱:</b><h4>
				<h5>2277532641@qq.com</h5>
				</div>
				<br />
				<br />
				
				<!--技能证书-->
				<b><font color="dodgerblue" size="4">&nbsp;&nbsp;&nbsp;&nbsp;技能奖项:</font></b>
				<div class="a2"></div>
				<div class="a3">
				<h4><b>计算机二级</b><h4>
				<h4><b>大学英语四级</b><h4>
				<h4><b>国家励志奖</b><h4>
				<h4><b>教师资格证</b><h4>
				<h4><b>普通话证</b><h4>
				<h4><b>机动车驾驶证</b><h4>
				</div>
				
				<!--自我评价-->
				<b><font color="dodgerblue" size="4">&nbsp;&nbsp;&nbsp;&nbsp;自我评价:</font></b>
				<div class="a2"></div>
				<div class="a3">
				<h4><b>&nbsp;&nbsp;大学的四年,给我奠定了扎实的专业理论基础,良好的组织能力,团队协作精神,务实的工作作风还有良好的为人处世能力。</b><h4>
				<h4><b>&nbsp;&nbsp;在社会实践上,四年的大学生活,我对自己严格要求,注重能力的培养,尤其是实践动手能力更是我的强项。曾多次参加社会实践活动,具有一定的实践经验和动手能力。</b><h4>
				</div>
			</div>
			
			
			<!--第二部分-->
			<div class="b">
				<div class="b1"><font size="6">李某某</font></div>
				<div class="b2">求职意向:Java开发工程师</div>
				<div class="b3"><font size="4" color="floralwhite">教育背景</font></div>
				<div class="b4">
					<font size="4">西安工业大学&nbsp;&nbsp;&nbsp;&nbsp;软件工程专业&nbsp;&nbsp;&nbsp;&nbsp;本科&nbsp;&nbsp;&nbsp;&nbsp;2018.9.6-2022.6</font><br /><br />
					<font size="4">主修课程:</font><br /><br />
					<font size="4">计算机网络、C++、<br />Java基础、计算机操作系统、<br />数据库原理、Linux操作系统<br />UI界面设计、Android移动应用开发</font>
				</div>
				
				<div class="b3"><font size="4" color="floralwhite">项目经验</font></div>
				<div class="b4">
					<font size="4">仿keep官网网页界面设计</font><br /><br />
					<font size="4">学生管理系统</font><br /><br />
					<font size="4">旅游app的UI界面设计</font><br /><br />
					<font size="4">用Android开发建设app</font>
				</div>
				
				<div class="b3"><font size="4" color="floralwhite">专业技能</font></div>
				<div class="b4">
					<font size="4">基础方面:</font><br /><br />
					<font size="4">1.熟悉办公软件,Excel、word的使用,PPT的制作<br />2.熟悉photoshop的使用</font><br /><br />
					<font size="4">专业方面:</font><br /><br />
					<font size="4">1.熟悉MVC、IOC、AOP等多种J2EE设计模式进行软件设计<br />2.熟练应用Java集成开发环境Eclipse进行开发<br />3.熟悉Spring,ibatis等开源框架开发企业级应用<br />4.熟悉JSP,webService,JavaScript等技术</font><br /><br />
					<font size="4">数据库方面:</font><br /><br />
					<font size="4">1.熟悉Oracle,MySql的使用<br />2.熟悉Hql语句与事务处理,熟悉存储过程</font><br /><br />
				</div>
			</div>
			
			
		</div>
	</body>
</html>

CSS代码:

.q{
	height: 1330px;
	width: 850px;
	background-color: azure;
	margin-left: 330px;
	border: solid 1px black;
}
.a{
	height: 1330px;
	width: 250px;
	background-color:azure;
}
.a1{
	margin-left: 70px;
	padding-top: 50px;
}
.a2{
	height: 2px;
	width: 200px;
	background-color:deepskyblue;
	margin-left: 20px;
	margin-top: 5px;
}
.a3{
	height: 300px;
	margin-left: 20px;
	margin-right: 20px;
}
.b{
	height: 1330px;
	width: 600px;
	background-color:white;
	margin-top: -1330px;
	margin-left: 250px;
}
.b1{
	padding-top: 25px;
	margin-left: 60px;
}
.b2{
	padding-top: 25px;
	margin-left: 60px;
}
.b3{
	height: 35px;
	width:160px;
	background-color: #3498DB;
	margin-left: -30px;
	margin-top: 85px;
}
.b3 font{
	margin-left: 50px;
}
.b4{
	margin-top: 25px;
	margin-left: 25px;
}

  • 23
    点赞
  • 303
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个简易的动态页面的HTMLCSS和JS代码示例: HTML代码: ``` <!DOCTYPE html> <html> <head> <title>动态页面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <h1>动态页面示例</h1> <p id="time"></p> <button id="btn">点击我更新时间</button> </div> <script src="script.js"></script> </body> </html> ``` CSS代码: ``` #container { margin: 0 auto; text-align: center; } #time { font-size: 24px; margin-bottom: 20px; } button { font-size: 20px; padding: 10px 20px; border-radius: 5px; background-color: #008CBA; color: #fff; border: none; cursor: pointer; } button:hover { background-color: #006B9F; } ``` JS代码: ``` window.onload = function() { var timeEl = document.getElementById("time"); var btnEl = document.getElementById("btn"); function updateTime() { var currentTime = new Date(); var hours = currentTime.getHours(); var minutes = currentTime.getMinutes(); var seconds = currentTime.getSeconds(); //加0操作 if (hours < 10) { hours = "0" + hours; } if (minutes < 10) { minutes = "0" + minutes; } if (seconds < 10) { seconds = "0" + seconds; } var timeString = hours + ":" + minutes + ":" + seconds; timeEl.innerHTML = timeString; } btnEl.onclick = function() { updateTime(); } updateTime(); setInterval(updateTime, 1000); } ``` 以上代码实现了一个带有动态时间更新效果的页面。当用户点击“点击我更新时间”按钮时,页面上的时间会更新。同时,页面上还包含了一些基本的CSS样式,使页面看起来更加美观。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值