仿写哔哩哔哩的头部导航部分（HTML+CSS静态） |
您所在的位置：网站首页 › dw导航条效果如何实现 › 仿写哔哩哔哩的头部导航部分（HTML+CSS静态） |
仿写哔哩哔哩的头部导航部分（HTML+CSS静态）
|
介绍
先来看看哔哩哔哩的头部导航部分效果，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 登录 注册 投稿 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |