web前端开发html/css求职简介/个人简介小白网页设计

效果图展示：

html界面展示：

html/css代码：

css 复制代码
<!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 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.com</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>