<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin：0 ;
padding: 0;
}
div{
width:1000px;
height: 60px;
}
ul{
list-style: none;
}
li{
float: left;
width: 80px;
height: 20px;
background:blue;
text-align: center;
white-space: nowrap;
overflow: hidden;

}
li:hover a{
display: none;
}
li:hover span{
overflow: visible;
}
a{ display: block;
text-decoration: none;

}
</style>
<body>
<div>
<ul>
<li><a href="">home</a><span>首页</span></li>
<li><a href="">blog</a><span>首页</span></li>
<li><a href="">guestbook</a><span>首页</span></li>
<li><a href="">pickbar</a><span>首页</span></li>
<li><a href="">fansir</a><span>首页</span></li>
</ul>
</div>
</body>
</html>

复制粘贴即可实现，笔者不多说。喜欢上干货。注 a和span是同级标签。

英文汉语切换的导航栏，纯css制作。的更多相关文章

  1. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  2. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  3. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  4. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  6. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  7. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  8. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  9. 纯CSS制作二级导航

    一.问题描述 做一个类似校园网首页,主要是导航栏的设置,ul默认纵向排列,如何横向排列,同时去掉圆点. 二.问题解决 2.1 先写导航条 用两个ul嵌套,一个ul是横向导航条,另一个是每个小项目下连一 ...

随机推荐

  1. LeetCode - 626. Exchange Seats

    Mary is a teacher in a middle school and she has a table seat storing students' names and their corr ...

  2. 处理springMvc中responsebody返回中文乱码

    法一:   @RequestMapping(value="/getUsersByPage",produces = public String getUsers  法二:在sprin ...

  3. console那些你不曾知道的玩法

    一.console最常见的四种方法: FireFox(58) Chrome(51) 二.打印对象: 平时想输出对象属性时,可以直接打印对象,对Object使用toString方法会得到 [Object ...

  4. docker 报错：x509: certificate has expired or is not yet valid

    环境:centos 7 程序:docker 下载镜像报错: # docker pull centos Pulling repository centos FATA[0004] Get https:// ...

  5. ASP.NET Core的身份认证框架IdentityServer4--(2)API跟WEB端配置

    API配置 可以使用ASP.NET Core Web API模板.同样,我们建议您控制端口并使用与之前一样的方法来配置Kestrel和启动配置文件.端口配置为http://localhost:5001 ...

  6. 通过js区分移动端浏览器（微信浏览器、QQ浏览器、QQ内置浏览器）

    由于公司业务中涉及到一个分享指引功能,而像微信.QQ内置浏览器需要引导用户点击右上角进行操作,其他浏览器则引导点击浏览器下方进行操作,因此需要区分浏览器类型: 通过在页面alert(navigator ...

  7. FZU 2234

    题目为中文,题意略. 这个题目我开始用贪心做bfs两次,这样做是错的,因为两次局部的最优解并不能得出全局的最优解,以下面样例说明: 3 0   10   -1 10   10   10 1   0  ...

  8. EmguCV 绘画图形

    1.Image类中绘图常用函数列表 实践验证 ///初始化图片 private void Form1_Load(object sender, EventArgs e) { oldpic = new E ...

  9. hbase 命令

    HBase是Google Bigtable的开源实现,它利用Hadoop HDFS作为其文件存储系统,利用Hadoop MapReduce来处理HBase中的海量数据,利用Zookeeper作为协同服 ...

  10. PyQt5多点触控写字板实现及困惑

    Qt支持程序多点触控,就想使用PyQt5做一个触控画板,经过几番周折,查阅了TouchEvent官方文档,又参考了一篇QT for Android的例子,采用eventfilter过滤器来识别触屏事件 ...