愿天堂没有导航栏
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Educoder</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="step4/verify.js"></script>
</head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.container {
min-width: 1200px;
}
.flex {
display: flex;
}
.full-height {
height: 100%;
}
header {
background: #24292D;
height: 60px;
justify-content: space-between;
padding: 0 25px;
}
header > div {
height: 100%;
display: flex;
align-items: center;
}
.logo-block {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
width: 40px;
height: 38px;
margin-right: 30px;
}
.menu-item {
color: #ffffff;
font-size: 16px;
width: 64px;
height: 100%;
display: flex;
align-items: center;
margin-right: 30px;
position: relative;
cursor: pointer;
}
.hot {
position: absolute;
top: 10px;
right: -22px;
}
.icon-item {
height: 100%;
width: 48px;
display: flex;
align-items: center;
cursor: pointer;
justify-content: center;
}
.user {
width: 34px;
height: 34px;
margin-left: 15px;
cursor: pointer;
}
/*********** Begin ************/
.active{
color: #459be5;
}
.active:after{
content: '';
position: absolute;
height: 2px;
bottom: -10px;
left: 0;
width: 14px;
background-color: #459be5;
}
/*********** End ************/
</style>
<body>
<div class="container">
<header class="flex">
<div class="left-wrap">
<div class="logo-block">
<img src="https://data.educoder.net/images/educoder/headNavLogo.png?1526520218" class="logo">
</div>
<div class="menu-block full-height flex">
<div class="menu-item"><span class="active">实践课程</span></div>
<div class="menu-item"><span>翻转课堂</span></div>
<div class="menu-item"><span>实训项目</span></div>
<div class="menu-item"><span>在线竞赛<img class="hot"
src="https://img-blog.csdnimg.cn/2022010614485797198.png"></span>
</div>
<div class="menu-item"><span>教学案例</span></div>
<div class="menu-item"><span>交流问答</span></div>
</div>
</div>
<div class="right-wrap">
<div class="icon-list full-height flex">
<div class="icon-item"><img src="https://data.educoder.net/api/attachments/411192" alt=""></div>
<div class="icon-item"><img src="https://data.educoder.net/api/attachments/411193" alt=""></div>
<div class="icon-item"><img src="https://data.educoder.net/api/attachments/411194" alt=""></div>
</div>
<img class="user" src="https://data.educoder.net/images/avatars/User/b?t=1569204859650" alt="">
</div>
</header>
</div>
</body>
</html>