Web前端开发技术实验与实践（第3版）储久良编著实训6

实训6 表格与表格页面布局项目18 设计网络主题研讨会日程表项目19设计简化版江苏教育电子政务网站

韩飞扬婉

20217人浏览 · 2020-11-22 14:39:00

韩飞扬婉 · 2020-11-22 14:39:00 发布

实训6 表格与表格页面布局

项目18 设计网络主题研讨会日程表
页面效果截图
在这里插入图片描述

代码

<!--prj_6_1.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网络主题研讨会日程表</title>
		<style type="text/css">
			* {
				font-size: 13px;
			}

			#div0 {
				background: #eaeaea url(../img/images61-4.png) no-repeat 0px 0px;
				width: 720px;
				height: 500px;
				margin: 0 auto;
			}

			#div1 {
				width: 710px;
				height: 60px;
			}

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

			#row1 {
				background: #e1e1e1;
			}

			#row2 {
				background: #e3e3e3;
			}

			#td1 {
				background: #f0f0f0;
			}

			#td2 {
				background: #fbfbfb;
			}

			#red {
				color: red;
			}

			th {
				color: #666666;
			}

			a {
				background: url(../img/images61-3.png) repeat-x;
				width: 120px;
				height: 30px;
				text-align: center;
				padding: 5px auto;
				float: right;
				display: inline;
			}
		</style>
	</head>
	<body>
		<div id="div0">
			<div id="div1">
				<h3>报告内容</h3>
			</div>
			<table align="center" border="1" bordercolor="#cacaca" width="710px" height="420px" cellpadding="0px">
				<tr style="line-height: 40px;" id="row1">
					<td colspan="3">
						<div id="red">
							会议平台不支持Windows XP系统，请大家使用Windows 7或Windows 8系统，IE或火狐浏览器登录<br><strong>报告主题：“持久性有机污染物分析技术”网络主题研讨会<a href="#">精彩回放</a></strong>
						</div>
					</td>
				</tr>
				<tr id="row2" style="line-height: 35px;">
					<th>会议时间</th>
					<th>会议名称</th>
					<th>演讲人</th>
				</tr>
				<tr id="td2" style="line-height: 35px;">
					<td rowspan="6">2015年10月14日<br>09:30-17:00</td>
					<td>中国二恶英排放清单研究</td>
					<td>刘文彬 研究员（中国科学院生态研究中心）</td>
				</tr>
				<tr id="td1">
					<td>优化的PAHs和Dioxin分析仪在环境分析中的应用</td>
					<td>孔晔（安捷伦）</td>
				</tr>
				<tr id="td2">
					<td>LCMS在持久性有机污染物分析中的研究进展</td>
					<td>朱怀恩（SCIEX）</td>
				</tr>
				<tr id="td1">
					<td>质谱技术在持久性有机污染物的分析方法</td>
					<td>陈志凌（岛津）</td>
				</tr>
				<tr id="td2">
					<td>持久性有机污染物POPs的前处理技术</td>
					<td>苏丽评（莱伯泰科）</td>
				</tr>
				<tr id="td1">
					<td>极地持久性有机污染物研究进展</td>
					<td>张庆华 研究员（中国科学院生态研究中心）</td>
				</tr>
			</table>
		</div>
	</body>
</html>

项目19 设计简化版江苏教育电子政务网站
页面效果截图
在这里插入图片描述

代码

<!--prj_6_2.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>江苏电子政务网-简化版</title>
		<style type="text/css">
			* {
				font-size: 18px;
				font-family: 宋体;
				margin: 0 auto;
				padding: 0;
			}

			h4 {
				color: red;
				padding: 15px 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: 170px;
				height: 40px;
				margin: 0 auto;
				padding: 5px 20px;
				background-color: blue;
			}

			#nav a:link,
			a:visited,
			a:hover,
			a:active {
				text-decoration: none;
				color: #ffffff;
			}

			a:link,
			a:visited,
			a:hover,
			a:active {
				text-decoration: none;
				color: black;
			}
		</style>
	</head>
	<body>
		<table border="0" align="center" width="1020px" bgcolor="#ffffff">
			<tr>
				<td colspan="3"><img src="../img/dzzw_banner_01.jpg" width="1020px"></td>
			</tr>
			<tr>
				<td colspan="3">
					<table border="0" frame="void" rules="none">
						<tr>
							<td id="nav"><a href="http://dzzw.jsjyt.edu.cn/col/col7421/index.html">新闻资讯</a></td>
							<td id="nav"><a href="http://dzzw.jsjyt.edu.cn/col/col7662/index.html">领导讲话</a></td>
							<td id="nav"><a href="http://dzzw.jsjyt.edu.cn/col/col7426/index.html">成果展示</a></td>
							<td id="nav"><a href="http://www.jsjyt.gov.cn">行政公文</a></td>
							<td id="nav"><a href="http://dzzw.jsjyt.edu.cn/col/col7431/index.html">江苏教育网</a></td>
							<td id="nav"><a href="http://www.jse.gov.cn">江苏教育信息网</a></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table border="1" frame="void" rules="none" width="200px" height="250px">
						<tr>
							<td><a href="http://dzzw.jsjyt.edu.cn/col/col7421/index.html">新闻资讯</a></td>
						</tr>
						<tr>
							<td><a href="http://www.jsjyt.gov.cn">行政公文</a></td>
						</tr>
						<tr>
							<td><a href="http://dzzw.jsjyt.edu.cn/col/col7662/index.html">领导讲话</a></td>
						</tr>
						<tr>
							<td><a href="http://dzzw.jsjyt.edu.cn/col/col7426/index.html">成果展示</a></td>
						</tr>
					</table>
				</td>
				<td>
					<h4>2014年全省教育电子政务工作座谈会在宁召开</h4>
					<p>为进一步统一思想、提高认识、振奋精神、明确方向，3月14日，全省教育电子政务工作座谈会在宁召开，来自13个省辖市、3个省管县（市、区）教育门户网站维护保障单位负责人参加了会议，各地就教育电子政务工作开展的情况作了交流，对全省教育门户网站绩效考核指标体系、江苏教育网《视频新闻》栏目筹建和通联站建设管理方案进行深入的研讨。</p>
				</td>
				<td>
					<h4>国务院：运用大数据提高政府服务水平</h4>
					<p>近日，国务院办公厅印发《关于运用大数据加强对市场主体服务和监管的若干意见》(以下简称《意见》)。<br>《意见》要求，以社会信用体系建设和政府信息公开、数据开放为抓手，充分运用大数据、云计算等现代信息技术，提高政府服务水平，加强事中事后监管，维护市场正常秩序，促进市场公平竞争，释放市场主体活力，进一步优化发展环境。</p>
				</td>
			</tr>
			<tr>
				<td colspan="3" height="35px" align="center">
					<hr>
					江苏省电子政务中心&nbsp;&nbsp;版权所有<br />
					地址：南京市北京西路15号 联系电话：025-63335653<br />
					苏ICP备：10205850<br />
				</td>
			</tr>
		</table>
	</body>
</html>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport