仿写哔哩哔哩的头部导航部分（HTML+CSS静态）

2023-12-28 04:01| 来源: 网络整理| 查看: 265

介绍

先来看看哔哩哔哩的头部导航部分效果，B站的头部导航背景图片使用的是动态叠加（变形和动画的效果），我们可以采用静态的图片的方式来实现背景图的部分在这里插入图片描述

效果

来看看我的实现效果，是不是可以非常棒？在这里插入图片描述

代码

关于代码部分不解释，在此处我会将该代码上传，链接并附在此处，有需要的小伙伴可以下载下来自行学习和体验！下载链接在下面哈 bilibili

哔哩哔哩 (゜-゜)つロ干杯~-bilibili * { margin: 0; padding: 0; } a, ul, li { list-style: none; text-decoration: none; color: #ffffff; } button, input { text-decoration: none; border: none; } input:hover { text-decoration: none; } input, button:focus { text-decoration: none; outline: none; border: none; } .nav { position: relative; margin: 0; padding: 0; } .mini-header-content { color: #ffffff; box-sizing: border-box; padding: 10px 24px; line-height: 30px; position: relative; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; z-index: 100; } .nav-link .nav-link-ul { height: 36px; display: flex; align-items: center; font-size: 14px; } .nav-link .nav-link-ul .nav-link-item { margin-right: 12px; } .nav-link-item-img { width: 18px; height: 18px; vertical-align: middle; } /* 导航搜索 */ .nav-search-box { margin: 0 10px; width: 500px; transition: width 0.3s; } .nav-search { position: relative; } .nav-search #nav-searchform { display: block; padding: 0 38px 0 16px; border: 1px solid hsla(0, 0%, 100%, 0); border-radius: 2px; background-color: #fff; } .search-input { width: 431px; height: 32px; } .nav-search .nav-search-keyword { overflow: hidden; width: 100%; height: 34px; border: none; background-color: transparent; box-shadow: none; color: #999; font-size: 14px; line-height: 34px; transition: all 0.2s; } .nav-search .nav-search-btn { position: absolute; top: 0; right: 0; margin: 0; padding: 0; width: 48px; height: 35px; border: none; border-radius: 2px; background: #e7e7e7; line-height: 35px; } .nav-search-btn-img { width: 16px; height: 16px; padding: 8px 16px; } /* 用户中心页面 */ .nav-user-center { font-size: 14px; display: flex; flex-shrink: 0; } .nav-user-center .user-con { display: flex; align-items: center; } .nav-user-center .user-con .item { position: relative; display: flex; margin-left: 12px; cursor: pointer; } .user-img { width: 32px; height: 32px; border-radius: 20px; vertical-align: middle; } .user-login { line-height: 32px; vertical-align: middle; } .upload { position: relative; color: #fff; font-size: 14px; display: block; width: 100px; height: 36px; line-height: 36px; text-align: center; background: #fb7299; border-radius: 2px; margin-left: 14px; } /* 背景图 */ .layer { width: 100%; height: 178px; background-image: url(https://i0.hdslb.com/bfs/archive/0b7eef054547750e6bfeff6f36c83e83d2a058fb.png); } .bili-banner { position: relative; top: -56px; } /* logo */ .logo-img { position: relative; top: 60px; left: 110px; } 主站番剧游戏中心直播会员购漫画赛事 S10 下载APP 登录注册投稿

【本文地址】

公司简介

联系我们