英文汉语切换的导航栏,纯css制作。
<!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是同级标签。
最新文章
- spring cloud的主要组成部分
- Web测试中常见分享问题
- 折腾一天的WordPress
- Eclipse-插件的安装之link文件方法
- MQTT——安装、测试
- jqeury.base
- iptables用法
- bzoj2285
- Android 开发笔记——对应用进行单元测试
- Try,Catch,Finally三块中如果有Return是怎么个运行顺序
- 随机生成器、thread(暂停)、清屏定义
- spring+websocket综合(springMVC+spring+MyBatis这是SSM框架和websocket集成技术)
- hibernate5使用注解遇到的问题
- 一篇关于Maven项目的jar包Shell启动脚本
- 服务器tomcat/mysql的一些有关命令
- php创建桌面快捷方式实现方法
- unity延时方法
- iOS8 UICollectionView横向滑动demo
- [图解tensorflow源码] Session::Run()流程图 (单机版)
- Linux基础-free窥内存-dd探硬盘