一、个人简历制作

1.表格

表格由 < table> 标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table>    定义表格
<caption>  用来定义表格标题，必须紧随table标签之后。每个表格只能定义一个标题，且默认为居中显示。
<th>       表头单元格,包含表头信息
<td>       标准单元格，包含数据
<tr>       定义行，可包含一个或多个th\td元素

2.表单

HTML表单用于搜集不同类型的用户输入，由< form>元素定义。HTML表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等。

<input type="text"> 定义用于文本输入的单行输入字段
<input type="radio"> 定义单选按钮
<input type="submit"> 定义用于向表单处理程序提交表单的按钮

二、五彩导航

1.CSS超链接样式

1.1 CSS超链接样式设置

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。可以根据超链接元素的状态，设置不同的样式属性。

这四个链接状态是：

a:link      正常，未访问过的链接
a:visited   用户已访问过的链接
a:hover     当用户鼠标放在链接上时
a:active    链接被点击的那一刻

当设置为若干链路状态的样式，有顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

2.设置超链接状态样式

2.1 文本修饰

text-decoration 属性主要用于删除链接中的下划线：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

2.2 背景样式

背景颜色属性指定链接背景色：

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

三、实例结果

1.个人简历制作

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简历</title><style>td{white-space: nowrap;text-align: center;}input{border: 0;}</style>
</head><body><h3><center>个人简历</center></h3><table align="center" border="1"><tr height="50px" align="center"><td>姓名</td><td><input height="50px"   type="text"></td><td>性别</td><td><input type="text"></td><td>出生年月</td><td><input type="datetime"></td><td rowspan="4"><input type="file" name="photo"></td></tr><tr height="50px" align="center"><td>民族</td><td> <input type="text"></td><td>政治面貌</td><td><input type="text"></td><td>身高</td><td><input type="number"></td></tr><tr height="50px" align="center"><td>学制</td><td><input type="number"></td><td>学历</td><td><input type="text"></td><td>户籍</td><td><input type="text"></td></tr><tr height="50px" align="center"><td>专业</td><td><input type="text"></td><td colspan="2">毕业院校</td><td colspan="2"><input type="text"></td></tr><tr height="50px" align="center"><td colspan="7">技能、特长或爱好<input type="text"></td></tr><tr height="50px" align="center"><td>外语等级</td><td colspan="2"><input type="text"></td><td>计算机</td><td colspan="3"><input type="text"></td></tr><tr height="50px" align="center"><td colspan="7">个人履历<input type="text"></td></tr><tr height="50px" align="center"><td>时间</td><td colspan="2">单位</td><td colspan="4">经历</td></tr><tr height="50px" align="center"><td><input type="text"></td><td colspan="2"><input type="text"></td><td colspan="4"><input type="text"></td></tr><tr height="50px" align="center"><td><input type="text"></td><td colspan="2"><input type="text"></td><td colspan="4"><input type="text"></td></tr><tr height="50px" align="center"><td><input type="text"></td><td colspan="2"><input type="text"></td><td colspan="4"><input type="text"></td></tr><tr height="50px" align="center"><td colspan="7">联系方式<input type="text"></td></tr><tr height="50px" align="center"><td>通信地址</td><td colspan="2"><input type="text"></td><td>联系电话</td><td colspan="3"><input type="number"></td> </tr><tr height="50px" align="center"><td>E-mail</td><td colspan="2"><input type="email"></td><td>邮编</td><td colspan="3"><input type="number"></td></tr><tr height="50px" align="center"><td colspan="7">自我评价<input type="text"></td></tr></table></body>
</html>

结果如下：

2.五彩导航

代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>五彩导航</title><style type="text/css">.nav .one:link{display: inline-block;width:120px;height:58px;background:url("bg1.png");text-decoration: none;text-align: center;line-height:50px;}.nav .one:hover{background: url("bg5.png");}.nav .two:link{display: inline-block;width:120px;height:58px;background:url("bg2.png");text-decoration: none;text-align: center;line-height: 50px;}.nav .two:hover{background:url("bg4.png");}.nav .three:link{display: inline-block;width:120px;height: 58px;background:url("bg3.png");text-decoration: none;text-align: center;line-height: 50px;}.nav .three:hover{background:url("bg6.png");}.nav .four:link{display:inline-block;width: 120px;height: 58px;text-align:center;text-decoration: none;background:url("bg4.png");line-height: 50px;}.nav .four:hover{background:url("bg7.png");}</style></head><body><div class="nav" ><a href="#" class="one" style="color:white;">五彩导航</a><a href="#" class="two" style="color: white;">五彩导航</a><a href="#" class="three" style="color: white;">五彩导航</a><a href="#" class="four" style="color: white;">五彩导航</a></div></body>
</html>

结果如下：
鼠标移入前：

鼠标移入后：

Day3—HTML个人简历制作及五彩导航练习相关推荐

Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
html响应式导航栏制作,用Sass制作响应式导航栏(原创)
插件描述:用Sass制作响应式导航栏更新时间:2017/12/29 下午8:33:04 更新说明:细节优化data-stop='true' : 在手机版上禁止跳转页面// 插入js代码 $(docu ...
css制作漂亮彩带导航条菜单
点击这里查看效果: http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: 1 <!DOCTYPE html PUBLIC " ...
推荐几个我目前在用的简历制作工具
推荐几个我目前在用的简历制作工具,我只推荐给了我的前+1 leader,现在给你们了第一个:超级简历,风格极简化,生成简历后可以帮你修改一些简历中存在的小问题,同时也提供中英文的模板还能对你的简历自 ...
计算机应用与维修专业主修,计算机应用与维修专业个人简历制作
★无忧考网个人简历频道为大家整理的计算机应用与维修专业个人简历制作,供大家参考.更多阅读请查看本站个人简历频道! 个人基本简历姓名:- 国籍:中国无照片目前所在地: 广州民族: 汉族户口所在 ...
表格进阶03——简历制作（用表格布局）
简历制作(用表格布局) 知识点: 1.水平方向上,横跨用colspan,4个格 <td colspan="4">会计</td> 2.竖直方向上,竖并用row ...
整理一些简历制作、工作、面试、招聘网站资源分享
1 常见招聘网站网站名称地址 BOSS直聘 https://www.zhipin.com/?ka=header-home 猎聘 https://www.liepin.com/ 智联 https:/ ...
简历制作 | 保研 | 考研复试
无论是保研.考研复试还是实习.工作,简历都是非常重要的.今天跟大家分享下简历制作的四点注意事项,不足之处也欢迎大家在评论区指出- 个人情况学校:华中地区某末流211 专业:信息管理与信息系统夏令营 ...
手把手教你制作手机底部导航栏，领导看完都说好
手把手教你制作手机底部导航栏,领导看完都说好

Day3—HTML个人简历制作及五彩导航练习

个人简历制作和五彩导航练习