模仿csdn博客头部的代码

最新推荐文章于 2023-02-13 08:57:17 发布

hello big_bear

最新推荐文章于 2023-02-13 08:57:17 发布

阅读量1.2k

点赞数 2

分类专栏： html基础文章标签： js css html 前端

本文链接：https://blog.csdn.net/big_beer/article/details/116226221

版权

html基础专栏收录该内容

15 篇文章 3 订阅

订阅专栏

效果图：

在这里插入图片描述

代码：

<!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

hello big_bear

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
模仿csdn博客头部的代码

效果图：代码：<!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:
复制链接

扫一扫