效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模仿csdn头部</title>
</head>
<style>
body{
padding: 0;
margin: 0;
min-width: 1500px;
}
.head{
height: 50px;
width: 100%;
display: flex;
align-items: center;
padding: 0 10px;
}
/* 左模块 *****************************************/
.left_item{
width: 680px;
height: 100%;
float: left;
display: flex;
align-items: center;
font-size: 14px;
}
.logo{
width: 118px;
height: 42px;
background: url(img/1.png) no-repeat center;
background-size: 100% 100%;
padding: auto 24px;
cursor: pointer;
}
.title_item{
height: 100%;
line-height: 50px;
text-decoration: none;
padding: 0 10px;
cursor: pointer;
border:none;
}
.title_item:hover{
background-color: #f5f5f5;
}
.title_item:active{
border-top: 3px solid orangered;
}
/******************************************/
.ma{
width: 100px;
height: 100px;
background: url(img/2.png);
position: absolute;
top: 50px;
left: 10px;
display: none;
}
/* 右模块 ******************************************/
.right_item{
width: 500px;
height: 100%;
display: flex;
align-items: center;
}
.tx{
width: 40px;
height: 40px;
background: url(./img/b4.png) no-repeat center;
background-size: 100% 100%;
margin: 0 10px;
border-radius: 50%;
background-color: #f1f1f1;
cursor: pointer;
}
.title_item2{
height: 100%;
line-height: 50px;
text-decoration: none;
padding: 0 8px;
cursor: pointer;
border:none;
margin: 0 5px;
}
.cz_button{
width: 120px;
height: 80%;
background-color: red;
border: none;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin-left: 20px;
cursor: pointer;
border-radius: 5px;
}
/*******************************************/
/*中间模块******************************************/
.center_item{
width: calc(100% - 500px - 680px - 100px);/*总宽度-左右模块-外边距*/
display: flex;
margin: 0 50px;
height: 40px;
}
.ss_text{
background-color: #ececec;
border: 1px solid #CCCCCC;
width: 100%;
font-size: 14px;
}
.ss_text:focus{
outline:none;
border: 1px solid red;
}
.ss_button{
width: 60px;
height: 40px;
margin: 0;
padding: 0;
cursor: pointer;
background-color: red;
border: none;
color: white;
}
/*******************************************/
</style>
<body>
<div class="head">
<div class="ma" id="ma"></div>
<div class="left_item">
<div class="logo" id="logo"></div>
<div class="title_item">首页</div>
<div class="title_item">博客</div>
<div class="title_item">程序员学院</div>
<div class="title_item">下载</div>
<div class="title_item">论坛</div>
<div class="title_item">回答</div>
<div class="title_item">代码</div>
<div class="title_item">直播</div>
<div class="title_item">能力认证</div>
<div class="title_item">高校</div>
</div>
<div class="center_item">
<input type="text" class="ss_text" placeholder="程序员为什么头发这么少"/>
<input type="button" class="ss_button" value="按钮"/>
</div>
<div class="right_item">
<div class="tx" id="tx"></div>
<div class="title_item2">会员中心</div>
<div class="title_item2">收藏</div>
<div class="title_item2">动态</div>
<div class="title_item2">消息</div>
<div class="cz_button"><div class="icon"></div>创作中心</div>
</div>
</div>
</body>
<script>
window.onload=function(){
let logo = document.getElementById('logo');
let ma = document.getElementById('ma');
let title_item = document.getElementsByClassName('title_item');
logo.onmouseenter=function(){
ma.style.display='block';//鼠标移入二维码显示
}
logo.onmouseleave=function(){
ma.style.display='none';//鼠标移除二维码消失
}
for( let i in title_item){
title_item[i].onmousedown=function(){
for(var j in title_item){console.log(title_item[j].style='')}//遍历title_item取消style样式
title_item[i].style.borderTop="3px solid orangered";//然后让点击的title_item加上上边框
}
}
}
</script>
</html>
需要用到的图片:
1.png:
2.png
b4.png