网页设计(六)表格与表格页面布局

news2024/11/28 5:38:27

在这里插入图片描述


一、设计《TF43: 前端的发展与未来》日程表

《TF43: 前端的发展与未来》日程表
在这里插入图片描述
文字素材:
前端是互联网技术的重要一环,自上世纪80年代万维网技术创立以来,Web成就了大量成功的商业公司,也诞生了诸多优秀的技术解决方案。因其标准性和开放性,前端技术社区非常活跃。前端技术虽然起步较晚,但是发展速度非常快。
今天的Web前端在各个公司都是不可或缺的岗位,职能也从纯粹的Web前端,扩展到小程序、与客户端混合编程、IoT等诸多领域,此次TF邀请到各个顶级互联网公司的前端最高负责人,旨在分享前端团队的管理和发展思路。
在这里插入图片描述在这里插入图片描述

<!-- prj_6_1.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>TF43: 前端的发展与未来-日程表 </title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			#div0 {
				width: 720px;
				height: 626px;
				margin: 0 auto;
				position: relative;
			}

			p {
				text-indent: 2em;
			}

			#div2 {
				width: 200px;
				height: 40px;
				background-color: #0000CC;
				color: white;
				position: absolute;
				top: 180px;
				left: -35px;
			}

			h3 {
				font-size: 20px;
				color: white;
				padding: 10px 20px;
				font-family: 微软雅黑;
			}

			table {
				font-size: 12px;
				width: 720px;
				height: 420px;
			}

			.row1 {
				background: #E1E1E1;
				text-align: center;
			}

			#row2 {
				background: #E3E3E3;
			}

			#td1 {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="div0" class="">
			<div id="div1">
				<h2 align="center">TF43: 前端的发展与未来论坛</h2>
				<p>前端是互联网技术的重要一环,自上世纪80年代万维网技术创立以来,Web成就了大量成功的商业公司,也诞生了诸多优秀的技术解决方案。因其标准性和开放性,前端技术社区非常活跃。前端技术虽然起步较晚,但是发展速度非常快。</p>
				<p>今天的Web前端在各个公司都是不可或缺的岗位,职能也从纯粹的Web前端,扩展到小程序、与客户端混合编程、IoT等诸多领域,此次TF邀请到各个顶级互联网公司的前端最高负责人,旨在分享前端团队的管理和发展思路。</p>
			</div>
			<div id="div2" class="">
				<h3>CCF TF 技术前线</h3>
			</div>
			<table align="center" border="1" cellspacing="0px">
				<tr class="row1" height="82px">
					<td colspan="3">
						<div>
							<p> 只为技术专家 </p>
							<p> CCF TF第43期 </p>
							<p> 主题 前端的发展与未来 </p>
							<p> 2021年7月31日 9:00-17:30 </p>
							<p> 中科院计算所 四层报告厅(北京海淀区科学院南路6号) </p>
						</div>
					</td>
				</tr>
				<tr id="row2 " height="35px">
					<th>会议时间</th>
					<th>演讲人</th>
					<th>会议名称</th>
				</tr>
				<tr>
					<td id="td1">09:00-09:10</td>
					<td>张高 CCF TF前端SIG主席</td>
					<td>开场致辞</td>
				</tr>
				<tr>
					<td id="td1">09:10-10:05</td>
					<td>姜凡 淘系技术部前端团队负责人,阿里巴巴经济体前端技术委员会主席</td>
					<td>《淘系前端价值体系的思考》</td>
				</tr>
				<tr>
					<td id="td1">10:05-11:00</td>
					<td>月影 字节跳动技术中台前端团队负责人,ByteTech和掘金社区负责人</td>
					<td>《技术社区与职业成长》</td>
				</tr>
				<tr class="row1">
					<td id="td1">11:05-11:10</td>
					<td colspan="2">Break</td>
				</tr>
				<tr>
					<td id="td1">11:10-12:05</td>
					<td>贺师俊(hax) 开放原子开源基金会TOC成员,Ecma-TC39特邀专家</td>
					<td>《我们如何参与JS语言标准的制定》</td>
				</tr>
				<tr class="row1">
					<td id="td1">12:05-13:30</td>
					<td colspan="2">午餐</td>
				</tr>
				<tr>
					<td id="td1">13:30-14:25</td>
					<td>赵锦江 Shopee新加坡前端委员会负责人</td>
					<td>《从海外视角看前端团队的组织与发展》</td>
				</tr>
				<tr>
					<td id="td1">14:25-15:20</td>
					<td>杨永林 贝壳如视技术中心负责人,如视工程部负责人</td>
					<td>《前端三维技术的应用前景》</td>
				</tr>
				<tr class="row1">
					<td id="td1">15:20-15:30</td>
					<td colspan="2">Break</td>
				</tr>
				<tr>
					<td id="td1">15:30-16:25</td>
					<td>周鹏 软件与体验部 高级前端工程师/小米集团技术委前端技术委员会 委员</td>
					<td>《前端在“手机xAIoT”领域的探索》</td>
				</tr>
				<tr class="row1">
					<td id="td1">16:30-17:30</td>
					<td colspan="2">圆桌论坛</td>
				</tr>
			</table>
		</div>
	</body>
</html>

二、简易电子政务网

在这里插入图片描述
文字素材:

全省教育电子政务工作座谈会在宁召开

为进一步统一思想、提高认识、振奋精神、明确方向,3月14日,全省教育电子政务工作座谈会在宁召开,来自13个省辖市、3个省管县(市、区)教育门户网站维护保障单位负责人参加了会议,各地就教育电子政务工作开展的情况作了交流,对全省教育门户网站绩效考核指标体系、江苏教育网《视频新闻》栏目筹建和通联站建设管理方案进行深入的研讨。

国务院:运用大数据提高政府服务水平

近日,国务院办公厅印发《关于运用大数据加强对市场主体服务和监管的若干意见》(以下简称《意见》)。
《意见》要求,以社会信用体系建设和政府信息公开、数据开放为抓手,充分运用大数据、云计算等现代信息技术,提高政府服务水平,加强事中事后监管,维护市场正常秩序,促进市场公平竞争,释放市场主体活力,进一步优化发展环境。

简易电子政务中心 ©版权所有
地址:太空市南京南路280号 联系电话:99-99999999
苏ICP备:20220116002

简易电子政务网初始首页(未应用样式)
在这里插入图片描述

<!-- prj_6_2.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>简易电子政务网 </title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			table {
				margin: 0 auto;
			}

			#header {
				background: url(pro62/logo.jpg) no-repeat center center;
			}

			h4 {
				color: red;
				padding: 10px auto;
				height: 30px;
			}

			td {
				color: black;
				font-size: 20px;
			}

			tr {
				text-align: center;
			}

			p {
				text-indent: 2em;
				font-size: 18px;
				text-align: left;
			}

			#nav {
				text-align: center;
				width: 100%;
				height: 54px;
			}

			a {
				display: inline-block;
			}

			a:link,
			a:visited,
			a:active {
				text-decoration: none;
				color: white;
				background: #666699;
			}

			#nav td a:hover {
				color: white;
				background: #9999ff;
				font-weight: blod;
				transform: rotate(360deg);
				/* 旋转360度 */
				transition: all 0.3s;
				/* 在所有属性上过度0.3s */
			}

			td table tr td a:hover {
				border-bottom: 5px solid white;
			}

			#left,
			#right {
				margin: 15px 10px;
			}
		</style>
	</head>
	<body>
		<table border="0" width="1002px" cellspacing="0px" cellpadding="0px">
			<tr>
				<td colspan="3" height="219px" id="header"></td>
			</tr>
			<tr height="50px">
				<td colspan=3>
					<table border="0" width="100%" width="100%" bgcolor="#666699" cellspacing="0px" cellpadding="0px">
						<tr id=nav>
							<td><a href="#">新闻资讯</a></td>
							<td><a href="#">领导讲话</a></td>
							<td><a href="#">行政公文</a></td>
							<td><a href="#">成果展示</a></td>
							<td><a href="http://www.edu.cn">中国教育网</a></td>
							<td><a href="#">教育信息网</a></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td height="250px">
					<table width="150px" height="100%" border="0" bgcolor="#666699" cellspacing="0px" cellpadding="0px">
						<tr>
							<td><a href="#">新闻资讯</a></td>
						</tr>
						<tr>
							<td><a href="#">行政公文</a></td>
						</tr>
						<tr>
							<td><a href="#">领导讲话</a></td>
						</tr>
						<tr>
							<td><a href="#">成果展示</a></td>
						</tr>
					</table>
				</td>
				<td width="400px">
					<div id="left">
						<h4>全省教育电子政务工作座谈会在宁召开</h4>
						<p>为进一步统一思想、提高认识、振奋精神、明确方向,3月14日,全省教育电子政务工作座谈会在宁召开,来自13个省辖市、3个省管县(市、区)教育门户网站维护保障单位负责人参加了会议,各地就教育电子政务工作开展的情况作了交流,对全省教育门户网站绩效考核指标体系、江苏教育网《视频新闻》栏目筹建和通联站建设管理方案进行深入的研讨。
						</p>  
					</div>
				</td>
				<td>
					<div id="right">
						<h4>国务院:运用大数据提高政府服务水平</h4>
						<p>近日,国务院办公厅印发《关于运用大数据加强对市场主体服务和监管的若干意见》(以下简称《意见》)。</p>
						<p> 《意见》要求,以社会信用体系建设和政府信息公开、数据开放为抓手,充分运用大数据、云计算等现代信息技术,提高政府服务水平,加强事中事后监管,维护市场正常秩序,促进市场公平竞争,释放市场主体活力,进一步优化发展环境。
						</p>
					</div>   
				</td>
			</tr>
			<tr>
				<td colspan="3" align="center" height="35px">
					<hr color="#c0c0c0">
					简易电子政务中心&nbsp;&copy;版权所有<br>
					地址:太空市南京南路280号 联系电话:99-99999999<br>
					苏ICP备:20220116002<br>
				</td>
			</tr>
		</table>
	</body>
</html>

三、课外拓展训练

1.设计新书推荐页面

(1)页面标题:“新书推荐”。
(2) 书简介内容如下。

数学的世界 I 作者: J.R. 纽曼 编, 王善平, 李璐 译 定价: 59.00元 推荐理由: 呈现在大家面前的是由J.R. 纽曼花费十五年心血, 所精选的迄今为止世界上最天才的数学文献集锦。 高 …

现代教育技术 作者: 傅钢善 定价: 39.80元 推荐理由: 本教材结构新颖,逻辑清晰,图文并茂,内容丰富,易教易学,知行合一。
《生态智慧——生态可持续性》 作者: 伍业钢 定价: 29.00 推荐理由: 传统的经济学认为,经济的投入和产出可以简化为“资本+劳动”的投入等于经济增长,而忽略了对劳动者的人文关怀(以人为本)。

中国工程院院士(11) 作者: 中国工程院、高等教育出版社、中国工程物理研究院 定价: 500.00 推荐理由: 中国工程院院士是国家在工程技术方面设立的最高学术称号,为终身荣誉。为了展现中国工程院院士的风采、宣传科学家积极投身。
在这里插入图片描述

<!-- project_6_1.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>新书推荐</title>
		<style type="text/css">
			img {
				width: 150px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<table border="1px" cellspacing="0px" bordercolor="#f0f0f0">
			<tr>
				<td colspan="4">
					<h4>总编推荐</h4>
				</td>
			</tr>
			<tr>
				<td><img src="kwtz61/image61.jpg"></td>
				<td>
					<h4>数学的世界 I</h4>
					<p>作者: J.R. 纽曼 编, 王善平, 李璐 译 定价: 59.00元 推荐理由: 呈现在大家面前的是由J.R. 纽曼花费十五年心血, 所精选的迄今为止世界上最天才的数学文献集锦。 高 ...</p>
				</td>
				<td><img src="kwtz61/image62.jpg"></td>
				<td>
					<h4>现代教育技术</h4>
					<p> 作者: 傅钢善 定价: 39.80元 推荐理由: 本教材结构新颖,逻辑清晰,图文并茂,内容丰富,易教易学,知行合一。</p>
				</td>
			</tr>
			<tr>
				<td><img src="kwtz61/image63.jpg"></td>
				<td>
					<h4>《生态智慧——生态可持续性》</h4>
					<p> 作者: 伍业钢 定价: 29.00 推荐理由: 传统的经济学认为,经济的投入和产出可以简化为“资本+劳动”的投入等于经济增长,而忽略了对劳动者的人文关怀(以人为本 ...</p>
				</td>
				<td><img src="kwtz61/image64.jpg"></td>
				<td>
					<h4>中国工程院院士(11)</h4>
					<p> 作者: 中国工程院、高等教育出版社、中国工程物理研究院 定价: 500.00 推荐理由: 中国工程院院士是国家在工程技术方面设立的最高学术称号,为终身荣誉。为了展现中国工程院院士的风采、宣传科学家积极投身 ... </p>
				</td>
			</tr>
		</table>
	</body>
</html>

2.采用表格布局设计区域划分页面

在这里插入图片描述

<!-- project_6_2.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>表格布局实训</title>
		<style type="text/css">
			table {
				margin: 0 auto;
			}

			#td1 {
				background: #F1E2D3;
				height: 200px;
			}

			#td2 {
				background: red;
				height: 50px;
				width: 100%;
			}

			#tr3 {
				background: #F1F1F1;
				height: 290px;
			}

			#td4 {
				background: #E1F1F3;
				height: 60px;
			}

			td {
				text-align: center;
				vertical-align: middle;
				font-size: 36px;
			}

			a {
				color: white;
			}

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

			a:hover {
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<table width="1000px" height="600px" border="5px">
			<tr>
				<td id="td1" colspan="4">logo</td>
			</tr>
			<tr>
				<td id="td2" colspan="4">
					<table width="100%" height="100%">
						<tr>
							<td><a href="#">menu1</a></td>
							<td><a href="#">menu2</a></td>
							<td><a href="#">menu3</a></td>
							<td><a href="#">menu4</a></td>
							<td><a href="#">menu5</a></td>
							<td><a href="#">menu6</a></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr id="tr3">
				<td>content1</td>
				<td>content2</td>
				<td>content3</td>
				<td>content4</td>
			</tr>
			<tr>
				<td id="td4" colspan="4">footer</td>
			</tr>
		</table>
	</body>
</html>

作者主页: 正函数的个人主页
文章收录专栏: Web design
在这里插入图片描述

欢迎大家点赞 👍 收藏 ⭐ 加关注哦!
如果你认为这篇文章对你有帮助,请给正函数点个赞吧,如果发现什么问题,欢迎评论区留言!!

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

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

相关文章

SimMIM: a Simple Framework for Masked Image Modeling

论文名称&#xff1a;SimMIM: a Simple Framework for Masked Image Modeling 发表时间&#xff1a;CVPR2022 开源地址&#xff1a; 开源代码 作者及组织&#xff1a;Zhenda Xie, Zheng Zhang, Hu Han等&#xff0c;来自清华&#xff0c;微软亚洲研究院。 前言 本文提出一种新…

2024-01-17复盘和总结

今日复盘 今天是我失业的第一天&#xff0c;心里有点难受&#xff0c;但是没办法&#xff0c;生活需要继续。 1.做了什么&#xff1f; 今天早上9点出发&#xff0c;骑电动车去了闵行区的图书馆&#xff0c;在图书馆里优化了简历&#xff0c;把word版的简历变成了pdf版的简历…

import { ArrowRight } from “@element-plus/icons-vue“;

今天下午快被这个问题折磨疯了 虽然知道这个问题怎么产生的 但项目里那个碍眼的红线就是去不掉 后来才发现 这是插件的锅 我的心情 你知道我想要说什么的 想必能看到这篇文章的 也知道这个问题是怎么产生的 vue3ts使用的时候 默认是需要带上文件名的 但是引入el组件时 …

transbigdata笔记:轨迹切片

1 方法介绍 在transbigdata笔记&#xff1a;轨迹停止点和行程提取-CSDN博客中&#xff0c;已经可以把轨迹点拆分成停止点和行程点&#xff0c;但是行程点只有起止位置&#xff0c;不包含行程轨迹信息为了进一步分析车辆的行驶轨迹&#xff0c;需要从每次行程的时间段中提取轨迹…

Apache Doris (六十四): Flink Doris Connector - (1)-源码编译

🏡 个人主页:IT贫道-CSDN博客 🚩 私聊博主:私聊博主加WX好友,获取更多资料哦~ 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 1. Flink与Doris版本兼容

探索自适应学习在考试培训系统中的优势

近年来&#xff0c;随着互联网的普及和发展&#xff0c;自适应学习作为一种个性化、灵活的学习方式受到越来越多教育工作者的关注。在考试培训系统中引入自适应学习&#xff0c;可以为学生提供更加有效和高效的学习体验。 自适应学习可以根据学生个体的学习特点和水平&#xff…

大文件的断点续传如何实现

断点续传 断点续传是一种数据恢复技术&#xff0c;主要用于在读取或发送数据时&#xff0c;因为网络问题、磁盘问题等原因导致数据传输中断。断点续传技术允许你在已经传输的数据基础上继续传输&#xff0c;从而节省数据传输时间。 断点续传通常用于文件传输过程中&#xff0c;…

Spring Security的使用条件

Spring Security要求使用Java 8或更高版本的运行时环境。 由于Spring Security旨在以自包含的方式运行&#xff0c;因此您无需在Java运行时环境中放置任何特殊的配置文件。特别是&#xff0c;您无需配置特殊的Java认证和授权服务&#xff08;JAAS&#xff09;策略文件&#xf…

OpenHarmony—Docker编译环境

Docker环境介绍 OpenHarmony为开发者提供了两种Docker环境&#xff0c;以帮助开发者快速完成复杂的开发环境准备工作。两种Docker环境及适用场景如下&#xff1a; 独立Docker环境&#xff1a;适用于直接基于Ubuntu、Windows操作系统平台进行版本编译的场景。基于HPM的Docker环…

工业企业能源管理平台,可以帮助企业解决哪些方面的能源问题?

随着全球工业化进程的加快&#xff0c;工业企业在生产经营过程中消耗的能源也越来越庞大。能源成本的上升和环境保护的压力使得工业企业对能源管理的重要性有了深刻的认识。为了提高能源利用效率、降低能源消耗、减少环境污染&#xff0c;工业企业在能源管理方面迫切需要一套规…

ASP.NET Core SingleR:初次体验和简单项目搭建

文章目录 前言应用场景SignalR 网站长什么样&#xff1f;第一个ASP.NET core SignalR程序确定SignalR版本新建MVC项目添加unpkg管理器添加客户端添加ChatHub文件添加SignalR服务添加网页运行测试浏览器Websocket调试type1type6Type为其它时 总结 前言 平常的网页通讯都是基于H…

拷贝 hugging face 仓库到 colab

# 挂在谷歌云硬盘 from google.colab import drive drive.mount(/content/drive) # 转到文件夹 import os os.chdir(/content/drive/MyDrive/) !pwd# 安装并引入包 !pip install gradio bypy huggingface_hub import os import shutil from huggingface_hub import snapshot_do…

PuTTY的ppk密钥与OpenSSH密钥之间的相互转换

几个概念说明&#xff1a;id_rsa、id_rsa.pub、ppk、pem 目前有两个主流的密钥格式&#xff1a;OpenSSH格式的密钥 和 PuTTY格式的密钥。 id_rsa和id_rsa.pub 都是OpenSSH格式的密钥。 id_rsa是OpenSSH格式的SSH私钥。 id_rsa.pub是OpenSSH格式的SSH公钥。ppk文件 ppk文件是P…

【Docker】安装 Nginx 容器并部署前后端分离项目

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Docker实战》。&#x1f3af;&#x1f3af; &…

OpenHarmony 应用开发入门 (一、环境搭建及第一个Hello World)

万事开头难。难在迈出第一步。心无旁骛&#xff0c;万事可破。没有人一开始就能想清楚&#xff0c;只有做起来&#xff0c;目标才会越来越清晰。--马克.扎克伯格 前言 2024年1月16日&#xff0c;华为目前开启已HarmonyOS NEXT开发者预览版Beta招募&#xff0c;报名周期为1月15…

【MATLAB】SVMD_LSTM神经网络时序预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 SVMD-LSTM神经网络时序预测算法是一种结合了单变量经验模态分解&#xff08;Singular Value Decomposition&#xff0c;SVD&#xff09;和长短期记忆神经网络&#xff08;LSTM&#xff09…

Three.js 学习笔记之模型(学习中1.17更新)

文章目录 模型 几何体 材质模型点模型Points - 用于显示点线模型Line | LineLoop | LineSegments网格模型mesh - 三角形 几何体BufferGeometry缓冲类型几何体BufferGeometry - 没有任何形状的空几何体创建几何体的方式BufferAttribute Types定义顶点法线 geometry.attributes…

感觉捡到宝了!这究竟是哪位大神出的神器?

你们在制作简历时&#xff0c;是不是基本只关注两件事&#xff1a;简历模板&#xff0c;还有基本信息的填写。 当你再次坐下来更新你的简历时&#xff0c;可能会发现自己不自觉地选择了那个“看起来最好看的模板”&#xff0c;填写基本信息&#xff0c;却没有深入思考如何使简历…

Java--业务场景:在Spring项目启动时加载Java枚举类到Redis中

文章目录 前言实现项目启动时加载枚举值到Redis1. 定义EnumInterface接口2. 创建EnumDTO3. 创建ClassUtils工具类4. 创建EnumService接口5. 创建EnumServiceImpl6. 修改枚举类7. 创建ApplicationInit 测试结果 前言 新的一年即将来到&#xff0c;回首2023年&#xff0c;也是学…

GEE中Landsat、Sentinel、Modis主要数据集区别

一、Landsat 1. Collection 1/2 的区别 Collection 2 是Landsat Level 1 数据的又一次重大再处理&#xff0c;显著提高了绝对地理定位精度。 Collection1Collection2时间跨度1972~2021底1972~至今数据等级level 1level1&#xff1a;1972~2021底 level2&#xff1a;1982~至今 …