使用html和css实现个人简历表单的制作

根据下列要求,做出下图所示的个人简历(表单)

在这里插入图片描述

表单要求

Ⅰ、表格整体的边框为1像素,单元格间距为0,表格中前六列列宽均为100像素,第七列 为200像素,表格整体在页面上居中显示;
Ⅱ、前五行的行高为40像素,第六行的行高为80像素,排列方式均为居中显示;
Ⅲ、第一行合并了7列;第三行合并了三列;第四行合并了三列;第五行合并了五列;第六 行合并了六列;照片的单元格合并了四行。

html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1px" cellspacing="0" align="center"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="200px"><tr height="40"><th colspan="7">个人简历</th></tr><tr height="40" align="center"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td></tr><tr height="40" align="center"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td></tr><tr height="40" align="center"><td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td></tr><tr height="40" align="center"><td>毕业院校</td><td colspan="5"></td></tr><tr height="80" align="center"><td>求职意向</td><td colspan="6"></td></tr></table></body>
</html>

CSS和html分开代码

CSS文件{style.css}

/* styles.css *//* 设置表格样式 */
table {border: 1px solid black;border-collapse: collapse;margin: auto; /* 居中显示 */
}/* 设置表头样式 */
th {background-color: #ccc;height: 40px;
}/* 设置表格内容样式 */
td {height: 40px;
}/* 设置照片单元格样式 */
td[rowspan="4"] {vertical-align: middle; /* 垂直居中显示 */
}/* 设置单元格内容水平和垂直居中显示 */
td, th {text-align: center;vertical-align: middle;
}

HTML文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>个人简历</title><!-- 引入外部 CSS 文件 --><link rel="stylesheet" href="styles.css"></head><body><table border="1px" cellspacing="0" align="center"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="200px"><tr height="40"><th colspan="7">个人简历</th></tr><tr height="40" align="center"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td></tr><tr height="40" align="center"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td></tr><tr height="40" align="center"><td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td></tr><tr height="40" align="center"><td>毕业院校</td><td colspan="5"></td></tr><tr height="80" align="center"><td>求职意向</td><td colspan="6"></td></tr></table></body>
</html>

运行结果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/10596.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git提交代码异常报错error:bad signature 0x00000000

报错信息 error:bad signature 0x00000000 异常原因 git 提交过程中异常关机或重启&#xff0c;造成当前项目工程中的.git/index 文件损坏&#xff0c;无法提交 解决步骤 删除.git/index文件 rm -f .git/index 重启git git reset

Java 【数据结构】 哈希(Hash超详解)HashSetHashMap【神装】

登神长阶 第十神装 HashSet 第十一神装 HashMap 目录 &#x1f454;一.哈希 &#x1f9e5;1.概念 &#x1fa73;2.Object类的hashCode()方法: &#x1f45a;3.String类的哈希码: &#x1f460;4.注意事项: &#x1f3b7;二.哈希桶 &#x1fa97;1.哈希桶原理 &#x…

Bert基础(二十二)--Bert实战:对话机器人

一 、概念简介 1.1 生成式对话机器人 1.1.1什么是生成式对话机器人? 生成式对话机器人是一种能够通过自然语言交互来理解和生成响应的人工智能系统。它们能够进行开放域的对话,即在对话过程中,机器人可以根据用户的需求和上下文信息,自主地生成新的、连贯的回复,而不仅…

如何使用CertCrunchy从SSL证书中发现和识别潜在的主机名称

关于CertCrunchy CertCrunchy是一款功能强大的网络侦查工具&#xff0c;该工具基于纯Python开发&#xff0c;广大研究人员可以利用该工具轻松从SSL证书中发现和识别潜在的主机信息。 支持的在线源 该工具支持从在线源或给定IP地址范围获取SSL证书的相关数据&#xff0c;并检索…

大数据测试

1、前言 大数据测试是对大数据应用程序的测试过程&#xff0c;以确保大数据应用程序的所有功能按预期工作。大数据测试的目标是确保大数据系统在保持性能和安全性的同时&#xff0c;平稳无差错地运行。 大数据是无法使用传统计算技术处理的大型数据集的集合。这些数据集的测试涉…

Foxmail使用经验总结

本篇博客将详尽讲解如何利用Foxmail进行高效的邮件管理&#xff0c;以及一些实用的使用技巧&#xff0c;让邮件管理变得更为高效和有序。 1. 账户设置与管理 多账户整合&#xff1a;Foxmail支持多个邮件账户同时管理&#xff0c;用户可以将个人和工作邮箱整合在同一个界面&am…

实战中使用 QEMU 进行内网穿透

前言 阅读 https://xz.aliyun.com/t/14052 《使用 QEMU 进行内网穿透&#xff1f;》 https://securelist.com/network-tunneling-with-qemu/111803/ 《Network tunneling with… QEMU?》 我将此项技术应用到实战中&#xff0c;取得不错的效果&#xff0c;但是也遇到很多坑&am…

机器学习算法应用——朴素贝叶斯分类器

朴素贝叶斯分类器 朴素贝叶斯分类器&#xff08;Naive Bayes Classifier&#xff09;是一种基于贝叶斯定理和特征条件独立假设的分类方法。它适用于分类任务&#xff0c;特别是文本分类、垃圾邮件识别等领域。 原理 朴素贝叶斯分类器基于以下两个主要假设&#xff1a; 特征条…

JS_ES6(1)

作用域链&#xff1a; 作用域链是底层变量查找的机制&#xff1a;当函数执行时&#xff0c;优先查找当前函数作用域中有无需要用到的变量&#xff0c;如果找不到&#xff0c;逐级查找父级&#xff0c;直到全局 > 嵌套关系形成作用域链&#xff0c;同一作用域链从小到大查找…

taro3兼容支付宝/微信小程序的自定义拖拽排序组件

描述&#xff1a;列表可以完成拖拽排序 此组件是根据支付宝原生文档改编成taro-vue3的形式&#xff0c;只保留了拖拽的部分&#xff0c;其他功能都去除了&#xff0c;测试下来可以兼容支付宝和微信小程序。 支付宝原生文档&#xff1a; https://opendocs.alipay.com/support/…

BGP(border gateway protocol)边界网关协议初识篇

BGP它是一种路径矢量协议&#xff0c;用于决定数据包在互联网中的最佳路径。 1、工作原理&#xff1a; 自治系统&#xff08;AS&#xff09;间路由: BGP主要用于连接不同自治系统之间的路由器&#xff0c;其中每个自治系统&#xff08;AS&#xff09;代表一组具有共同路由的网…

编译 fdk-aac

文章目录 关于 fdk-aac编译 fdk-aac在 FFMpeg 编译中启用 关于 fdk-aac A standalone library of the Fraunhofer FDK AAC code from Android. github &#xff1a; https://github.com/mstorsjo/fdk-aac代码托管 &#xff1a; https://sourceforge.net/projects/opencore-am…

最新巨量X-Bogus、_signature参数逆向分析与算法还原

文章目录 1. 写在前面2. 接口分析3. 断点分析4. 扣代码补环境5. 数据解密 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路…

# 从浅入深 学习 SpringCloud 微服务架构(十六)

从浅入深 学习 SpringCloud 微服务架构&#xff08;十六&#xff09; 一、SpringCloudStream&#xff1a;自定义消息通道 1、在子工程 stream_product &#xff08;子模块&#xff09;中,创建 自定义的消息通道类 MyProcessor.java /*** spring_cloud_demo\stream_product…

JavaEE概述 + Maven

文章目录 一、JavaEE 概述二、工具 --- Maven2.1 Maven功能 仓库 坐标2.2 Maven之项目构建2.3 Maven之依赖管理 三、插件 --- Maven Helper 一、JavaEE 概述 Java SE、JavaEE&#xff1a; Java SE&#xff1a;指Java标准版&#xff0c;适用于各行各业&#xff0c;主要是Java…

【负载均衡式在线OJ项目day5】OJ服务模块概要

前言 经过四天的努力已经完成了编译运行这个大模块&#xff0c;今天将要进入OJ服务模块设计&#xff0c;该模块的本质就是建立一个小型网站 一.功能 为用户提供题目列表页面为用户提供网站首页(用题目列表充当首页)为用户提供指定题目的编辑页面为用户提供提交代码判题功能&a…

FFmpeg常用API与示例(二)—— 解封装与转封装

封装层 封装格式(container format)可以看作是编码流(音频流、视频流等)数据的一层外壳&#xff0c;将编码后的数据存储于此封装格式的文件之内。 封装又称容器&#xff0c;容器的称法更为形象&#xff0c;所谓容器&#xff0c;就是存放内容的器具&#xff0c;饮料是内容&…

【QT学习】补充:qt使用已经存在的类

1.右键项目--》添加现有文件 注意&#xff1a;不是添加新文件&#xff01;&#xff01;&#xff01; 2.添加配置

掌握Android Fragment开发之魂:Fragment的深度解析(上)

Fragment是Android开发中用于构建动态和灵活界面的基石。它不仅提升了应用的模块化程度&#xff0c;还增强了用户界面的动态性和交互性&#xff0c;允许开发者将应用界面划分为多个独立、可重用的部分&#xff0c;每个部分都可以独立于其他部分进行操作。本文将从以下几个方面深…

信息系统项目管理师0102:可行性研究的内容(7项目立项管理—7.2项目可行性研究—7.2.1可行性研究的内容)

点击查看专栏目录 文章目录 7.2项目可行性研究7.2.1可行性研究的内容1.技术可行性分析2.经济可行性分析3.社会效益可行性分析4.运行环境可行性分析5.其他方面的可行性分析记忆要点总结7.2项目可行性研究 可行性研究是在项目建议书被批准后,从技术、经济、社会和人员等方面的条…