【Web前端基础】实验8 表格与表格页面布局

项目1 设计《网络主题研讨会》日程表

页面效果图:

页面效果图

要求:

表格资料:

会议时间 会议名称 演讲人
2015年10月14日09:30 - 17:00 中国二恶英排放清单研究 刘文彬 研究员(中国科学院生态研究中心)
2015年10月14日09:30 - 17:00 优化的PAHs和Dioxin分析仪在环境分析中的应用 孔晔(安捷伦)
2015年10月14日09:30 - 17:00 LCMS在持久性有机污染物分析中的研究进展 朱怀恩(SCIEX)
2015年10月14日09:30 - 17:00 质谱技术在持久性有机污染物的分析方法 陈志凌(岛津)
2015年10月14日09:30 - 17:00 持久性有机污染物POPs的前处理技术 苏丽评(莱伯泰科)
2015年10月14日09:30 - 17:00 极地持久性有机污染物研究进展 张庆华 研究员(中国科学院生态研究中心)

HTML代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>网络主题研讨会日程表</title>
        <style type="text/css">
        *{
      
      
            font-size: 13px;
        }
        #div0{
      
      
            background: #eaeaea url(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: #fbfbfb;
        }
        #td2{
      
      
            background: #f0f0f0;
        }
       
        th{
      
      
            color:#666666
        }
        a{
      
      
            background: url(images61-4.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="#ffffff" width="700px" height="420px" cellpadding="0px">
                <tr style="line-height: 40px;" id="row1">
                <td colspan="3">
                    <font color=red>会议平台不支持WinXP系统,请大家使用Win7或Win8系统,IE或火狐浏览器登陆</font><br><strong>报告主题:“持久性有机污染物分析技术”网络主题研讨会”<a href="#">精彩回放</a></strong></br>
                </td></tr>
                <tr id="row2" style="line-height: 35px;">
                <th>会议时间</th>
                <th>会议名称</th>
                <th>演讲人</th>
                </tr>
                <tr id="td1" style="line-height: 35px;">
                    <td rowspan="6" align="center">2015年10月14日<br>09:30-17:00</td>
                    <td>中国二恶英排放清单研究</td>
                    <td align="center">刘文彬 研究员 (中国科学院生态研究中心)</td>
                </tr>
                <tr id="td2" style="line-height: 35px;">
                  
                    <td>优化的PAHs和Dioxin分析仪在环境分析中的应用</td>
                    <td align="center">孔晔(安捷伦)</td>
                </tr> <tr id="td1" style="line-height: 35px;">
                    <td>LCMS在持久性有污染物分析中的研究进展</td>
                    <td align="center">朱怀恩(SCIEX)</td>
                </tr>
                <tr id="td2" style="line-height: 35px;">
                    <td>质谱技术在持久性有机污染物的分析方法</td>
                    <td align="center">陈志凌(岛津)</td>
                </tr>
                <tr id="td1" style="line-height: 35px;">
                    <td>持久性有污染物POPs的前护处理技术</td>
                    <td align="center">苏丽评(莱伯泰科)</td>
                </tr>
                <tr id="td2" style="line-height: 35px;">
                    <td>极地持久性有污染物研究</td>
                    <td align="center">张庆华 研究员 (中国科学院生态研究中心)</td>
                </tr>
            </table>
        </div>

    </body>
</html>

项目2 设计简化版“江苏教育电子政务网”

页面效果图:

页面效果图

要求:

页面的段落内容:
*2014年全省教育电子政务工作座谈会在宁召开
为进一步统一思想、提高认识、振奋精神、明确方向,3月14日,全省教育电子政务工作座谈会在宁召开,来自13个省辖市、3个省管县(市、区)教育门户网站维护保障单位负责人参加了会议,各地就教育电子政务工作开展的情况作了交流,对全省教育门户网站绩效考核指标体系、江苏教育网《视频新闻》栏目筹建和通联站建设管理方案进行深入的研讨。
国务院:运用大数据提高政府服务水平
近日,国务院办公厅印发《关于运用大数据加强对市场主体服务和监管的若干意见》(以下简称《意见》)。
《意见》要求,以社会信用体系建设和政府信息公开、数据开放为抓手,充分运用大数据、云计算等现代信息技术,提高政府服务水平,加强事中事后监管,维护市场正常秩序,促进市场公平竞争,释放市场主体活力,进一步优化发展环境。

版权部分的内容:

江苏省电子政务中心  版权所有
地址:南京市北京西路15号 联系电话:025-63335653
苏ICP备:10205850*

HTML代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>教育电子政务网-简化版</title>
        <style type="text/css">
        *{
      
      
            font-size: 18px;
            font-family: 宋体;
            margin: 0 auto;
            padding: 0;
        }
        #nav{
      
      
            text-align: center;
            width: 170px;
            height: 40px;
            margin: 0 auto;
            padding: 5px 20px;
            background-color: rgb(100, 78, 121);
        }
        #nav a:link,
        a:visited,
        a:hover,
        a:active{
      
      
           text-decoration: none;
           color: #ffffff;
        }

        h4{
      
      
            
            height: 30px;
            color: red;
                  
        }

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

        #td{
      
      
           color:black;
           font-size: 20px;
        }
        #tr{
      
      
            text-align: center;
        }
        
        </style>
    </head>
    <body>
        <table border="0" align="center" width="800px" bgcolor="#ffffff">
            <tr>
                <td colspan="3"><img src="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="100px" 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 align="center">2014年全省教育电子政务工作座谈会在宁召开</h4>
					<p>&nbsp;&nbsp;为进一步统一思想、提高认识、振奋精神、明确方向,3月14日,全省教育电子政务工作座谈会在宁召开,来自13个省辖市、3个省管县(市、区)教育门户网站维护保障单位负责人参加了会议,各地就教育电子政务工作开展的情况作了交流,对全省教育门户网站绩效考核指标体系、江苏教育网《视频新闻》栏目筹建和通联站建设管理方案进行深入的研讨。</p>
				</td>
				<td>
					<h4 align="center">国务院:运用大数据提高政府服务水平</h4>
					<p>&nbsp;&nbsp;近日,国务院办公厅印发《关于运用大数据加强对市场主体服务和监管的若干意见》(以下简称《意见》)。<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>

项目三 新书推荐

页面效果图:

页面效果图

要求:

书本文字材料:
数学的世界 I 作者: J.R. 纽曼 编, 王善平, 李璐 译 定价: 59.00元 推荐理由: 呈现在大家面前的是由J.R. 纽曼花费十五年心血, 所精选的迄今为止世界上最天才的数学文献集锦。 高 …
现代教育技术 作者: 傅钢善 定价: 39.80元 推荐理由: 本教材结构新颖,逻辑清晰,图文并茂,内容丰富,易教易学,知行合一。
《生态智慧——生态可持续性》 作者: 伍业钢 定价: 29.00 推荐理由: 传统的经济学认为,经济的投入和产出可以简化为“资本+劳动”的投入等于经济增长,而忽略了对劳动者的人文关怀(以人为本)。
中国工程院院士(11)作者: 中国工程院、高等教育出版社、中国工程物理研究院 定价: 500.00 推荐理由: 中国工程院院士是国家在工程技术方面设立的最高学术称号,为终身荣誉。为了展现中国工程院院士的风采、宣传科学家积极投身

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="image61.jpg"></td>
                <td><p><h4>数学的世界 I</h4>作者: J.R. 纽曼 编, 王善平, 李璐 译 定价: 59.00元 推荐理由: 呈现在大家面前的是由J.R. 纽曼花费十五年心血, 所精选的迄今为止世界上最天才的数学文献集锦。 高 ...</p></td>
                <td><img src="image62.jpg"></td>
                <td><p><h4>现代教育技术</h4>作者: 傅钢善 定价: 39.80元 推荐理由: 本教材结构新颖,逻辑清晰,图文并茂,内容丰富,易教易学,知行合一。</p></td>
            </tr>

            <tr>
                <td><img src="image63.jpg"></td>
                <td><p><h4>《生态智慧——生态可持续性》</h4>作者: 伍业钢 定价: 29.00 推荐理由: 传统的经济学认为,经济的投入和产出可以简化为“资本+劳动”的投入等于经济增长,而忽略了对劳动者的人文关怀(以人为本)。</p></td>
                <td><img src="image64.jpg"></td>
                <td><p><h4>中国工程院院士(11)</h4>作者: 中国工程院、高等教育出版社、中国工程物理研究院 定价: 500.00 推荐理由: 中国工程院院士是国家在工程技术方面设立的最高学术称号,为终身荣誉。为了展现中国工程院院士的风采、宣传科学家积极投身。</p></td>
            </tr>
            
        </table>

    </body>

</html>

猜你喜欢

转载自blog.csdn.net/Lailalalala/article/details/126072518