欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

html制作网页版简历

程序员文章站 2022-03-07 14:15:36
...

今天给大家分享一个HTML的网页布局，这里面都是用一些简单的代码，相当于基础代码却做出不一般的网页布局，里面包含了div布局，同时这里面还引用了css层次样式，因为引入这个的话做出来的网页比较好看，而且生动。代码逐步分解分析如下，后面会附上完整的代码：

这个是链接的图片，主要的图标是icon格式的，同时解决中文乱码问题。

<link rel="shortcut icon" href="/image\63.ico" type="image/x-icon"/>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    这个是css样式，采用了类选择器，其中有div的布局分布，float型，div的大小固定，同时还有背景颜色等等。

.class1{
	border:0px;
	height:300px;
	width:280px;
	margin:0px;
	float:left;
	}

	.le{
	width:30%;
	height:700px;
	border:0px;
	background:#FFCCFF;
	text-align:center;
	}
	
	 .class2{
	 margin-top:2px;
	 margin-right:1px;
   height:578px;
   width:980px;
   float:right;}
	.class3{
		border:0px;
		top:150px;
		width:280px;
		height:310px;
		
	}

这个就是使用css样式对图片圆形画，让我们的图片不在使用PS，直接可以使用css样式将矩形的图片转化为圆形头像，既方便而且不用PS基础。

.imgtest{
	width:150px;
	height:150px;
	background-image:url(/image/zjyb.jpg);
	background-size:cover;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	}

字体样式和大小设定：

.STYLE3 {font-family: "宋体"; font-size: 24px; }

设置进度条

<progress id="progress" value="43" max="100"></progress>

插入音乐：

<audio id="bgsound" src="/music\纯音乐 - 天行九歌 (竹笛).mp3" autoplay="autoplay"</audio>

使用滚动的属性，让网页“活”起来。

<marquee direction="left" scrollamount="3" behavior="alternate"><p ><a href="http://www.zhujiayi95.top/" class="STYLE4" style="text-decoration:none">返回首页</a></p>
</marquee>

下面就是div使用类选择器，很简单的代码，所以我就不一一讲解了，直接附上完整的代码，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta name="360-site-verification" content="b0c38b8902bc841105583e430b1b36ca" />
	<meta name="baidu-site-verification" content="EAUqJnKlTM" />
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>个人简历</title>
	<link rel="shortcut icon" href="/image\63.ico" type="image/x-icon"/>
	<meta name="keywords" content="text/html; charset=utf-8","个人简历","朱家意简历"/>

<style>
	.class1{
	border:0px;
	height:300px;
	width:280px;
	margin:0px;
	float:left;
	}

	.le{
	width:30%;
	height:700px;
	border:0px;
	background:#FFCCFF;
	text-align:center;
	}
	.imgtest{
	width:150px;
	height:150px;
	background-image:url(/image/zjyb.jpg);
	background-size:cover;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	}
	 .class2{
	 margin-top:2px;
	 margin-right:1px;
   height:578px;
   width:980px;
   float:right;}
	.class3{
		border:0px;
		top:150px;
		width:280px;
		height:310px;
		
	}
		.tit{
		  float:left;
		 text-align:center;
		 line-height:40px;
		 width:100%;
		 border-buttom:1px solid #99CC00;
		 background: #F8F8F8 0.8;
		 height:40px;
		 box-shadow:0px 3px 3px #999999;/*设置阴影*/
		 border-radius:5px;
		 font-family: "宋体";
		font-size: large;
   }
     .content{
	 text-align:center;
	 float:left;
	 width:100%;

	border:0px solid  #99CC00;
	border-radius:8px;
	
	font-family: "宋体";
	font-size: large;
   }
  

.STYLE1 {font-family: "新宋体"}
.STYLE2 {font-family: "宋体"}
.STYLE3 {font-family: "宋体"; font-size: 24px; }
.STYLE4 {font-size: 18px}
</style>
</head>
	
<body bgcolor="#CCCCCC">
<div class="class1">
	<div class="imgtest" style="margin-left:65px;margin-top:110px">
	
	<br /><br /><br /><br /><br /><br /><br />
	 
	</div>
</div>

<div class="class2">
<p class="STYLE3">基础资料</p>
<p class="STYLE2">  <span class="STYLE4">专业技能</span></p>
<p class="STYLE2">      所学颇杂，从接触编程以来，主要学的有C语言、Java、C#、数据库、HTML、Python等等。</p>
<hr />
<p class="STYLE2">  <span class="STYLE4">所得成就</span></p>

<p class="STYLE2">      C#编写八数码游戏、音乐播放器、html贪吃蛇、个人主页、java做简易系统、Python做技术博客与人类行为关系分析。爬取小说等等。</p>
<hr />

<p class="STYLE2">  <span class="STYLE4">教育背景</span></p>
<p class="STYLE2">      贵州财经大学本科生，计算机科学与技术专业，主修课程：C语言、java、数据库、Python、计算机网络、人机交互、软件工程、算法、计算机操作系统等等。</p>
<hr />
<p class="STYLE2">  <span class="STYLE4">工作经历</span></p>
<p class="STYLE2">      年少时发过传单，大学曾三次在寒暑假做过家教，而且效果还不错。帮助过教育机构培训老师，做过面试官。</p>
<hr />
<p class="STYLE2">  <span class="STYLE4">自我评价</span></p>
<p class="STYLE2">      虽聪明大方，但实乃含而有蓄，诚而实恳。然写诗百篇，可雕润不足，气过其文。闻成绩优秀，却只纸上谈兵，不求甚解。终唯留心地善良，乐于助人也。</p>
</div>

<div class="class3">
<br /><br /><br />
<h3 align="center" class="STYLE1">个人介绍</h3>
<hr />
<p class="STYLE2">出生：1995/08/05</p>
<p class="STYLE2">星座：狮子座</p>
<p class="STYLE2">称号：落叶居士</p>
<p class="STYLE2">出生地：毕节七星关区</p>
<p class="STYLE2">专业：计算机科学与技术</p>
<p class="STYLE2">兴趣爱好：旅游、编程、听歌、写诗.....</p>
</div>



<div class="tit">人生自古一场梦，梦到天涯睡狮醒。踏平世间坎坷路，一路走来太从容。<br />  
</div>
  <div class="content"><br> 人生路途:
    <progress id="progress" value="43" max="100"></progress>
   
	<br />
<marquee direction="left" scrollamount="3" behavior="alternate"><p ><a href="http://www.zhujiayi95.top/" class="STYLE4" style="text-decoration:none">返回首页</a></p>
</marquee>
	<audio id="bgsound" src="/music\纯音乐 - 天行九歌 (竹笛).mp3" autoplay="autoplay"</audio>
	 
</div>
	
</body>
</html>

结果：

html制作网页版简历

这个就是结果展示，大家看出这个代码还是非常简单的吧，里面基本都没有什么复杂的代码，也没有使用js脚本语言，所以对于初学者来说还是非常简单的。这里给大家一个我的网站：http://www.zhujiayi95.top/，里面也是我自己写的一点HTML代码，大家有兴趣的可以交流，也可以给我留言。我和乐意和大家交流学习的。



相关标签： div布局 插入音乐 网上个人简历 css样式 HTML写主页

上一篇： 微信小程序如何实现数据共享与方法共享详解

下一篇： VBS基础篇 - vbscript队列

推荐阅读