网页设计结课设计

简单网页设计分为班级主页、班级课程表、班级留言三个模块

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>班级主页</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" />
    <link href="css/all.min.css" rel="stylesheet" />
	<link href="css/templatemo-style.css" rel="stylesheet" />
	<style>
		d{
			width:200px;
			height:200px;
			text-aligh:center;
		}
	</style>
</head>
<!--

Simple House

https://templatemo.com/tm-539-simple-house

-->
<body> 

	<div class="container">
	<!-- Top box -->
		<!-- Logo & Site Name -->
		<div class="placeholder">
			<div class="parallax-window" data-parallax="scroll" data-image-src="img/simple-house-01.jpg">
				<div class="tm-header">
					<div class="row tm-header-inner">
						<div class="col-md-6 col-12">
							<img src="img/simple-house-logo.png" alt="Logo" class="tm-site-logo" /> 
							<div class="tm-site-text-box">
								<h1 class="tm-site-title">物联网181班</h1>
								<h6 class="tm-site-description">我们的青春,从物联网181班起航</h6>	
							</div>
						</div>
						<nav class="col-md-6 col-12 tm-nav">
							<ul class="tm-nav-ul">
								<li class="tm-nav-li"><a href="班级主页.html" class="tm-nav-link active">班级主页</a></li>
								<li class="tm-nav-li"><a href="班级课程表.html" class="tm-nav-link">班级课程表</a></li>
								<li class="tm-nav-li"><a href="班级留言.html" class="tm-nav-link">班级留言</a></li>
							</ul>
						</nav>	
					</div>
				</div>
			</div>
		</div>

		<main>
			<header class="row tm-welcome-section">
				<h2 class="col-12 text-center tm-section-title">关于我们</h2>
			<center>	
			<d>
				
	      <pre >
		   我们一路欢歌,一路笑语,奔向自己的目标;
			 
	       我们手挽着手,肩并着肩,追求真理与光明!
			 
		   这或许是象牙塔的终点,却也是我们人生新的起点。</pre></d>
		
            </header>
			
			<div>
			   <table border="0" width="800">
				 
				<tr>
					<td colspan="4" rowspan="3">
						<img src="img/index_05.gif" width="226" height="115" alt=""></td>
					<td>
						<img src="img/index_06.gif" width="25" height="64" alt=""></td>
					    <td colspan="2"> <a href="index.html"><img src="img/index_07.gif" alt="" width="97" height="64" border="0"></a></td>
					    <td colspan="3"> <a href="wenxue.html"><img src="img/index_08.gif" alt="" width="122" height="64" border="0"></a></td>
					    <td colspan="2"> <a href="xinwen.html"><img src="img/index_09.gif" alt="" width="117" height="64" border="0"></a></td>
					    <td colspan="3"> <a href="xiangce.html"><img src="img/index_10.gif" alt="" width="117" height="64" border="0"></a></td>
					    <td colspan="3"> <a href="book.html"><img src="img/index_11.gif" alt="" width="102" height="64" border="0"></a></td>
					<td colspan="2">
						<img src="img/index_12.gif" width="51" height="64" alt=""></td>
					<td>
						<img src="img/分隔符.gif" width="1" height="64" alt=""></td>
				</tr>
				<tr>
					<td colspan="16">
						<img src="img/index_13.gif" width="631" height="11" alt=""></td>
					<td>
						<img src="img/分隔符.gif" width="1" height="11" alt=""></td>
				</tr>
				<tr>
					<td colspan="12">
						<img src="img/index_14.gif" width="521" height="40" alt=""></td>
					    <td colspan="3"> <a href="gengxin.html"><img src="img/index_15.gif" alt="" width="78" height="40" border="0"></a></td>
					<td>
						<!--<img src="img/index_16.gif" width="32" height="40" alt="">--></td>
					<td>
						<img src="img/分隔符.gif" width="1" height="40" alt=""></td>
				</tr>
				<tr>
					<td colspan="3">
						<img src="img/index_17.gif" width="203" height="37" alt=""></td>
					<td rowspan="6">
						<img src="img/index_18.gif" width="23" height="225" alt=""></td>
					<td colspan="16" rowspan="3">
						<table border="0" width="100%">
							<tr>
								<td width="157" rowspan="8"> </td>
								<td width="316">四六级考试!</td>
								<td>2020.12.12</td>
							</tr>
							<tr>
								<td>“党的十九大五中全会精神”主题团日活动!</td>
								<td>2020.12.16</td>
							</tr>
							<tr>
								<td width="316">青春故事分享会——用故事点燃青春</td>
								<td>2020.12.19</td>
							</tr>
							<tr>
								<td width="316">天气冷了,你按时起床了吗……</td>
								<td>2020.12.20</td>
							</tr>
							<tr>
								<td width="316">这就是“青年榜样人物”——榜样的力量</td>
								<td>2020.12.22</td>
							</tr>
							<tr>
								<td width="316">期末考试要来了,你看我还有机会么……</td>
								<td>2020.12.24</td>
							</tr>
							<tr>
								<td width="316"> </td>
								<td> </td>
							</tr>
							<tr>
								<td width="316"> </td>
								<td> </td>
							</tr>
						</table>
					</td>
					<td>
						<img src="img/分隔符.gif" width="1" height="37" alt=""></td>
				</tr>
				<tr>
					<td colspan="3">
						<img src="img/index_20.gif" width="203" height="19" alt=""></td>
					<td>
						<img src="img/分隔符.gif" width="1" height="19" alt=""></td>
				</tr>
				<tr>
					<td rowspan="6">
						<img src="img/index_21.gif" width="35" height="209" alt=""></td>
					<td>
						<img src="img/p-1.jpg" width="132" height="95" alt=""></td>
					<td rowspan="6">
						<img src="img/index_23.gif" width="36" height="209" alt=""></td>
					<td>
						<img src="img/分隔符.gif" width="1" height="95" alt=""></td>
				</tr>
				<tr>
					<td>
						<img src="img/index_24.gif" width="132" height="18" alt=""></td>
					<td colspan="5" rowspan="2">
						<img src="img/index_25.gif" width="234" height="31" alt=""></td>
					    <td colspan="2" rowspan="2"> <a href="wenxue.html"><img src="img/index_26.gif" alt="" width="71" height="31" border="0"></a></td>
					<td colspan="2" rowspan="2">
						<img src="img/index_27.gif" width="97" height="31" alt=""></td>
					<td colspan="4" rowspan="2">
						<img src="img/index_28.gif" width="131" height="31" alt=""></td>
					    <td colspan="2" rowspan="2"> <a href="jianjie.html"><img src="img/index_29.gif" alt="" width="66" height="31" border="0"></a></td>
					<td rowspan="2">
						<img src="img/index_30.gif" width="32" height="31" alt=""></td>
					<td>
						<img src="img/分隔符.gif" width="1" height="18" alt=""></td>
				</tr>
				<tr>
					<td rowspan="3">
						<img src="img/p-2.jpg" width="132" height="92" alt=""></td>
					<td>
						<img src="img/分隔符.gif" width="1" height="13" alt=""></td>
				</tr>
				<tr>
					<td colspan="2" rowspan="5">
						<img src="img/index_32.gif" width="107" height="120" alt=""></td>
					<td colspan="5" rowspan="5" >
						<table border="0" width="100%" height="117" background="img/index_35.gif">
							<tr>
								<td style="font-size:12px">倾城之恋----张爱玲</td>
							</tr>
							<tr>
								<td style="font-size:12px">母亲----高尔基</td>
							</tr>
							<tr>
								<td style="font-size: 12px">草叶集----惠特曼</td>
							</tr>
							<tr>
								<td style="font-size: 12px">项链----莫泊桑</td>
							</tr>
							<tr>
								<td style="font-size: 12px">悲惨世界----雨果</td>
							</tr>
						</table>
					</td>
					<td colspan="2" rowspan="5">
						<img src="img/index_34.gif" width="97" height="120" alt=""></td>
					<td colspan="6" rowspan="5"  align="center">
						<table border="0" width="100%" height="117" background="img/index_35.gif">
							<tr>
								<td  style="font-size:12px">2018年,我们来到美丽的来宾,</td>
							</tr>
							<tr>
								<td style="font-size:12px">广西科技师范学院,怀着对物联网的热爱!</td>
							</tr>
							<tr>
								<td style="font-size:12px">三年的学习,可能有人后悔学了这专业(秃头)</td>
							</tr>
							<tr>
								<td style="font-size:12px">但有人继续朝着自己的方向在努力奔跑</td>
							</tr>
							<tr>
								<td style="font-size:12px">但最不后悔与大家相遇…</td>
							</tr>
						</table>
					</td>
					<td rowspan="5">
						<img src="img/index_36.gif" width="32" height="120" alt=""></td>
					<td>
						<img src="img/分隔符.gif" width="1" height="43" alt=""></td>
				</tr>
				<tr>
					<td rowspan="2">
						<img src="img/index_37.gif" width="23" height="40" alt=""></td>
					<td>
						<img src="img/分隔符.gif" width="1" height="36" alt=""></td>
				</tr>
				<tr>
					<td>
						<img src="img/index_38.gif" width="132" height="4" alt=""></td>
					<td>
						<img src="img/分隔符.gif" width="1" height="4" alt=""></td>
				</tr>
				<tr>
					    <td colspan="3"> <a href="xiangce.html"><img src="img/index_39.gif" alt="" width="203" height="20" border="0"></a></td>
					<td rowspan="2">
						<img src="img/index_40.gif" width="23" height="37" alt=""></td>
					<td>
						<img src="img/分隔符.gif" width="1" height="20" alt=""></td>
				</tr>
				<tr>
					<td colspan="3">
						<img src="img/index_41.gif" width="203" height="17" alt=""></td>
					<td>
						<img src="img/分隔符.gif" width="1" height="17" alt=""></td>
				</tr>
				</table>
				
				</div>	
			<div class="tm-container-inner tm-featured-image">
				<div class="row">
					<div class="col-12">
						<div class="placeholder-2">
							<div class="parallax-window-2" data-parallax="scroll" data-image-src="img/about-05.jpg"></div>		
						</div>
					</div>
				</div>
			</div>
			
			<div class="tm-container-inner tm-history">
				<div class="row">
					<div class="col-12">
						<div class="tm-history-inner">
							<img src="img/about-06.jpg" alt="Image" class="img-fluid tm-history-img" />
							<div class="tm-history-text"> 
								<h4 class="tm-history-title">物联网181班</h4>
								<p>&nbsp;&nbsp;&nbsp;&nbsp;物联网工程181班于2018年9月成立。成立两年年多以来,全班同学以“团结、和谐、文明、进取”为班级文化,团结一心、锐意进取,在各方面都交出了令人满意的答卷。
								<br>
								&nbsp;&nbsp;&nbsp;&nbsp;  刚入学时,一些爱好体育运动的学生聚在了一起,向着新生杯篮球赛发起了挑战。经过了很长一段时间的刻苦训练,为了心中的执念,他们从不轻言放弃。在其他同学的称赞和勉励中,篮球队员们激发出了百分之两百的斗志赢下了比赛。他们给我们带来了冠军,我们给他们喝彩!
							</div>
						</div>	
					</div>
				</div>
			</div>
			
		</main>
		
          <div id="visiterCount" style="float:left;width:900px ;height:55px;
          	padding:20px 10px 5px 30px;margin:10px 50px;border:1px solid #008000;">
          </div>
          <button style="margin:10px;width:150px;height:55px;font-size:20px;" 
          	onclick="clearVisiterCount()">清除访客量</button>
		
		<footer class="tm-footer text-center">
			<p> 独一无二&copy; 物联网181 
            
            | Design: <a rel="nofollow" href="https://templatemo.com">DT2020.12.19</a></p>
		</footer>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/parallax.min.js"></script>
	<script type="text/javascript">
		window.onload=function()
		{
			if (sessionStorage.visiterCount)
			{			
				sessionStorage.visiterCount=Number(sessionStorage.visiterCount) +1;
			}
			else
			{
				sessionStorage.visiterCount=1;
			}
			document.getElementById("visiterCount").innerHTML=	"当前网站访问量: "
			 + sessionStorage.visiterCount + " 次。";
		}
		function clearVisiterCount()
		{
			sessionStorage.visiterCount=0;
			document.getElementById("visiterCount").innerHTML="当前网站访问量"+
			"<span style='font-size:20px;color:#ff0000'	>已清空</span>。";
		}	
	</script> 
</body>
</html>
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>班级课程表</title>
	<link href="css/table.css" rel="stylesheet" />
	 <link href="css/acc.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet" />    
	<link href="css/templatemo-style.css" rel="stylesheet" />

	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/main.js" type="text/javascript"></script> 
</head>
<!--

Simple House

https://templatemo.com/tm-539-simple-house

-->
<body> 

	<div class="container" style="margin-bottom: 40px;margin-bottom: 80px;">
	<!-- Top box -->
		<!-- Logo & Site Name -->
		<div class="placeholder">
			<div class="parallax-window" data-parallax="scroll" data-image-src="img/simple-house-01.jpg">
				<div class="tm-header">
					<div class="row tm-header-inner">
						<div class="col-md-6 col-12">
							<img src="img/simple-house-logo.png" alt="Logo" class="tm-site-logo" /> 
							<div class="tm-site-text-box">
								<h1 class="tm-site-title">物联网181班</h1>
								<h6 class="tm-site-description">我们的青春,从物联网181班起航</h6>	
							</div>
						</div>
						<nav class="col-md-6 col-12 tm-nav">
							<ul class="tm-nav-ul">
								<li class="tm-nav-li"><a href="班级主页.html" class="tm-nav-link">班级主页</a></li>
								<li class="tm-nav-li"><a href="班级课程表.html" class="tm-nav-link active">班级课程表</a></li>
								
								<li class="tm-nav-li"><a href="班级留言.html" class="tm-nav-link">班级留言</a></li>
							</ul>
						</nav>	
					</div>
				</div>
			</div>
		</div>

		<main>
			<header class="row tm-welcome-section">
				
				<h2 class="col-12 text-center tm-section-title" >欢迎来到物联网181班课程表</h2>
				
				<p class="col-12 text-center"></p>
			</header>
		<div>
			<div>
				<table class="table_title">
				    <tr>
				        <td class="tit">
				            <img src="img/kechengbiao.png" width="850" height="90" />
				        </td>
				    </tr>
				    <tr>
				        <td>
				            <table class="table_data">
				                <tr>
				                    <th colspan="2">时间</th>
				                    <th>星期一</th>
				                    <th>星期二</th>
				                    <th>星期三</th>
				                    <th>星期四</th>
				                    <th>星期五</th>
				                </tr>
				                <tr>
				                    <td rowspan="4" class="tit_left">上<br>午</td>
				                    <td class="tit_left">1</td>
				                    <td>物联网操作系统</td>
				                    <td>Java程序设计</td>
				                    <td>&nbsp;</td>
				                    <td>Java程序设计</td>
				                    <td>&nbsp;</td>
				                </tr>
				                <tr>
				                    <td class="tit_left">2</td>
				                    <td>C语言</td>
				                    <td>&nbsp;</td>
				                    <td>计算机组成原理</td>
				                    <td>STM32</td>
				                    <td>&nbsp;</td>
				                </tr>
				                <tr>
				                    <td class="tit_left">3</td>
				                    <td>FRee RTOS</td>
				                    <td>物联网操作系统</td>
				                    <td>&nbsp;</td>
				                    <td>形式与政策</td>
				                    <td>&nbsp;</td>
				                </tr>
				                <tr>
				                    <td class="tit_left">4</td>
				                    <td>大学英语</td>
				                    <td>&nbsp;</td>
				                    <td>数据结构</td>
				                    <td>&nbsp;</td>
				                    <td>JAVA程序设计</td>
				                </tr>
				                <tr>
				                    <td rowspan="4" class="tit_left">下<br>午</td>
				                    <td class="tit_left">5</td>
				                    <td>计算机组成原理</td>
				                    <td>传感器技术</td>
				                    <td>&nbsp;</td>
				                    <td>物联网操作系统</td>
				                    <td>物联网操作系统</td>
				                </tr>
				                <tr>
				                    <td class="tit_left">6</td>
				                    <td>物联网综合实训</td>
				                    <td>大学英语</td>
				                    <td>&nbsp;</td>
				                    <td>离散数学</td>
				                    <td>&nbsp;</td>
				                </tr>
				                <tr>
				                    <td class="tit_left">7</td>
				                    <td>物联网导论</td>
				                    <td>计算机组成原理</td>
				                    <td>高等数学</td>
				                    <td>&nbsp;</td>
				                    <td>单片机</td>
				                </tr>
				                <tr>
				                    <td class="tit_left">8</td>
				                    <td>数据库</td>
				                    <td>高等数学</td>
				                    <td>物联网操作系统</td>
				                    <td>体育</td>
				                    <td>形势政策</td>
				                </tr>
				            </table>
							<table border="0" width="100%" cellspacing="0">
				<tr>
					<td>
					<marquee scrollamount="10" scrolldelay="100" style="color:#FF0000">公告:本周三的计算机组成原理调到下周星期五晚上,请大家相互转告!</marquee></td>
				</tr>
				</table>
				        
			</div>
		<div>
	
			<div class="col-md-6" style="float:left" >
			<div class="tm-description-box"> 
				<h4 class="tm-gallery-title">物联网工程专业2018级人才培养方案</h4>
				 
				<p class="tm-mb-45">本专业培养适应社会主义现代化建设和未来社会与科技发展需要,德智体全面和谐发展与健康个性相统一,具有创新精神、实践能力,并富有良知和责任感,具备数学与自然科学知识基础,掌握数学与其它相关的自然科学基础知识以及与物联网相关的计算机、通信、电子和自动控制的基本理论、基本知识、基本技能和基本方法,具有较强的专业能力和良好的综合素质,能胜任物联网相关技术的研究以及物联网应用系统规划、分析、设计、开发、部署、运行维护等工作的工程技术人才。 </p>
				<a href="http://www.gxstnu.edu.cn/index.htm" class="tm-btn tm-btn-default tm-right">物联网工程专业介绍</a>
			
			</div>
			<div class="tm-section tm-container-inner">
				<div class="row">
					<div class="col-md-6">
						<figure class="tm-description-figure">
							<img src="img/img-01.jpg" alt="Image" class="img-fluid" />
						</figure>
					</div>
					</div>
				</div>
			</div>
				<div  class="col-md-6" class="row"  style="float:right">
				  <div class="tm-description-box"> 
				  <h4 class="tm-gallery-title">课程介绍</h4>
                    <dl id="acc">
                        <dt class="active">
                            <a href="#">JAVA</a>
                        </dt>
                        <dd class="active" style="display: block;">
                            <p>很难...</p>
                            <a class="more" href="#">More +</a>
                        </dd>
                        <dt class="">
                            <a href="#">软件工程</a>
                        </dt>
                        <dd style="display: none;">
                            <p>很枯燥 ...</p>
                            <a class="more" href="#">More +</a>
                        </dd>
                        <dt>
                            <a href="#">高等数学</a>
                        </dt>
                        <dd>
                            <p>感觉自己没脑子 ...</p>
                            <a class="more" href="#">More +</a>
                        </dd>
                    </dl>
					 <dl id="acc">
					    <dt class="active">
					        <a href="#">C语言</a>
					    </dt>
					    <dd class="active" style="display: block;">
					        <p>都是代码,看不懂...</p>
					        <a class="more" href="#">More +</a>
					    </dd>
					    <dt class="">
					        <a href="#">Linux</a>
					    </dt>
					    <dd style="display: none;">
					        <p>什么玩意...</p>
					        <a class="more" href="#">More +</a>
					    </dd>
					    <dt>
					        <a href="#">STM32</a>
					    </dt>
					    <dd>
					        <p>完全没有逻辑概念...</p>
					        <a class="more" href="#">More +</a>
					    </dd>
					</dl>
					 <dl id="acc">
					    <dt class="active">
					        <a href="#">放假</a>
					    </dt>
					    <dd class="active" style="display: block;">
					        <p>非常开心 ...</p>
					        <a class="more" href="#">More +</a>
					    </dd>
					    <dt class="">
					        <a href="#">放假吧</a>
					    </dt>
					    <dd style="display: none;">
					        <p>当咸鱼很爽 ...</p>
					        <a class="more" href="#">More +</a>
					    </dd>
					    <dt>
					        <a href="#">啦啦啦</a>
					    </dt>
					    <dd>
					        <p>开心 ...</p>
					        <a class="more" href="#">More +</a>
					    </dd>
					</dl>
					
				 </div>
              </div>
			</div>
				
		</main>
		
		
	</div>
		
	 <div style="align:center;  ">
	 		<footer class="tm-footer text-center">
	 			<p> 独一无二&copy; 物联网181 
	 			
	 			| Design: <a rel="nofollow" href="https://templatemo.com">DT2020.12.19</a></p>
	 		</footer>
	 </div>
	
	
	<script src="js/jquery.min.js"></script>
	<script src="js/parallax.min.js"></script>
	<script>
		$(document).ready(function(){
			// Handle click on paging links
			$('.tm-paging-link').click(function(e){
				e.preventDefault();
				
				var page = $(this).text().toLowerCase();
				$('.tm-gallery-page').addClass('hidden');
				$('#tm-gallery-page-' + page).removeClass('hidden');
				$('.tm-paging-link').removeClass('active');
				$(this).addClass("active");
			});
		});
	</script>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>班级留言</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" />
    <link href="css/all.min.css" rel="stylesheet" />
	<link href="css/templatemo-style.css" rel="stylesheet" />
	<link href="css/text.css" rel="stylesheet" />
</head>
<!--

Simple House

https://templatemo.com/tm-539-simple-house

-->
<body> 

	<div class="container">
	<!-- Top box -->
		<!-- Logo & Site Name -->
		<div class="placeholder">
			<div class="parallax-window" data-parallax="scroll" data-image-src="img/simple-house-01.jpg">
				<div class="tm-header">
					<div class="row tm-header-inner">
						<div class="col-md-6 col-12">
							<img src="img/simple-house-logo.png" alt="Logo" class="tm-site-logo" /> 
							<div class="tm-site-text-box">
								<h1 class="tm-site-title">物联网181班</h1>
								<h6 class="tm-site-description">我们的青春,从物联网181班起航</h6>	
							</div>
						</div>
						<nav class="col-md-6 col-12 tm-nav">
							<ul class="tm-nav-ul">
								<li class="tm-nav-li"><a href="班级主页.html" class="tm-nav-link">班级主页</a></li>
								<li class="tm-nav-li"><a href="班级课程表.html" class="tm-nav-link">班级课程表</a></li>
								<li class="tm-nav-li"><a href="班级留言.html" class="tm-nav-link active">班级留言</a></li>
							</ul>
						</nav>	
					</div>
				</div>
			</div>
		</div>

		<main>
			<header class="row tm-welcome-section">
				<h2 class="col-12 text-center tm-section-title">留言板</h2>
				<p class="col-12 text-center">说一下你想说的吧,畅想欲言,愿多年以后我们还能再聚!</a> </p>
			</header>

			<div>
		
			<div class="box" id="pl">
			<span>发表评论:</span>
			<textarea id="plTxt" cols="100" rows="20"></textarea>
			<input type="button" value="评论" id="btn" >
			</div>
			</div>	
            
<!-- How to change your own map point
	1. Go to Google Maps
	2. Click on your location point
	3. Click "Share" and choose "Embed map" tab
	4. Copy only URL and paste it within the src="" field below
-->
		  <div class="row tm-row" align="center">
		    <div class="col-12">
		        <hr class="tm-hr-primary tm-mb-55">
		        <!-- Video player 1422x800 -->
		        <video width="954" height="535" controls class="tm-mb-40">
		            <source src="video/wheat-field.mp4" type="video/mp4">							  
		            Your browser does not support the video tag.
		        </video>
		    </div>
		</div>
	<div>
			<center><h1>联系方式</h1></center>
			<h1> &nbsp  &nbsp  &nbsp  &nbsp </h1>
		<div class="tm-container-inner-2 tm-contact-section">
			<div class="row">
				<div class="col-md-6">
					<form action="" method="POST" class="tm-contact-form">
				        <div class="form-group">
				          <input type="text" name="Name" class="form-control" placeholder="姓名" required="" />
				        </div>
				        
				        <div class="form-group">
				          <input type="email" name="email" class="form-control" placeholder="邮箱" required="" />
				        </div>
			
				        <div class="form-group">
				          <textarea rows="5" name="message" class="form-control" placeholder="内容" required=""></textarea>
				        </div>
				
				        <div class="form-group tm-d-flex">
				          <button type="submit" class="tm-btn tm-btn-success tm-btn-right">
				            发送
				          </button>
				        </div>
					</form>
				</div>
				<div class="col-md-6">
					<div class="tm-address-box">
						<h4 class="tm-info-title tm-text-success">地址</h4>
						<address>
							广西科技师范学院物联网工程181班
						</address>
						<a href="tel:080-090-0110" class="tm-contact-link">
							<i class="fas fa-phone tm-contact-icon"></i>080-090-0110
						</a>
						<a href="mailto:info@company.co" class="tm-contact-link">
							<i class="fas fa-envelope tm-contact-icon"></i> 独一无二&copy; 物联网181 
						</a>
						<div class="tm-contact-social">
							<a href="https://fb.com/templatemo" class="tm-social-link"><i class="fab fa-facebook tm-social-icon"></i></a>
							<a href="#" class="tm-social-link"><i class="fab fa-twitter tm-social-icon"></i></a>
							<a href="#" class="tm-social-link"><i class="fab fa-instagram tm-social-icon"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
		</main>

		<footer class="tm-footer text-center">
			<p> 独一无二&copy; 物联网181 
			
			| Design: <a rel="nofollow" href="https://templatemo.com">DT2020.12.19</a></p>
		</footer>
	</div>
	 <script>
	 window.onload = function(){
	 function $(id){
	 return document.getElementById(id);
	 }
	 var ul=document.createElement('ul'); //创建ul标签
	 $('pl').appendChild(ul); //把ul标签放在div里面
	 $('btn').onclick = function (){
	    var txt = $('plTxt').value; //此时不能用$('plTxt').innerHTML,成对的标签使用innerHTNL,获得里面文字;
	    if(txt.length==0){  //判断输入为空的情况;
	    alert('不能发表为空的评论');
	    }else{
	    var li=document.createElement('li'); //创建li标签
	    ul.appendChild(li);  // li添加为ul的子标签
	    txt = txt+ "<a href='javascript:void(0)'>删除</a>" + "<span class='time'>" + new Date().toLocaleTimeString() + "</span>";
	     li.innerHTML = txt; //将文本赋给li标签中显示
	    var dels =document.getElementsByTagName('a'); //获取所有标签a的id存到数组中
	    for(var j=0; j<dels.length; j++){
	    dels[j].onclick=function(){ //将所有a标签设置点击事件
	            //删除当前评论,就是删除当前“删除”所在超链接的li
	     ul.removeChild(this.parentNode);
	    }
	    }
	    }
	   }
	 }
	</script>
	<script src="js/jquery.min.js"></script>
	<script src="js/parallax.min.js"></script>
	<script>
		$(document).ready(function(){
			var acc = document.getElementsByClassName("accordion");
			var i;
			
			for (i = 0; i < acc.length; i++) {
			  acc[i].addEventListener("click", function() {
			    this.classList.toggle("active");
			    var panel = this.nextElementSibling;
			    if (panel.style.maxHeight) {
			      panel.style.maxHeight = null;
			    } else {
			      panel.style.maxHeight = panel.scrollHeight + "px";
			    }
			  });
			}	
		});
	</script>
</body>
</html>

需要完整代码可以留言哦!

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值