<!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. 小甲鱼OD学习第11讲

    这次我们的任务是破解这个需要注册的软件,如下图所示 我们这次从字符串入手,我们查找 unregistered  字符串 然后我们在如下图的字符串下断点 然后我们来到断点处,我们观察到 地址为 0040 ...

  2. [Python Study Notes] 变量/编码/注释

    Ps:我这里选择的IDE为pycharm,个人感觉还是比较好用的. 1.变量 声明变量/赋值变量 #_*_ coding:utf-8 _*_ # author = "liu" ab ...

  3. Gitbucket—快速建立自己的Github

    GitBucket是一个用Scala语言编写的类似Github的应用,界面非常相似.它非常容易安装–容易到你只需要把它的war文件扔到tomcat中,然后启动tomcat就直接可以访问了.或者直接ja ...

  4. 织梦搜索页使用arclist标签

    织梦默认不能在搜索页使用arclist标签,我们对代码做一些小改动即可 打开include/arc.searchview.class.php 一.查找代码: require_once(DEDEINC. ...

  5. bzoj[1835][ZJOI2010]base 基地选址

    bzoj[1835][ZJOI2010]base 基地选址 标签: 线段树 DP 题目链接 题解 这个暴力DP的话应该很容易看出来. dp[i][j]表示造了i个通讯站,并且j是第i个的最小费用. \ ...

  6. Java面试题库及答案解析

    1.面向对象编程(OOP)有哪些优点? 代码开发模块化,更易维护和修改. 代码复用. 增强代码的可靠性和灵活性. 增加代码的可理解性. 2.面向对象编程有哪些特性? 封装.继承.多态.抽象 封装 封装 ...

  7. 真实场景的双目立体匹配（stereo matching）以及虚拟视点合成（virtual view synthsis）示例

    双目立体匹配一直是双目视觉的研究热点,双目相机拍摄同一场景的左.右两幅视点图像,运用立体匹配匹配算法获取视差图,进而获取深度图.而深度图的应用范围非常广泛,由于其能够记录场景中物体距离摄像机的距离,可 ...

  8. 用Putty通过SSH访问Linux服务器

    1,sudo apt-get install ssh 2,sudo service ssh restart 3,重启ssh成功后,就可以直接用Putty访问服务器.

  9. PHP结合Redis来限制用户或者IP某个时间段内访问的次数

    $redis = new Redis(); $redis->connect('127.0.0.1', 6379); //获取客户端真实ip地址 function get_real_ip(){ s ...

  10. win10外接键盘失灵

    故障描述:笔记本外接的键盘突然之间就失灵,键盘的灯不亮,无法输入 处理方程: 1. 我的电脑右击--> 管理 --> 设备管理器(开始失灵时,键盘下的HID Keyboard Device ...