学校官网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,ol{
list-style: none;
}
.container{
width: 100%;
height: 20%;
display: flex;
align-items: center;
padding: 0 20px;
border-bottom: 3px solid #00b894;
min-height: 120px;
justify-content: space-between;
}
.mingcheng{
width: 40%;
height: 100%;
display: flex;
align-items: center;
}
.mingcheng img{
width: 100%;
height: auto;
max-height: 100px;
}
.xiaoxun{
width: 30%;
height: 100%;
display: flex;
align-items: center;
margin-left: 20px;
}
.xiaoxun img{
width: 100%;
height: auto;
max-height: 80px;
}
.sousuokuang{
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px; /* 链接和搜索框的间距 */
}
/* 顶部链接栏：智慧校园、院长信箱、网站地图 */
.link-bar{
display: flex;
align-items: center;
gap: 20px;
}
.link-bar .link-item{
display: flex;
align-items: center;
gap: 5px;
text-decoration: none;
}
.link-bar .link-item img{
width: 16px;
height: 16px;
}
.link-bar .link-item a{
color: #999;
font-size: 12px;
text-decoration: none;
}
/* 搜索框样式 */
.search-bar{
display: flex;
align-items: center;
width: 100%;
}
.search-input{
flex: 1;
height: 32px;
padding: 0 10px;
border: 1px solid #ddd;
outline: none;
font-size: 12px;
border-right: none;
}
.search-btn{
width: 32px;
height: 32px;
background-color: #9acd32;
border: none;
outline: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.search-btn img{
width: 18px;
height: 18px;
}
.dropdown{
width: 100%;
height: 50px;
/* border: 1px solid black; */
background-color: rgb(63,179,165);
}
.dropdown > li{
width: 125px;
height: 50px;
/* border: 1px solid black; */
float: left;
line-height: 50px;
text-align: center;
position: relative;
}
.dropdown > li > a{
color: white;
font-size: 14px;
text-decoration-line: none;
}
ol{
background-color: white;
display: none;
position: absolute;
top: 50px;
left: 0;
width: 100%;
z-index: 999;
}
.dropdown > li:hover >ol{
display: block;
}
.dropdown > li:hover > ol > li > a{
color: rgb(160,160,160);
font-size: 14px;
/* text-decoration-line: none; */
}
ol > li:hover > a{
color: orange !important;
}
ol > li:hover{
background-color: white;
}
.tupian{
width: 100%;
height: 500px;
margin-top: -50px;
}
.xuexiao{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.xuexiao img{
width: 80%;
height: auto;
max-height: 500px;
align-self: flex-start;
margin-top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="mingcheng">
<img src="./img/1.png">
</div>
<div class="xiaoxun">
<img src="./img/2.png">
</div>
<div class="sousuokuang">
<div class="link-bar">
<div class="link-item">
<img src="./img/电脑.svg" alt="智慧校园图标">
<a href="#">智慧校园</a>
</div>
<div class="link-item">
<img src="./img/信.svg" alt="院长信箱图标">
<a href="#">院长信箱</a>
</div>
<div class="link-item">
<img src="./img/地图.svg" alt="网站地图图标">
<a href="#">网站地图</a>
</div>
</div>
<div class="search-bar">
<input type="text" class="search-input" placeholder="请输入搜索内容...">
<button class="search-btn">
<img src="./img/搜索框.svg" alt="搜索图标">
</button>
</div>
</div>
</div>
<ul class="dropdown">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">走进创新</a>
<ol>
<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>
</ol>
</li>
<li>
<a href="#">党团建设</a>
<ol>
<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>
</ol>
</li>
<li>
<a href="#">学院专业</a>
<ol>
<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>
</ol>
</li>
<li>
<a href="#">教学科研</a>
<ol>
<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>
</ol>
</li>
<li>
<a href="#">人才培养</a>
<ol>
<li><a href="#">竞赛获奖</a></li>
<li><a href="#">就业明星</a></li>
<li><a href="#">对外交流</a></li>
<li><a href="#">创新创业</a></li>
</ol>
</li>
<li>
<a href="#">招生就业</a>
<ol>
<li><a href="#">招生网</a></li>
<li><a href="#">就业网</a></li>
</ol>
</li>
<li>
<a href="#">公共服务</a>
<ol>
<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>
</ol>
</li>
<li>
<a href="#">国际项目</a>
<ol>
<li><a href="#">海外读研</a></li>
<li><a href="#">2+2双学位</a></li>
<li><a href="#">交换生</a></li>
</ol>
</li>
<li>
<a href="#">信息公开</a>
</li>
</ul>
<div class="tupian">
<div class="xuexiao">
<img src="./img/3.png">
</div>
</div>
</body>
</html>完成页面如下：
