EduCoder-Web程序设计基础-html5— 简历表页面的制作-第2关：简历表页面的样式设计
目录
- 任务描述
- 相关知识
- 编程要求
- 测试说明
- 代码示例
任务描述
本关任务：美化简历表页面。
相关知识
为了完成本关任务，你需要掌握：1.CSS控制表格样式
CSS控制表格样式
除了表格标签自带的属性外，还可用CSS的边框、宽高、颜色等来控制表格样式。此外，CSS中还提供了表格专用属性，以便控制表格样式。
1
1.CSS控制表格边框
CSS代码如下所示：
table{
width:280px;
height:280px;
border:1px solid #F00; /设置table的边框/
}
td,th{ border:1px solid #F00; } /为单元格单独设置边框/
2.CSS控制表格边距
CSS代码如下所示：
th,td{
border:1px solid #30F; /为单元格单独设置边框/
padding:20px; /为单元格内容与边框设置20px的内边距/
margin:20px; /为单元格与单元格边框之间设置20px的外边距/
}
3.CSS控制单元格宽高
CSS代码如下所示：
td{
width:20px;
Height:20px;
}
编程要求
根据任务描述提示的目标效果，在右侧编辑器补充代码，具体要求如下：
1.设置table的边框为1像素、实线、且颜色为#ccc。
2.设置table的宽度高度分别为600像素和40像素。
3.用两个参数设置外边距：上下为0像素、左右居中。
4.运用border-collapse属性将表格的双边框合并为一个单一边框。
5.设置table中字体大小为14像素。
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
代码示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简历表</title>
<!-- ********* Begin ********* -->
<style type="text/css">
table{border: 1px solid #ccc ; /*设置table的边框*/width:600px;height:40px;margin: 0 auto;border-collapse: collapse;font-size: 14px;}
td{width:80px;border:1px solid #ccc;}
.one{background:#eee;}
.two{text-align:center;font-size:20px;font-weight:bold;}
</style>
<!-- ********* End ********* -->
</head>
<body>
<table><tr><td colspan=5 class="one two">简历表</td></tr><tr><td class="one">姓名</td><td></td><td class="one">民族</td><td></td><td rowspan=5>照片</td></tr><tr><td class="one">籍贯</td><td></td><td class="one">身高</td><td></td></tr><tr><td class="one">婚姻状况</td><td></td><td class="one">电子邮件</td><td></td></tr><tr><td class="one">联系电话</td><td></td><td class="one">QQ号码</td><td></td></tr><tr><td class="one">出生年月</td><td></td><td class="one">国籍</td><td></td></tr><tr ><td class="one">目前所在地</td><td colspan=4></td></tr>
</table>
</body>
</html>
EduCoder-Web程序设计基础-html5— 简历表页面的制作-第2关：简历表页面的样式设计相关推荐
- EduCoder-Web程序设计基础-html5—二维码名片制作-(第1关：二维码名片页面的结构设计)(第2关：二维码名片页面的样式设计)
目录 第1关:二维码名片页面的结构设计 代码示例 第2关:二维码名片页面的样式设计 代码示例 第1关:二维码名片页面的结构设计 任务描述 本关任务:设置一个二维码名片页面的主体结构. 相关知识 为了完 ...
- Educoder -- Web程序设计基础2021秋 --实训作业全总结
博主会持续更新的呦! web程序设计基础R实验报告 2021年 1.Web前端开发概述 edu–Web程序设计基础2021秋–[Web前端开发概述][HTML5基础] 2. HTML5 基础 [web ...
- Educoder -- Web程序设计基础2021秋--简历表页面的制作
文章目录 第1关: 简历表页面的结构设计 1. 编程要求 2. 代码展示 第2关: 简历表页面的样式设计 1. 编程要求 2. 代码展示 第1关: 简历表页面的结构设计 1. 编程要求 根据任务描述的 ...
- educoder web程序设计基础知识点 期末总结
网页表格 基本概念 为了完成本关任务,你需要掌握:1.表格的结构,2.表格的基本标签,3.表格标签的基本属性. 表格的结构 在基本表格结构中,表格标题.项目表头和数据资料构成了表格基本结构三个要素. ...
- Web程序设计基础2021 表格标签—表格高级样式的设置 educoder实训
第1关:表格高级样式设置相关概念 任务描述 本关任务:完成一组表格高级样式设置的概念题. 相关知识 为了完成本关任务,你需要掌握:1.外边框线样式的设置,2.内部边框线的设置,3.单元格的合并. 外边 ...
- web程序设计基础R实验报告 2021年 ---太原理工大学
每个实验中给出的练习代码不在此处进行运行,有问题的小可爱欢迎和博主交流呀! Educoder – Web程序设计基础2021秋 --实训作业全总结 文章目录 实验一: HTML基础 1. 实验内容 2 ...
- edu--Web程序设计基础2021秋--【结构元素】【交互元素】【页面结点元素】【文本层次语义元素】【分组元素】
Educoder – Web程序设计基础2021秋 --实训作业全总结 web程序设计基础R实验报告 2021年 -太原理工大学 文章目录 一. 结构元素 第1关:文档结构元素相关概念 第2关:hea ...
- Web程序设计基础期末大作业——模仿QQ飞车手游S联赛官网编写的网页
QQ飞车手游是我非常喜欢的游戏,也是我现在为数不多的常在玩的游戏,刚好我Web程序设计基础的大作业是要做一套网站,我就借此机会模仿飞车S联赛官网的页面自己做了一个网页,又加了一些自己的元素,由于我做这 ...
- 《Java Web程序设计基础教程》简介
本书是关于Java Web开发的基础教程,共分15章.第1章介绍如何构建Java Web应用:第2.3章介绍如何解决Java Web应用的输入和输出问题:第4-6章对登录功能进行了3次重构,这也是Ja ...
- web程序设计基础——edu实训平台选择判断复习（1）
目录 Web前端开发概述 HTML5基础 页面元素和属性 构建web表单 音频和视频 CSS3语法 JavaScript概述 JavaScript语言基础 Web前端开发概述 Web前端开发相关的概念 ...
最新文章
- 利用外部命令Oralce数据库导入导出
- 【组队学习】【32期】统计学习方法习题实战
- C#关于精确年龄的算法（精确到天）
- 怎么在自己的网站上显示其它网站_自己做网站要怎么选域名？
- 95-240-050-原理-State-RocksDBStateBackend
- 2003退休去世领了2年退休金没回本就死了能退吗？
- 排序算法-----冒泡排序和选择排序
- 计算机视觉中的数学方法——7. 2 酉空间与酉矩阵
- 手机网页底部广告代码，悬浮底部广告，带关闭开关，复制文字，按钮
- 财会法规与职业道德【10】
- ArcBlock 参加美国华盛顿州 Blockchain Unconference
- mysql视图唯一id_Mysql的视图、存储过程、函数、索引全解析
- 如何修改PDF文件，怎样将PDF文件拆分
- (CVE-2014-0160) OpenSSL 心脏滴血漏洞
- P4643 [国家集训队]阿狸和桃子的游戏
- 号码归属地及运营商查询工具
- 硬件测试的思考和改进：有道词典笔的高效测试探索
- CSS 字体粗细 font-weight属性
- 介绍一下PR工具中的blockage
- windows查看tomcat版本信息