html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>导航栏</title>

		<link rel="stylesheet" href="css/test.css" />

	</head>

	<body>

		<div class="nav">

			<ul class="list">

				<li>

					<a href="#">

						<b>Home</b>

						<i>首页</i>

					</a>

				</li>

				<li>

					<a href="#">

						<b>Study</b>

						<i>学习</i>

					</a>

				</li>

				<li>

					<a href="#">

						<b>Coursr</b>

						<i>课程</i>

					</a>

				</li>

				<li>

					<a href="#">

						<b>Bbs</b>

						<i>论坛</i>

					</a>

				</li>

				<li>

					<a href="#">

						<b>About</b>

						<i>关于</i>

					</a>

				</li>

			</ul>

		</div>

	</body>

</html>

　　css

*{padding:0; margin:0;}

li{ list-style:none; }

a{ text-decoration:none;}

.nav{ width:100%; height:40px; background:#222; margin-top:100px; overflow:hidden;}

.list{ width:1000px; height:40px; margin:0 auto;}

.list li{ float:left;}

.list li a{ display:block; transition:0.3s;}

.list b,.list i{ display:block; padding:0 30px; color:#aaa; line-height:40px; text-align:center;}

.list b{ font-weight:100}

.list i{ font-style:normal; background:#333; color:#fff;}

.list a:hover{ margin-top:-40px;}

　效果：

css3 实现可以中英切换的导航条的更多相关文章

  1. jquery实现可以中英切换的导航条

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

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

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

  3. Win10 改为用 Ctrl+Shift 切换中英输入语言而不是 Win+空格

    是切换中英输入语言,而不是切换输入法,如图: 步骤: 设置 > 设备 > 输入 > 高级键盘设置 > 语言栏选项 > 高级键盘设置 > 更改按键顺序 > 切换 ...

  4. 分针网—IT教育：使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  5. webstorm快捷键 webstorm keymap内置快捷键英文翻译、中英对照说明

    20160114参考网络上的快捷键,整理自己常用的: 查找/代替shift+shift 快速搜索所有文件,简便ctrl+shift+N 通过文件名快速查找工程内的文件(必记)ctrl+shift+al ...

  6. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  7. eclipse菜单解释及中英对照

    在使用Eclipse作为开发工具的时候,建议使用英文版本的(直接百度从官网下就行,这里不详细描述,如果有问题,咱们私聊).虽然中文版本的对于和我一样对英文是小白的看起来特别爽,但是公司大多是英文版本的 ...

  8. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

  9. Swift - 使用导航条和导航条控制器来进行页面切换

    通过使用导航条(UINavigationBar)与导航条控制器(UINavigationController)可以方便的在主页面和多层子页面之间切换.下面通过一个简单“组件效果演示”的小例子来说明如何 ...

随机推荐

  1. SPOJ287 NETADMIN - Smart Network Administrator

    传送门[洛谷] 常见套路? 关键点连新建汇点 流量1 源点1 原图中的边 二分流量. 二分+判满流 做完了. 附代码. #include<cstdio> #include<cstri ...

  2. jQuery给css增加!important

    <div id='ele' style=''width:200px!important"><div> JS $("#el").css(" ...

  3. iPython清屏命令

    !clear for Unix-like systems !CLS for Windows

  4. 查看电脑的s/n序列号信息方式

    要是品牌机的话,通常在机箱的背部或是侧面都会有个不干胶贴纸,上面就有写机器的S/N号 或 点击开始——运行——输入CMD,单击确定 输入:wmic bios get serialnumber 查看本机 ...

  5. NOIp 数据结构专题总结 (2)：分块、树状数组、线段树

    系列索引: NOIp 数据结构专题总结 (1) NOIp 数据结构专题总结 (2) 分块 阅:<「分块」数列分块入门 1-9 by hzwer> 树状数组 Binary Indexed T ...

  6. 31 July

    P1005 矩阵取数游戏 高精度不能更坑-- #include <cstdio> #include <cstring> struct INT { long long h, l; ...

  7. ibatis 的使用

    1. 文本的使用 select  ‘day’+Num from Table;//Sql select convert(varchar,'day')+Num from Table;//ibatis

  8. nlp学习笔记

    https://mp.weixin.qq.com/s/-w4gENfBt2gKOPvghenw9w

  9. 【读书笔记】：MIT线性代数(3):Special Solution, Rank and RREF

    Special Solutions: Notice what is special about s 1 and S2. They have ones and zeros in the last two ...

  10. python3 zip 与tf.data.Data.zip的用法

    ###python自带的zip函数 与 tf.data.Dataset.zip函数 功能用法相似 ''' zip([iterator1,iterator2,]) 将可迭代对象中对应的元素打包成一个元祖 ...