<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解决方案</title>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="files/jquery.min.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
</head>
<body>
<include src="head.html"></include>
</body>
</html>
head.html
<style>
.nav{
display: flex;
align-items: center;
padding-bottom: 2rem;
padding-top: 2rem;
}
.nav>.nav1{
width: 40%;
display: flex;
justify-content: center;
}
.nav>.nav2{
display: flex;
}
.nav>.nav2>div{
margin-left: 6rem;
cursor: pointer;
padding: .2rem;
padding-left: .7rem;
padding-right: .7rem;
border-bottom: solid white 5px;
}
.nav>.nav2>div:hover{
color: white;
background: black;
border-bottom: solid #dcdedd 5px;
}
</style>
<div class="nav">
<div class="nav1">
<img src="files/logo.png" />
</div>
<div class="nav2">
<div οnclick="window.location.href='./jieJueFangAn.html'">解决方案</div>
<div οnclick="window.location.href='./jieJueFangAn.html'">案例展示</div>
<div οnclick="window.location.href='./jieJueFangAn.html'">新闻动态</div>
<div οnclick="window.location.href='./jieJueFangAn.html'">关于我们</div>
</div>
</div>
main.js
$(document).ready(function(){
$("include").load($("include").attr("src"));
});