web前端开发html/css求职简介/个人简介小白网页设计
- 其他
- 2025-07-21 19:00:07
效果图展示： html界面展示： html/css代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:// .w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>求职简介</title> <style type="text/css"> *{ padding:0 suto;margin:0 auto; text-decoration:none; list-style:none; } body{ background:url(pictures/fly.jpg); background-repeat:no-repeat; background-size:1850px; } .bg-main{ background:url(pictures/longfj.jpg); background-repeat:no-repeat; } .bg-h{ width:984px; text-align:center; margin:0 auto; padding-top:50px; } h2{ background:url(pictures/umbrella.jpg); background-repeat:no-repeat; width:984px;height:180px; margin-bottom:0; padding-top:140px; padding-bottom:20px; } .w-64,.w-48,.w-32,.w-16{ text-align:center; font-family:华文新魏; } .w-64{font-size:64px;color:#FFF;text-shadow:2px 2px 2px #000;} .w-48{font-size:48px;} .w-32{font-size:32px;} .w-16{font-size:16px;} a{text-decoration:none;} .hezi-a{ background:url(pictures/shan.jpg); width:984px; margin:0 auto; } .hezi-b{width:984px;margin:0 auto;} .hezi-c{ text-align:center; padding-top:10px; width:150px;height:100px; background-color:#300; float:right; margin:31px 0px 0px 20px; } .hezi-d{ width:1040px; margin:0 auto; } .hezi-e{ background-color:#FFF; width:1050px;height:450px; margin:0 auto; opacity:0.5; line-height:30px; padding-top:10px; } a{color:#CFF; } dl{width:300px;margin:0 auto;float:left;padding-bottom:20px;} dt{color:#F60;padding-top:20px;padding-bottom:20px;padding-left:30px;font-size:32px;font-family:楷体;text-shadow:3px 3px 3px #FFF;} dd{font-size:16px;font-family:华文新魏;color:#F60;padding-left:30px;line-height:30px;} ul{margin-bottom:10px;} li{color:#FFF;line-height:30px;} td{text-align:center;color:#000; } p{color:#FFF;margin-top:10px;margin-bottom:10px;} .zjj{margin-left:30px;} .hx{border:1px dashed #F90;width:50px;margin-top:10px;margin-bottom:20px;} .c{text-align:center;margin:0 auto;} .mb20{margin-bottom:20px} </style> </head> <body> <h2 class="w-64">为理想奋斗的青春最美丽 <p class="bg-h" > <a name="首页" class="w-32 zjj">首页</a> <a href="#个人资料" class="w-32 zjj">个人资料</a> <a href="#作品集" class="w-32 zjj">作品集</a> <a href="#获奖情况" class="w-32 zjj">获奖情况</a> <a href="#留言板" class="w-32 zjj">留言板</a> </p></h2> <div class="hezi-a"> <p class="c"><img src="pictures/myself.gif" width=20% style="margin-top:150px"/></p> <p class="w-32">Hello!</p> <p class="w-32">My name is Linda~</p> <p class="w-16" style="padding-bottom:30px">Nice to meet you!</p> </div> <div class="hezi-b"> <p><a name="个人资料"> </a></p> <dl> <dt><b>您好，我是山山</b></dt> <dd><img src="pictures/running.jpg" width="100%" class="mb20"/></dd> <dd>民族：汉</dd> <dd>身高:162㎝</dd> <dd>体重：48kg</dd> <dd>星座：双子座</dd> <dd><hr class="hx"></dd> <dd><img src="pictures/school.jpg" width="100%" class="mb20"/></dd> <dd>在读学校：海南热带海南学院</dd> <dd>所在院系：创意设计学院</dd> <dd>就读专业：数字媒体技术</dd> <dd>学历：本科在读</dd> <dd>期待岗位：寿险精算师</dd> </dl> <dl> <dt> <dd><hr class="hx"></dd> <dd><img src="pictures/letter.jpg" width="100%" class="mb20" /></dd> <dd>现居城市：三亚</dd> <dd>婚姻情况：未婚</dd> <dd>联系电话:13111951667</dd> <dd>电子邮箱:13111951667@163 </dd> <dd><hr class="hx"></dd> <dd><img src="pictures/hand.jpg" width="100%" class="mb20"/></dd> <dd>性格：生性凉薄，不喜言笑。</dd> <dd>座右铭：时间就像一条小河，勤劳的人从小河里捞起金子，懒惰的人只能捞起后悔和失望。</dd> <dd style="border:1px solid black;text-align:center;margin:5px 20px 10px;padding:5px;border-radius:20px;background-color:#F60;"> <a href="#首页"><b>点击查看更多</b></a></dd> <dd><p><a name="作品集"></a></p></dd> </dl> <div class="hezi-c"> <p class="w-32" ><b>1<sub>+</sub></b></p> <hr style="border:1px dashed white;width:90px;"> <p>获奖次数</p> <div class="hezi-c"> <p class="w-32"><b>7<sub>+</sub></b></p> <hr style="border:1px dashed white;width:90px;"> <p>阅读情况</p> </div> <div class="hezi-c"> <p class="w-32"><b>10<sub>+</sub></b></p> <hr style="border:1px dashed white;width:90px;"> <p>完成的练习次数</p> </div> <div class="hezi-c"> <p class="w-32"><b>50<sub>+</sub></b></p> <hr style="border:1px dashed white;width:90px;"> <p>发表博客次数</p> </div> </div> <div class="hezi-c"> <p class="w-32" ><b>3<sub>+</sub></b></p> <hr style="border:1px dashed white;width:90px;"> <p>作业完成次数</p> <div class="hezi-c" > <p class="w-32"><b>5<sub>+</sub></b></p> <hr style="border:1px dashed white;width:90px;"> <p>每周跑步次数</p> </div> <div class="hezi-c"> <p class="w-32"><b>9<sub>+</sub></b></p> <hr style="border:1px dashed white;width:90px;"> <p>每周听歌次数</p> </div> <div class="hezi-c" > <p class="w-32"><b>30<sub>+</sub></b></p> <hr style="border:1px dashed white;width:90px;"> <p>说说发表情况</p> </div> </div> </div> <div class="hezi-d"> <table border="1px" cellspacing="0" style="margin:50px"> <tr><td colspan="10" style="padding:15px 0px 15px;font-size:32px;font-family:楷体;letter-spacing:20px;"><b>作品集</b></td></tr> <tr> <td>序号</td> <td>作品名称</td> <td>作品</td> <td>作品信息</td> <td>获奖情况</td> <td>序号</td> <td>作品名称</td> <td>作品</td> <td>作品信息</td> <td>获奖情况</td> </tr> <tr> <td>1</td> <td>《游戏地形图》</td> <td><img src="pictures/a.jpg" width="100" /></td> <td>结课作业</td> <td>无</td> <td>2</td> <td>《石头人》</td> <td><img src="pictures/b.jpg" width="100" /></td> <td>游戏角色设计</td> <td>无</td> </tr> <tr> <td>3</td> <td>《实验室安全》</td> <td><img src="pictures/c.jpg" width="100" /></td> <td>校内比赛</td> <td>优秀奖</td> <td>4</td> <td>《中秋》</td> <td><img src="pictures/d.jpg" width="100" /></td> <td>结课作业</td> <td>无</td> </tr> <tr> <td>5</td> <td>《读书》</td> <td><img src="pictures/e.jpg" width="100" /></td> <td>摩托车结构设计</td> <td>无</td> <td>6</td> <td>《女战士》</td> <td><img src="pictures/f.jpg" width="100" /></td> <td>结课作业</td> <td>无</td> </tr> <tr> <td>9</td> <td>《新加坡环球旅行宣传片》</td> <td colspan="2"><video src="新加坡环球宣传片.mp4" controls="controls" width="250"></video></td> <td>无</td> <td>10</td> <td>《惊魂一梦》</td> <td colspan="2"><video src="惊魂一梦.mp4" controls="controls" width="250"></video></td> <td>无</td> </tr> </table> <a href="#" name="获奖情况"><a> <p class="w-48" style="color:#F60">获奖情况</p> <ul> <li>2022年3月获得海南热带海洋学院程序设计大赛成功参赛奖</li> <li>2022年11月荣获热带海洋学院实验室安全海报大赛优秀奖</li> <li>2023年6月荣获全国大学生设计大赛团体赛海南省二等奖，作品《南极磷虾会灭绝吗》</li> <li> <img src="pictures/成功参赛奖.jpg" width="300" /> <img src="pictures/优秀奖.jpg" width="300" /> <video src="南极磷虾会灭绝吗.mp4" controls="controls" width="350" ></video></li></ul> </div> <div class="hezi-e"> <p><a name="留言板"> </a></p> <p style="color:#F60;opacity:1;font-size:48px;font-family:华文新魏;text-align:center;background-color:#FFF;">留言板</p> <p class="w-32" style="color:#000">您好！有什么想对我说的吗？</p> <p class="w-16" style="color:#000;font-size:22px;">请写在这里</p> <textarea type="text" style="border:1px dashed #000;width:900px;height:250px;display:-webkit-box;-webkit-line-clamp:10;font-size:24px;"/></textarea> <h6 align="right" style="margin-right:70px;">2023.11.26</h6> </div> </body> </html>
web前端开发html/css求职简介/个人简介小白网页设计由讯客互联其他栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“web前端开发html/css求职简介/个人简介小白网页设计”
