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

最新推荐文章于 2023-07-25 23:00:49 发布

一朵风中摇曳的水仙花-

最新推荐文章于 2023-07-25 23:00:49 发布

阅读量777

点赞数 6

分类专栏：实训

本文链接：https://blog.csdn.net/qq_45313388/article/details/117510695

版权

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

一、个人简历制作
- 1.表格
- 2.表单
二、五彩导航
三、实例结果
- 1.个人简历制作
- 2.五彩导航

一、个人简历制作

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"><

最低0.47元/天解锁文章

一朵风中摇曳的水仙花-

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Day3—HTML个人简历制作及五彩导航练习

个人简历制作和五彩导航练习一、个人简历制作1.表格2.表单二、五彩导航1.CSS超链接样式1.1 CSS超链接样式设置2.设置超链接状态样式2.1 文本修饰2.2 背景样式三、实例结果1.个人简历制作2.五彩导航一、个人简历制作1.表格表格由 < table> 标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片
复制链接

扫一扫