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

本文主要是介绍web前端开发html/css求职简介/个人简介小白网页设计,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果图展示:

html界面展示:

html/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>

这篇关于web前端开发html/css求职简介/个人简介小白网页设计的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/552021

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

解决JavaWeb-file.isDirectory()遇到的坑问题

《解决JavaWeb-file.isDirectory()遇到的坑问题》JavaWeb开发中,使用`file.isDirectory()`判断路径是否为文件夹时,需要特别注意:该方法只能判断已存在的文... 目录Jahttp://www.chinasem.cnvaWeb-file.isDirectory()遇

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

css实现图片旋转功能

《css实现图片旋转功能》:本文主要介绍了四种CSS变换效果:图片旋转90度、水平翻转、垂直翻转,并附带了相应的代码示例,详细内容请阅读本文,希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要