本科大四实训任务1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>青岛科技大学2021年公开招聘拟聘用人员公示名单（第四批）-青岛科技大学</title>
<style>
* {
margin: 0;
}
a {
color: white;
font-size: 15px;
text-decoration: none;
display: block;
}
.nav{
background-color: rgba(30, 41, 125,0.85);
width: 100%;
box-sizing: border-box;
}
.container{
height: 500px;
box-sizing: border-box;
}
.topnav ul{
list-style: none;
display: inline-block;
box-sizing: border-box;
overflow: hidden;
line-height: 50px;
}
.topnav li{
float: left;
padding: 0 30px;
}
.bottomnavFatherul{
list-style: none;
overflow: hidden;
box-sizing: border-box;
line-height: 50px;
padding-left: 200px;
}
.bottomnavSon ul{
position: absolute;
margin-left: -15px;
list-style: none;
padding-left: 0;
width: 95px;
}
.bottomnavFatherli{
float: left;
padding: 0 15px;
}
.bottomnavSon li{
line-height: 40px;
text-align: center;
background-color: dodgerblue;
}
.bottomnav li:hover{
background-color: orange;
}
.bottomnavSon{
display: none;
}
.bottomnavFatherli:hover .bottomnavSon{
display: block;
}
.containerLeft{
width: 68.5%;
height: 1000px;
float: left;
border: 1px solid black;
color: r;
font-size: 25px;
padding-top: 30px;
padding-left: 30px;
}
.containerRight{
width: 28.68%;
height: 1000px;
float: right;
border: 1px solid black;
box-sizing: border-box;
}
.containerRight div{
width: 100%;
height: 25%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="nav">
<div class="topnav">
<img src="logo.png" alt="">
<ul>
<li><a href="#">旧版回顾</a></li>
<li><a href="#">教工</a></li>
<li><a href="#">学生</a></li>
<li><a href="#">考生</a></li>
<li><a href="#">校友</a></li>
<li><a href="#">智慧青科大</a></li>
<li><a href="#">ENGLISH</a></li>
</ul>
</div>
<div class="bottomnav">
<ul class="bottomnavFatherul">
<li class="bottomnavFatherli">
<a href="#">学校概况</a>
<div class="bottomnavSon">
<ul>
<li><a href="#">学校简介</a></li>
<li><a href="#">学校章程</a></li>
<li><a href="#">历史沿革</a></li>
<li><a href="#">现任领导</a></li>
<li><a href="#">历任领导</a></li>
<li><a href="#">校园美景</a></li>
<li><a href="#">科大地图</a></li>
</ul>
</div>
</li>
<li class="bottomnavFatherli"><a href="#">组织架构</a></li>
<li class="bottomnavFatherli"><a href="#">学院设置</a></li>
<li class="bottomnavFatherli">
<a href="#">师资队伍</a>
<div class="bottomnavSon">
<ul>
<li><a href="#">师资介绍</a></li>
<li><a href="#">杰出人才</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
</div>
</li>
<li class="bottomnavFatherli">
<a href="#">教育教学</a>
<div class="bottomnavSon">
<ul>
<li><a href="#">重点学科</a></li>
<li><a href="#">本专科教育</a></li>
<li><a href="#">研究生教育</a></li>
<li><a href="#">留学生教育</a></li>
<li><a href="#">继续教育</a></li>
</ul>
</div>
</li>
<li class="bottomnavFatherli">
<a href="#">科学研究</a>
<div class="bottomnavSon">
<ul>
<li><a href="#">科研管理</a></li>
<li><a href="#">科研团队</a></li>
<li><a href="#">科研平台</a></li>
<li><a href="#">科研成果</a></li>
<li><a href="#">科研服务</a></li>
<li><a href="#">学术期刊</a></li>
<li><a href="#">协同创新中心</a></li>
<li><a href="#">博士后流动站</a></li>
<li><a href="#">国家大学科技园</a></li>
</ul>
</div>
</li>
<li class="bottomnavFatherli">
<a href="#">学团工作</a>
<div class="bottomnavSon">
<ul>
<li><a href="#">研究生教育管理</a></li>
<li><a href="#">本科生教育管理</a></li>
<li><a href="#">学工管理系统</a></li>
<li><a href="#">学生资助</a></li>
<li><a href="#">心理中心</a></li>
<li><a href="#">公寓中心</a></li>
<li><a href="#">国防教育</a></li>
<li><a href="#">勤工助学</a></li>
<li><a href="#">科大青年</a></li>
<li><a href="#">学生会</a></li>
<li><a href="#">社团联合会</a></li>
</ul>
</div>
</li>
<li class="bottomnavFatherli">
<a href="#">招生就业</a>
<div class="bottomnavSon">
<ul>
<li><a href="#">本科生招生</a></li>
<li><a href="#">研究生招生</a></li>
<li><a href="#">继续教育招生</a></li>
<li><a href="#">留学生招生</a></li>
<li><a href="#">就业指导</a></li>
<li><a href="#">创新创业教育</a></li>
</ul>
</div>
</li>
<li class="bottomnavFatherli">
<a href="#">合作交流</a>
<div class="bottomnavSon">
<ul>
<li><a href="#">国际交流</a></li>
<li><a href="#">留学科大</a></li>
<li><a href="#">出国留学培训</a></li>
</ul>
</div>
</li>
<li class="bottomnavFatherli">
<a href="#">校园文化</a>
<div class="bottomnavSon">
<ul>
<li><a href="#">UIS</a></li>
<li><a href="#">校史在线</a></li>
<li><a href="#">网络e刊</a></li>
<li><a href="#">平安校园</a></li>
</ul>
</div>
</li>
<li class="bottomnavFatherli">
<a href="#">新闻资讯</a>
<div class="bottomnavSon">
<ul>
<li><a href="#">青科大官方微信</a></li>
<li><a href="#">青科大官方微博</a></li>
<li><a href="#">青科大官方抖音</a></li>
<li><a href="#">青岛科技大学报</a></li>
<li><a href="#">学习强国</a></li>
<li><a href="#">青科大官方b站</a></li>
<li><a href="#">青科大官方视频号</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="containerLeft">
<p>通知公告</p >
<hr/>
</div>
<div class="containerRight">
<div class="rightOne">科大要闻</div>
<div class="rightTwo">综合新闻</div>
<div class="rightThree">学术聚焦</div>
<div class="rightFour"></div>
</div>
</div>
</body>
</html>
运行效果：
距考研还有：105天
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
