实验三
实验内容
制作内蒙古大学电子信息工程学院主页
实验过程
制作内蒙古大学电子信息工程学院主页
源代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子信息工程学院</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" align="center" class="table_1">
<tr>
<td colspan="2" height="150px" ><img src="photo\logo.jpg" width="100%" height="100%"></td>
</tr>
<tr>
<td colspan="2" width="100%" >
<table border="1" width="100%" class="menu">
<tr>
<td class="menu_td">首  页</td>
<td class="menu_td">学院介绍</td>
<td class="menu_td">人才培养</td>
<td class="menu_td">师资队伍</td>
<td class="menu_td">科学研究</td>
<td class="menu_td">党团建设</td>
<td class="menu_td">学生工作</td>
<td class="menu_td">招生就业</td>
<td class="menu_td">校友之家</td>
<td class="menu_td">意见反馈</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="table0"width="100%">
<tr>
<td>
<table border="1" width="90%" align="center" class="table_2">
<tr>
<td width="50%" height="400px" align="center"><img src="photo\work.jpg" width="85%" height="85%" ></td>
<td class="table_new">
<table align="center">
<tr class="table_new_th"><td height="100%"><b>学院新闻</b><br><SPAN class="mores">更多>></SPAN></td></tr>
<tr>
<td align="center" class="table_new_th_td1"><b>【学院动态】电子信息工程学院开展“铸牢中华民族共同体意...</b></td>
</tr>
<tr>
<td class="table_new_th_td2">2020年10月8日下午3：00，卓越楼0617会议室，电子信息工程学院开展“铸牢中华民族共同体意识”主题党日活动，学院党委书记李宏宇主持本次活动，全体在职教工党员、本科生及...</td>
</tr>
<tr>
<td class="table_new_th_td3">
<ul>
<li class="table_new_th_td3_li">【学院动态】电子信息工程学院开展“铸牢中华民族共同体意...<br><SPAN style="float:right">2020-10-18</SPAN></li>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<li class="table_new_th_td3_li">【学院动态】电子信息工程学院开展“铸牢中华民族共同体意...<br><SPAN style="float:right">2020-10-18</SPAN></li>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<li class="table_new_th_td3_li">【学院动态】电子信息工程学院理论学习中心组开展2020年第...<br><SPAN style="float:right">2020-10-18</SPAN></li>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<li class="table_new_th_td3_li">【学院动态】共建民族同心圆——电子信息工程学院开展铸牢...<br><SPAN style="float:right">2020-10-15</SPAN></li>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<li class="table_new_th_td3_li">【学院动态】电子信息工程学院开展2020级新生入党知识教育<br><SPAN style="float:right">2020-10-15</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
</ul>
</td>
</tr>
</table>
</td>
</tr>
<tr >
<td colspan="2" width="100%" >
<table border="1" width="100%">
<td width="33%" class="h2">
<table width="100%">
<tr >
<td class="talbeh2"><b>重要公告</b><br><SPAN class="mores">更多>></SPAN></td>
</tr>
<tr>
<td>
<UL>
<LI class="talbe_li">2020年硕士研究生复试公告五<br><SPAN class="times">2020-05-19</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">2020年硕士研究生一志愿拟录取结果公示<br><SPAN class="times">2020-05-19</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">2020年硕士研究生复试公告四<br><SPAN class="times">2020-05-12</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">2020年硕士研究生复试公告三<br><SPAN class="times">2020-05-08</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">2020年硕士研究生复试公告二<br><SPAN class="times">2020-04-30</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">2020年硕士研究生复试公告一<br><SPAN class="times">2020-04-17</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
</UL>
</td>
</tr>
</table>
</td>
<td width="33%" class="h2">
<table width="100%">
<tr >
<td class="talbeh2"><b>教学工作</b><br><SPAN class="mores">更多>></SPAN></td>
</tr>
<tr>
<td>
<UL>
<LI class="talbe_li">内蒙古大学电子信息工程学院硕士研究生期末...<br><SPAN class="times">2016-12-06</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">电子信息工程学院成功举办大学生创新项目申...<br><SPAN class="times">2016-03-18</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">电子信息工程学院关于2016年春季学期 教学工...<br><SPAN class="times">2016-01-06</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">电子信息工程学院关于2015年秋季学期 期末教...<br><SPAN class="times">2016-01-06</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
</UL>
</td>
</tr>
</table>
</td>
<td width="33%" class="h2">
<table width="100%">
<tr >
<td class="talbeh2"><b>学生动态</b><br><SPAN class="mores">更多>></SPAN></td>
</tr>
<tr>
<td>
<UL>
<LI class="talbe_li">内蒙古大学第四届“璀璨群星耀内大”优秀大...<br><SPAN class="times">2019-04-25</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">内蒙古大学第四届“璀璨群星耀内大”优秀大...<br><SPAN class="times">2019-04-25</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">内蒙古大学第四届“璀璨群星耀内大”优秀大...<br><SPAN class="times">2019-04-25</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">达人风采|王大虎：脚踏实地，仰望星空<br><SPAN class="times">2018-12-04</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">达人风采|吴羽纶：敬学无圹<br><SPAN class="times"">2018-12-04</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">达人风采|张思嘉：努力，让自己在面对机会时...<br><SPAN class="times">2018-12-04</SPAN></LI>
<hr style="border:1px dashed #d6d6d6;height: 0.5px ">
</UL>
</td>
</tr>
</table>
</td>
</table>
</td>
</tr>
<tr>
<td colspan="2" width="100%" >
<table width="100%" class="table_2_2">
<td width="43%" class="h2">
<table border="1" width="100%">
<tr >
<td class="talbeh2"><b>不忘初心牢记使命主题教育</b><br><SPAN class="mores">更多>></SPAN></td>
</tr>
<tr>
<td height="300px" valign="top">
<UL>
<LI class="talbe_li">【学院动态】自治区巡回指导组参加电子信息...<br><SPAN class="times">2019-12-09</SPAN></LI>
<br><hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">【学院动态】电子信息工程学院本科生第一、...<br><SPAN class="times">2019-12-08</SPAN></LI>
<br><hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">【学院动态】电子信息工程学院研究生党支部...<br><SPAN class="times">2019-12-08</SPAN></LI>
<br><hr style="border:1px dashed #d6d6d6;height: 0.5px ">
</UL>
</td>
</tr>
</table>
</td>
<td width="43%" class="h2">
<table border="1" width="100%">
<tr >
<td class="talbeh2"><b>习近平新时代中国特色社会主义思想</b><br><SPAN class="mores">更多>></SPAN></td>
</tr>
<tr>
<td height="300px" valign="top">
<UL>
<LI class="talbe_li">《中国共产党纪律处分条例》<br><SPAN class="times">2019-12-09</SPAN></LI>
<br><hr style="border:1px dashed #d6d6d6;height: 0.5px ">
<LI class="talbe_li">【学院动态】习研会电子信息工程学院分会开...<br><SPAN class="times">2019-12-08</SPAN></LI>
<br><hr style="border:1px dashed #d6d6d6;height: 0.5px ">
</UL>
</td>
</tr>
</table>
</td>
<td width="13%">
<table width="100%">
<tr>
<td width="auto" >
<img src="photo/download.jpg" height="100px">
</td>
<td width="auto" >
<img src="photo/system.jpg" height="100px">
</td>
</tr>
<tr>
<td width="auto" >
<img src="photo/system2.jpg" height="100px">
</td>
<td width="auto" >
<img src="photo/system3.jpg" height="100px">
</td>
</tr>
</table>
</td>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="bottom_nav" align="center">
<div>
首页 | 学院介绍 | 人才培养 | 师资队伍 | 科学研究 | 党团建设 | 学生工作 | 招生就业 | 校友之家 | 意见反馈 | 网站地图 | 设为首页 | 加入收藏
</div>
<div>
<p>Copyright©2015电子信息工程学院 All rights reserved. 蒙ICP16002391号-1 网站建设 国风网络 电话：0471-4992912 地址：内蒙古呼和浩特市大学西街235号内蒙古大学校本部</p>
<p>电子信息工程学院</p>
</div>
<div class="gjz_box">友情链接：内蒙国风</div>
</div>
</body>
</html>css.css
.table_1{background-color: #0355B8;}
.menu{
background-color: #0355B8;
text-align: center;
}
.table_new{
vertical-align: top;
border: 50px;
}
.table_new_th{
text-indent: 2em;
background-color: darkorange;
vertical-align: middle;
text-align: left;
color: white;
font-size: 22px;
}
.table_new_th:hover{color: yellow}
.table_new_th_td1{height:66px;}
.table_new_th_td2{
text-indent: 2em;
font-size: 14px;
height:66px;
}
.table_new_th_td3_li{height:33px;}
.table_new_th_td3_li:hover{color: orange}
.talbe_li{height: 33px;}
.talbe_li:hover{color: orange}
.times{
float: right;
color: #d6d6d6;
font-size: 12px;
}
.talbeh2{
text-indent: 2em;
background-image: url("photo/botton.jpg");
vertical-align: middle;
text-align: left;
color: white;
height: 100%;
font-size: 20px;
}
.talbeh2:hover{color: yellow}
.h2{vertical-align: top;}
.mores{
float: right;
color: #d6d6d6;
font-size: 12px;
}
.table0{background-color: lightblue;}
.bottom_nav{background-image: url("photo/botton.jpg");}
.menu_td:hover{background-color: orange;}
实验展示
点击查看完整网页