[Web front-end basics] Experiment 8 table and table page layout

Project 1 Design the schedule of "Webinar Seminar"

Page renderings:

Page rendering

Require:

Form information:

meeting time Conference Name speaker
October 14, 2015 09:30 - 17:00 Study on Dioxin Release Inventory in China Researcher Liu Wenbin (Center for Ecological Research, Chinese Academy of Sciences)
October 14, 2015 09:30 - 17:00 Application of Optimized PAHs and Dioxin Analyzer in Environmental Analysis Kong Ye (Agilent)
October 14, 2015 09:30 - 17:00 Research progress of LCMS in the analysis of persistent organic pollutants Zhu Huai'en (SCIEX)
October 14, 2015 09:30 - 17:00 Analysis Method of Persistent Organic Pollutants by Mass Spectrometry Chen Ling (Shimadzu)
October 14, 2015 09:30 - 17:00 Pretreatment Technology of Persistent Organic Pollutants POPs Commentary by Su Li (Lebtech)
October 14, 2015 09:30 - 17:00 Advances in Research on Polar Persistent Organic Pollutants Researcher Zhang Qinghua (Center for Ecological Research, Chinese Academy of Sciences)

HTML code:

<!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>

Project 2 Design a simplified version of "Jiangsu Education E-government Network"

Page renderings:

Page rendering

Require:

Paragraph content of the page:
*The 2014 Provincial Educational E-Government Work Symposium was held in Nanjing
In order to further unify thinking, raise awareness, inspire spirits, and clarify directions, on March 14, the Provincial Educational E-Government Work Symposium was held in Nanjing, Persons in charge of the maintenance and guarantee units of education portal websites from 13 provincial cities and 3 province-administered counties (cities, districts) attended the meeting. All localities exchanged views on the development of education e-government work, and evaluated the performance of the province's education portal websites. In-depth discussion on the indicator system, the preparation of the "Video News" column of Jiangsu Education Network, and the construction management plan of the communication station.
State Council: Using Big Data to Improve Government Service Level
Recently, the General Office of the State Council issued "Several Opinions on Using Big Data to Strengthen Service and Supervision of Market Subjects" (hereinafter referred to as "Opinions").
The "Opinions" require that the establishment of a social credit system and the disclosure of government information and data opening should be taken as the starting point, and modern information technologies such as big data and cloud computing should be fully utilized to improve government service levels, strengthen interim and ex-post supervision, maintain normal market order, and promote Fair competition in the market releases the vitality of market players and further optimizes the development environment.

Contents of the copyright section:

Jiangsu Provincial E-government Center All Rights Reserved
Address: No. 15, Beijing West Road, Nanjing Tel: 025-63335653
Su ICP: 10205850*

HTML code:

<!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>

Project Three New Book Recommendations

Page renderings:

Page rendering

Require:

Text material:
The World of Mathematics I Author: JR Newman, translated by Wang Shanping and Li Lu Price: 59.00 yuan A collection of mathematical literature of the most genius. High...
Modern Educational Technology Author: Fu Gangshan Price: RMB 39.80 Reasons for recommendation: This textbook is novel in structure, clear in logic, rich in illustrations and texts, rich in content, easy to teach and easy to learn, and combines knowledge and action.
"Ecological Wisdom—Ecological Sustainability" Author: Wu Yegang Pricing: 29.00 Reasons for recommendation: Traditional economics believes that economic input and output can be simplified as "capital + labor" input equals economic growth, while ignoring the need for labor Humanistic care for readers (people-oriented).
Academician of the Chinese Academy of Engineering (11) Author: Chinese Academy of Engineering, Higher Education Press, China Academy of Engineering Physics Price: 500.00 Reasons for recommendation: Academician of the Chinese Academy of Engineering is the highest academic title established by the country in engineering technology, and it is a lifelong honor. In order to show the demeanor of the academicians of the Chinese Academy of Engineering and promote the active participation of scientists

HTML code:

<!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>

Guess you like

Origin blog.csdn.net/Lailalalala/article/details/126072518