<!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. AOF持久化

    AOF持久化是通话记录执行的命令进行存储的 AOF持久化的事先可以分为 (1)文件追加,新写入的命令都会被追加到redisserver的aof_buf缓冲区里面. 在服务器每一次执行事件循环的时候都会 ...

  2. xBIM WeXplorer xViewer 基本应用

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  3. 11个phpstorm 快捷键介绍

    11个phpstorm 快捷键介绍 http://phpstorm.tips/tips/11-toggling-case

  4. 广告中的AdNetwork、AdExchange、DSP、SSP、RTB和DMP是什么？

    [https://www.douban.com/note/557732418/?type=rec] AdNetwork.AdExchange.DSP.SSP.RTB.DMP这些模式之间存在着内在的关系 ...

  5. HDU - 4135 Co-prime 容斥定理

    题意:给定区间和n,求区间中与n互素的数的个数, . 思路:利用容斥定理求得先求得区间与n互素的数的个数,设表示区间中与n互素的数的个数, 那么区间中与n互素的数的个数等于.详细分析见求指定区间内与n ...

  6. UVA - 658 最短路

    思路:通过前后两种状态建立一条边,利用Dijsktra就可以做了. 注意利用二进制优化. AC代码 #include <cstdio> #include <cmath> #in ...

  7. 算法提高 拿糖果 线性DP

    题目链接:拿糖果 思路:首先给小于根号n的素数打表.d(i)表示当前剩余i颗糖,最多可以拿到多少糖.     转移方程:d(i) = max(d(i), k + d(i - 2 * k)),此处k表示 ...

  8. nignx笔记1

    上图是单版的架构,理论一个tomcat并发就200到300,经过优化后的最多500,这很明显容量低,而且出现单点故障后应用服务就不可以访问了,比如tomcat,这样明显对于多并发是不行的. 那么如果我 ...

  9. Apache+PHP+Mysql中文配置

    一.安装Apache2 1.输入sudo apt-get install apache2下载安装apache2 2.输入Y回车确认 3.安装成功 Apache安装完成后,默认的网站根目录是" ...

  10. 转 Caffe学习系列(4)：激活层（Activiation Layers)及参数

    在激活层中,对输入数据进行激活操作(实际上就是一种函数变换),是逐元素进行运算的.从bottom得到一个blob数据输入,运算后,从top输入一个blob数据.在运算过程中,没有改变数据的大小,即输入 ...