<!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. 使用Python的requests库进行接口测试——session对象的妙用

    from:http://blog.csdn.net/liuchunming033/article/details/48131051 在进行接口测试的时候,我们会调用多个接口发出多个请求,在这些请求中有 ...

  2. [Python Study Notes]字典操作

    字典操作 a.增加 >>> info["stu1104"] = "abc" >>> info {'stu1102': 'x5 ...

  3. python学习:hashlib模块使用

    #!/usr/bin/env python   import sys import hashlib   def md5sum(f):     m = hashlib.md5()     with op ...

  4. 原生ajax写的上拉加载

    上拉加载的思路 1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据 2.所有要获取屏幕的高度 文档的高度 和滚动的高度 下面的代码是已经做好了兼容的可以直接拿来用 Javascript: ...

  5. c++实现一个小算法

    题目:有n个格子,每个格子里有坦克,坦克有两滴血,你向格子里投掷炸弹,每次命中坦克他掉一滴血并随机像左或者右移动一个格子,问最少炸几次能把全部坦克炸完. 题解:先向偶数格子投掷炸弹,所有的坦克全跑到奇 ...

  6. hibernate的事务管理和session对象的详解

    //开启事务 transaction=session.beginTransaction(); 上面为开启事务 transaction.commit();这个为提交事务 从session对象中获取事务后 ...

  7. Shiro登录成功之后跳到指定URL

    通常我们使用shiro,登录之后就会跳到我们上一次访问的URL,如果我们是直接访问登录页面的话,shiro就会根据我们配置的successUrl去重定向,如果我们没有配置successUrl的话,那么 ...

  8. nyoj28 大数阶乘 亿进制优化

    思路:刚开始用的十进制模拟手算加法,超时了.然后想到刘汝佳大哥书上面用的亿进制能够加速大数运算,果然180ms过掉了. 亿进制与十进制相同,只不过是把八位看做一位,例如6464654654165,看成 ...

  9. java网络编程（3）——UDP

    UDP在java中主要使用DatagramSocket来实现通讯,数据一般是通过DatagramPacket来封装: 发送方只需指定接受方的地址和端口,然后通过send()方法就可以把封装在Datag ...

  10. React——diff算法

    react的diff算法基于两个假设: 1.不同类型的元素会产生不同的树 2.通过设置key,开发者能够提示那些子组件是稳定的 diff算法 当比较两个树时,react首先会比较两个根节点,接下来具体 ...