腾讯视频首页导航栏【鼠标移动切换导航（静态数据）】

示意图

提示

该案例只是改变了导航，不涉及改变背景图片【后期会有—>动态数据及背景图改变（利用js）】

代码

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>导航栏电影切换</title><link rel="stylesheet" href="./css/index.css"><script src="./js/index.js"></script>
</head><body><div class="wrapper"><div class="top-bar"></div><div class="imgs-content"></div><div class="right-nav"><a href="#" class="guess-you-love"><img src="./img/all.png" alt="" style="margin-left: -22px;"> 猜你会追</a><a href="#" class="recommond"><img src="./img/tj.png" alt="" style="margin-left: -22px;"> 重磅推荐</a><a href="#" class="nav" title="北京2022年冬奥会: 谷爱凌大跳台夺金">北京2022年冬奥会 <span>谷爱凌大跳台夺金</span></a><a href="#" class="nav" title="谷爱凌：我，18: 天才少女天生好强">谷爱凌：我，18 <span>天才少女天生好强</span></a><a href="#" class="nav" title="雄狮少年: 黑马国漫！平凡少年热血追梦">雄狮少年 <span>黑马国漫！平凡少年热血追梦</span></a><a href="#" class="nav" title="嫣语赋: 乔欣徐正溪携手巧破奇案">嫣语赋 <span>乔欣徐正溪携手巧破奇案</span></a></div></div>
</body></html>

* {margin: 0;padding: 0;
}.wrapper {width: 100%;/* 不设置高度，有内部元素撑开 *//* 设置定位 */position: relative;
}.top-bar {height: 70px;width: 100%;background-color: rgba(0, 0, 0, 0.3);position: absolute;top: 0;left: 0;z-index: 10;
}.imgs-content {height: 500px;width: 100%;background: url(https://vc.qpic.cn/tpic/mtviv75gFPjkj/gmhh4292bvhmj306/1680);top: 0;left: 0;
}.right-nav {position: absolute;top: 70px;bottom: 0;right: 0;width: 350px;background-color: rgba(0, 0, 0, 0.2);
}.right-nav>a {display: block;text-decoration: none;color: rgba(0, 0, 0, 0.7);height: 35px;line-height: 35px;margin-left: 45px;cursor: pointer;color: #fff;
}.guess-you-love {margin-bottom: 20px;margin-top: 10px;font-size: 22px;font-weight: 700;
}/* 伪元素 分割线 */.guess-you-love::after {content: "";height: 1px;position: absolute;top: 55px;left: 10px;right: 10px;background-color: rgba(255, 255, 255, 0.2);
}.recommond {font-size: 22px;font-weight: 700;color: #fff;
}.nav {transform: font-size .2s;
}.nav:hover {font-size: 22px;font-weight: 700;color: rgba(255, 92, 56);
}.nav>span {display: none;
}.nav:hover span {display: inline;font-size: 13px;
}

腾讯视频首页导航栏【鼠标移动切换导航（静态数据）】相关推荐

android实现超酷的腾讯视频首页和垂直水平网格瀑布流一揽子效果
代码地址如下: http://www.demodashi.com/demo/13381.html 先来一波demo截图实现ListView.GridView.瀑布流 1.导入RecyclerView ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
Js鼠标悬停事件,简单的实现导航栏鼠标划过内容弹窗的效果.可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> < ...
layui导航栏鼠标经过青色条块怎么移到顶部？
layui导航栏鼠标经过青色条块怎么移到顶部? layui-nav-bar怎么移到导航栏的顶部? 青色条块其实就是在鼠标经过时会变成,所以,如果我们把top:111px变成top:0,青色条块就可以移 ...
微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容导航栏样式设置 tabBar导航栏实例一:导航栏样式设置小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: {&q ...
解决导航栏按钮背景色切换，刷新页面，按钮背景色切换，页面和路径没有切换问题
解决导航栏按钮背景色切换,刷新页面,按钮背景色切换,页面和路径没有切换问题上篇博文中点击导航栏切换背景色有一个bug,如果点击第二个或者后面几个按钮,再刷新页面,按钮背景色会跳到第一个按钮上去, ...
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )
文章目录一.Scaffold 组件二.底部导航栏整体架构三.BottomNavigationBar 底部导航栏四.BottomNavigationBarItem 导航栏条目五.PageVie ...
导航栏不变页面切换最简单的方法
导航栏不变页面切换最简单的方法不久前一个导航栏想的我焦头烂额,碰巧得到了一个项目才知道怎么写的,我这个方法呢就跟插入导入css,js样式差不多.请看下面的图片创建一个num.html,在里面把 ...
css导航栏_CSS：创建导航栏
css导航栏 Every website needs a navgation bar to help visitors navigate around the website. This is gen ...

腾讯视频首页导航栏【鼠标移动切换导航（静态数据）】

示意图

提示

代码

腾讯视频首页导航栏【鼠标移动切换导航（静态数据）】相关推荐

最新文章

热门文章