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代码，大家有兴趣的可以交流，也可以给我留言。我和乐意和大家交流学习的。

热门工具换一换