手撸vue菜单导航_撸导航-程序员宅基地
技术标签： 随笔记录
手撸菜单导航
由于做官网偷懒找现成模板,但没有一个比较符合心意,于是手撸了一个效果,可自行修改
用的vue模板
直接上全部代码
<template>
<ul id="nav">
<li class="nav1"><a href="#">在线客服</a>
<ul class="nav2">
<li>证劵客服</li>
<li>基财客服</li>
<li>银行客服</li>
<li>科技客服</li>
</ul>
</li>
<li class="nav1"><a href="#">在线客服</a>
<ul class="nav2">
<li>证劵客服</li>
<li>基财客服</li>
<li>银行客服</li>
<li>科技客服</li>
</ul>
</li>
</ul>
</template>
<script>
// @ is an alias to /src
export default {
name: 'Home',
}
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
text-decoration: none;
text-align: center;
list-style: none;
}
body {
font-size: 12px;
}
#nav {
display: flex;
justify-content: center;
.nav1 {
margin: 0 10px;
height: 40px;
display: inline-block;
a {
line-height: 40px;
display: block;
font-size: 20px;
color: #000;
font-weight: bold;
}
&:hover {
background-color: red;
color: #fff5f6;
}
}
}
.nav2 {
// display: inline-block;
position: relative;
z-index: 1;
height: 0;
overflow: hidden;
transition: height 0.5s;
li {
height: 50px;
background-color: #ffffff;
line-height: 60px;
background: #ff6700;
font-size: 12px;
&:hover {
background: blueviolet;
cursor: pointer;
}
&:hover a {
background: red;
cursor: pointer;
}
}
}
.nav1:hover .nav2 {
height: 540px;
}
</style>
智能推荐
chromium系列：MediaSource和SourceBuffer_addsourcebuffer-程序员宅基地
文章浏览阅读5.4k次，点赞5次，收藏4次。 使用 MSE API，请执行以下步骤在页面的 HTML 部分中定义 HTML5 video 元素。使用 JavaScript 创建 MediaSource 对象。使用 createObjectURL 创建虚拟 URL，并将 MediaSource 对象作为源。将虚拟 URL 分配到视频元素的 src 属性。使用 addSourceBuffer 创建 SourceBuffer，包含你添加的 MIM..._addsourcebuffer
JAVA使用web3j开发以太坊实战案例_用java写一个跟以太币一样的程序-程序员宅基地
文章浏览阅读4.4k次，点赞10次，收藏38次。JAVA开发以太坊/web3j开发以太坊必读前言基础（必看）web3j引入创建账户（离线创建）geth节点搭建与基本使用运行的参数会讲解一下 太晚了 明天更新wx：x_undefined 可以加v交流必读首先声明：笔者写博客时也只是才自学了十天时间以太坊，本文将讲一下自己对以太坊的理解，如有概念或理解上不正确，欢迎指出。本文适于有一定java基础 但没接触过以太坊或只了解一些的读者，本文可..._用java写一个跟以太币一样的程序
Python计算阶乘-程序员宅基地
文章浏览阅读189次。如果放在循环外面，每次的result是上一次计算的结果，会导致结果很大，计算错误。引用math库里的factorial( ) 方法。注意：result = 1应放在第一个循环里。关于递归的方法，可以参考我以前的文章。第一种做法：用for循环。用到循环嵌套的方法。第二种方法：数学公式。
IIS支持bootstrap框架中字体-程序员宅基地
文章浏览阅读116次。2019独角兽企业重金招聘Python工程师标准>>> ..._iis添加bootstrap
mysql 5.6.23 源码包安装报错_mysql-5.6.27源码安装及错误解决办法-程序员宅基地
文章浏览阅读101次。yum install -y cmake 当然也可以自己下载源码包安装，为方便就Yum安装了useradd -s /sbin/nologin mysqltar zxvf mysql-5.6.27.tar.gzmkdir -p /data/mysqlchown -R mysql:mysql /data/mysqlcd mysql-5.6.27cmake.-DCMAKE_INSTALL_PREF..._-- running cmake version 2.8.12.2
keepalived配置mysql双机_利用MySQL和Keepalived实现高可靠性的双机热备-程序员宅基地
文章浏览阅读109次。数据对与客户对于用户来说都是非常重要的，也是我们DBA的工作重点，所以这里我们在牛人技术这里就为大家介绍如何通过双机热备的方式来提高数据库的可靠性和冗余。这里我们使用到的是Mysql数据库，Keepalived服务，并且配置另外一台数据库服务器进行的。首先数据库环境情况OS：CentOS6.5_X64 采用Linux操作系统MASTER：192.168.0.202 主要数据库地址BACKUP：19..._keepalived+mysql数据库双主 keepalived和mysql能部署在不同机器吗?
随便推点
Cesium教程系列汇总-程序员宅基地
文章浏览阅读89次。Cesium系列目录：演示实例ExamplesforCesium最近老实有一些人问我，下载后在本地无法运行，我也不能保证每次都搭个环境看是否可行，或许Cesium升级版本后真有问题呢，索性在github上搭建了一个演示范例，大家有问题先看看github上的范例运行是否正确。当然，是否能够访问取决于你的运气，可能会被墙，我尽力了，程序员还是多翻FQ吧~。本地运行请参考本文的范例说..._cesium 汇总
POJ3009 Curling 2.0【dfs回溯】_descriptionon planet mm-21, after their olympic ga-程序员宅基地
文章浏览阅读233次。Curling 2.0Time Limit: 1000MS Memory Limit: 65536KTotal Submissions: 23226 Accepted: 9381DescriptionOn Planet MM-21, after their Olympic games this year, curling _descriptionon planet mm-21, after their olympic games this year, curling is getting popular. but the rules are somewhat different from ours. the game is played on an ice game board on which a square mesh is marked. they use only a single stone. the purp
ubuntu20.04安装nvidia显卡驱动_Ubuntu MX250显卡驱动安装-程序员宅基地
文章浏览阅读1.3k次，点赞2次，收藏3次。我的电脑是magicbook 2019 16g版，显卡为MX250系统选用ubuntu16.0.4 + windows10 双系统想使用显卡跑一些机器学习的任务踩过的坑：直接从nvidia官网下载cuda toolkit，结果是不可行，虽然驱动安装成功（通过nvidia-smi验证），但由于兼容性问题，会卡在login界面，试过多种方法无法解决，已失败告终。从nvidia官网仅下载显卡驱动，安装后..._mx250 wsl 驱动
服务器503网页报错,网页为什么出现503错误？网页503错误的解决方法-程序员宅基地
文章浏览阅读7.4k次。大家在浏览网页的时候，有没有遇到503错误的呢？出现这个问题的原因是什么呢？其实错误503是一种HTTP状态码，它与404是同属一种网页状态出错码。那要如何解决503错误呢？下面小编给大家讲讲。网页出现503错误怎么解决进WIN2008服务器，打开IIS，找到常出503错误的应用程序池，选中该程序池，下图阴影部分的程序池便是选中的应用程序池。选中应用程序池后，选择右边的高级设置，打开应用程序池高级..._服务器503错误怎么解决
Dota中卡尔技能总数的组合数量_卡尔技能排列组合公式-程序员宅基地
文章浏览阅读6.7k次，点赞6次，收藏6次。问题:在游戏Dota2中,有一位非常强大的英雄:卡尔,他有三种属性:冰 火 雷. 同时卡尔身上有三个无顺序的属性槽, 他可以从三种属性中任意选择3个放入属性槽中,然后通过当前的属性组合召唤技能. 每种不同的属性组合 都可以为卡尔召唤出不同的技能,共有10种组合:1 冰冰冰2 冰冰火3 冰冰雷4 冰火火5 冰火雷6 冰雷雷7 火火火8 火火雷9 火雷雷10..._卡尔技能排列组合公式
GItHub配置ssh key的步骤（个人复习）-程序员宅基地
文章浏览阅读1.6k次。如果你已经有SSH密钥（例如，文件名为id_rsa和id_rsa.pub），你可以跳过下面的步骤2和3。5. 你可以选择为SSH密钥设置密码，这样每次使用密钥时都需要输入密码。8. 登录GitHub账户，点击右上角的头像，选择"Settings"。11. 在"Title"字段中，为SSH key起一个有意义的名称。13. 点击"Add SSH key"保存并添加SSH key。6. 在终端中显示出SSH密钥已经生成，包括公钥和私钥。12. 在"Key"字段中，粘贴你之前复制的公钥内容。_github配置ssh key