版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013589137/article/details/80658400
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>hy</title>
<style>
*{
margin: 0;
padding: 0;
font-family: serif;
font-size: 12px;
}
#head{
height: 107px;
background-image: url("img/topBg.gif");
}
#content{
width: 1018px;
height: 100%;
margin: 0 auto;
}
#logo{
width:317px;
height: 100%;
background-image: url("img/logo.jpg");
float:left;
}
#containter{
width: 701px;
height: 100%;
float: left;
}
#search{
height: 72px;
/*background-color: red;*/
}
#nav{
height: 35px;
/*background-color: blue;*/
}
#search img{
float: right;
margin-top: 22px;
margin-right: 20px;
}
#search img:first-child{
margin-right: 0;
}
#nav li{
list-style: none;
float: left;
width: 87px;
text-align: center;
line-height: 35px;
color: white;
font-size: 16px;
}
#nav li:hover{
background-color: #032F54;
}
#news{
width: 1018px;
height: 411px;
/*background-color: red;*/
margin: 0 auto;
}
#area1,#area2,#area3,#area4,#area5,#area6{
float: left;
border: 1px solid darkgray;
}
#area1,#area2,#area3{
margin-bottom: 6px;
}
#area1{
width: 394px;
height: 263px;
}
#area2{
width: 300px;
height: 263px;
margin-left: 5px;
}
#area3{
width: 302px;
height: 263px;
margin-left: 5px;
}
#area4{
width: 394px;
height: 137px;
}
#area5{
width: 300px;
height: 137px;
margin-left: 5px;
}
#area6{
width: 302px;
height: 137px;
margin-left: 5px;
}
#body{
background-color: #eeeeee;
}
.area1Title{
background-color: #dadada;
}
.title1,.title2{
height: 30px;
width: 81px;
float: left;
background-color: #254B6C;
color: white;
text-align: center;
line-height: 30px;
}
.area1Title .title2{
background-color: #8C1616;
}
#area1List{
width: 394px;
height: 233px;
margin-top: 30px;
background-color: white;
}
#area3List{
width: 302px;
height: 233px;
margin-top: 30px;
background-color: white;
}
.area1Title span{
float: right;
line-height: 30px;
margin-right: 10px;
}
#area1List li,#area3List li{
list-style: none;
padding-left: 25px;
height: 32px;
line-height: 32px;
background: url("img/icon1.gif") no-repeat 12px,13px;
/*background-repeat: no-repeat;*/
/*background-position: 12px,13px;*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#img {
width: 280px;
height: 200px;
border: 0;
margin: 20px auto 0 auto;
padding: 0;
/*background-image: url("img/27101349tkbt.jpg");*/
/*background-size: 100% 100%;*/
overflow: hidden;
}
#img img{
cursor: pointer;
transition: all 1.5s;
}
#img img:hover{
transform: scale(1.2);
}
#dec{
width: 280px;
height: 25px;
background-color: #aeaeae;
margin: 5px auto 0 auto;
/*margin-top: 5px;*/
text-align: center;
line-height: 25px;
color: white;
}
#nav5{
height: 127px;
}
#nav5 li{
list-style: none;
float: left;
}
#img1{
width: 139px;
height: 98px;
/*background-color: red;*/
/*margin: 0 auto;*/
margin-top: 6px;
margin-left: 6px;
background-image: url("img/ddh.jpg");
background-size: 100% 100%;
}
#img2{
width: 139px;
height: 98px;
/*background-color: red;*/
/*margin: 0 auto;*/
margin-top: 6px;
margin-left: 6px;
background-image: url("img/spxw.jpg");
background-size: 100% 100%;
}
#dec1,#dec2{
width: 139px;
height: 25px;
background-color: #aeaeae;
/*margin: 0 auto;*/
margin-top: 3px;
margin-left: 6px;
text-align: center;
line-height: 25px;
color: white;
}
#area4 li{
list-style: none;
float: left;
width: 85px;
height: 35px;
margin-top: 8px;
margin-left: 11px;
background-color: #dadada;
line-height: 35px;
text-align: center;
}
#foot{
background-color: #032F54;
height: 150px;
padding-top: 18px;
}
#footcontant{
width: 1018px;
height: 100%;
margin: 0 auto;
}
#add{
width: 500px;
height: 100%;
margin: 0 auto;
color: white;
font-size: 12px;
}
#english{
width: 300px;
height: 100px;
float: left;
color: white;
}
#english p{
}
#add p{
text-align: center;
}
#department{
width: 80px;
height: 80px;
margin: 10px auto 0 auto;
/*margin-top: 10px;*/
background-image: url("img/blue.png");
background-size: 100%,100%;
}
#area6 li{
list-style: none;
width: 260px;
height: 35px;
line-height: 45px;
margin-left: 15px;
margin-top: 10px;
max-font-size: 25px;
}
@keyframes banner {
25%{
background-image: url("img/jdt0.jpg");
}
50%{
background-image: url("img/jdt1.jpg");
}
75%{
background-image: url("img/3.jpg");
}
}
#banner{
height: 390px;
/*background-color: #eeeeee;*/
background: url("img/jdt0.jpg") center no-repeat #eeeeee;
/*background-position: center;*/
/*background-repeat: no-repeat;*/
animation: banner 10s infinite;
/*background-size: 100% 100%;*/
}
#area1List li:hover{
color: royalblue;
text-decoration: underline;
text-decoration-color: black;
}
#nav ul li ul{
width:0;
overflow: hidden;
transition: all 0.5s;
background-color: #032F54;
}
#nav ul li:hover ul{
width: 200%;
}
#nav ul li ul>li:hover{
background-color: #8C1616;
}
#info{
width: 100%;
height: 411px;
float: inherit;
position: relative;
bottom: 20px;
}
em{
width: 38px;
float: right;
padding-right: 5px;
padding-left: 5px;
}
#add img{
position: relative;
top: 5px;
}
</style>
</head>
<body>
<div id="head">
<div id="content">
<div id="logo"></div>
<div id="containter">
<div id="search">
<img src="img/w1.gif" alt=""/>
<img src="img/w3.gif" alt=""/>
</div>
<div id="nav">
<ul>
<li>烟大新闻</li>
<li>学校概况
<ul>
<li>学校简介</li>
<li>学校简介</li>
<li>学校简介</li>
<li>学校简介</li>
<li>学校简介</li>
<li>学校简介</li>
</ul>
</li>
<li>学院设置</li>
<li>人才培养
<ul>
<li>本科生教育</li>
<li>研究生教育</li>
<li>留学生教育</li>
<li>继续教育</li>
</ul>
</li>
<li>科学研究
<ul>
<li>社科处</li>
<li>研究生处</li>
<li>服务地方</li>
<li>烟大学报</li>
</ul>
</li>
<li>学生工作
<ul>
<li>学生工作处</li>
<li>校团委</li>
<li>学业规划网</li>
<li>助学在线</li>
<li>心理咨询网</li>
<li>烟大美育网</li>
</ul>
</li>
<li>招生就业
<ul>
<li>本科生招生</li>
<li>研究生招生</li>
<li>留学生招生</li>
<li>继续教育招</li>
<li>就业信息网</li>
<li>出国留学</li>
</ul>
</li>
<li>公共服务</li>
</ul>
</div>
</div>
</div>
</div>
<div id="body">
<div id="banner"></div>
<div id="info">
<div id="news">
<!-- 394*263-->
<div id="area1">
<div class="area1Title">
<div class="title1">学校要闻</div>
<div class="title2">学院简介</div>
<span>More</span>
</div>
<div id="area1List">
<ul>
<li>
我校入选首批国家级示范性虚拟仿真实验教学项目民盟烟台大学基层委员会换届工作圆满完成
</li>
<li>民盟烟台大学基层委员会换届工作圆满完成</li>
<li>烟台市关工委副主任于旭华来校调研</li>
<li>学校召开党委中心组学习会议</li>
<li>学校举办第四届“互联网+”大学生创新创业大赛</li>
<li>省纪委来校进行执纪监督工作专题调研</li>
<li>烟台大学2018年研究生招生录取圆满结束</li>
</ul>
</div>
</div>
<!-- 300*263-->
<div id="area2">
<div id="img">
<img src="img/27101349tkbt.jpg" width="280px" height="200px"/>
</div>
<div id="dec">yantaidaxuegongzuo</div>
</div>
<!-- 302*263-->
<div id="area3">
<div class="area1Title">
<div class="title1">通知公告</div>
<div class="title2">学术动态</div>
<span>More</span>
</div>
<div id="area3List">
<ul>
<li>烟台大学关于2018年高等教育自学考试本科毕业生学士学位申报的通知</li>
<li>我校三门共享课上线东西部高校课程共享联盟</li>
<li>关于启用新纳税人识别号码的通知</li>
<li>2018年烟台大学单位预算公开</li>
<li>《烟台大学学报》关于出版2018年增刊的通知</li>
<li>关于“尚德机构冒用烟台大学名义举办自学考试”的违规办学通告</li>
<li>烟台大学2016-2017学年本科教学质量报告</li>
</ul>
</div>
</div>
<!-- 394*137-->
<div id="area4">
<ul>
<li>办公系统</li>
<li>教学校园</li>
<li>人才招聘</li>
<li>招标信息</li>
<li>网上评教</li>
<li>网上选课</li>
<li>网络教学</li>
<li>网上民声</li>
<li>数字图书</li>
<li>服务地方</li>
<li>校友网</li>
<li>信息公开</li>
</ul>
</div>
<!-- 300*137-->
<div id="area5">
<div id="nav5">
<ul>
<li>
<div id="img1"></div>
<div id="dec1">huiuuyu</div>
</li>
<li>
<div id="img2"></div>
<div id="dec2">guycix</div>
</li>
</ul>
</div>
</div>
<!-- 302*137-->
<div id="area6">
<ul>
<li>
用户名：<input type="text" name="用户名："/>
</li>
<li>
密码 ：<input type="text" name="密码："/>
</li>
<li>
系统 ：
<select name="系统">
<option value="综合用户">综合用户</option>
<option value="教师邮箱">教师邮箱</option>
</select>
<input type="button" value="登陆">
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="foot">
<div id="footcontant">
<div id="english">
<p>网站地图 English</p>
</div>
<div id="add">
<p>校址：中国山东省烟台市莱山区清泉路30号 邮编：264005 管理员信箱</p>
<p>鲁ICP备05002387号-3
<img src="img/ba.png"/>
鲁公网安备 37061302000289号</p>
<div id="department"></div>
</div>
</div>
</div>
</body>
</html>