html制作网页版简历

今天给大家分享一个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>

结果：

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

html制作网页版简历

猜你喜欢