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. java中的进制转换以及字符串类和数值类的相互转化

    import java.util.*; import java.io.*; import java.math.*; import java.math.*; public class Main { pu ...

  2. B/S架构和C/S架构介绍

    一.C/S架构 C/S架构及其背景 C/S架构是一种比较早的软件架构,主要应用于局域网内.在这之前经历了集中计算模式,随着计算机网络的进步与发展,尤其是可视化工具的应用,出现过两层C/S和三层C/S架 ...

  3. MVVM MVC

    在WPF的MVVM模式中,View和ViewModel之间数据和命令的关联都是通过绑定实现的,绑定后View和ViewModel并不产生直接的依赖.具体就是View中出现数据变化时会尝试修改绑定的目标 ...

  4. 从头开始开发一个vue幻灯片组件

    首先新建项目vue init webpack projectName 安装依赖包npm i这些就不说了 接下来就是构建我们的swiper组件 因为我写的代码不规范, 通不过eslint的检测, 会频繁 ...

  5. 安装并配置前端自动化工具-gulp

    由于现在前端自动化已经很有必要了,所以我今天死皮烂脸的找了2位前端大咖帮助我安装和配置gulp,讲真,这一步步弄下来直到安装配置成功,到现在还是迷迷糊糊,不过我还是把这些步骤给记录下来,以防下次不记得 ...

  6. 分享几套bootstrap后台模板【TP5版】

    分享几套bootstrap后台模板[TP5版],模板来源于网络,需要的拿走.1.AdminLTE 链接: http://pan.baidu.com/s/1o7BXeCM 密码: zfhy 2.Boot ...

  7. 如何写一个bat文件,让他去执行某一个地方的bat文件

    新建一个bat文件,里面编写如下内容:@echo offcall 你bat文件的路径\startup.bat pause --------------------------------------- ...

  8. Codeforces Round #578 (Div. 2) E. Compress Words (双哈希)

    题目:https://codeforc.es/contest/1200/problem/E 题意:给你n个单词,你需要把他合成成一个句子,相邻的两个单词,相邻部分相同的话可以把其中一个的删掉 思路:因 ...

  9. grid布局快速入门

    Grid布局快速入门 常用Grid布局属性介绍 下面从一个简单Grid布局例子说起.CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实 ...

  10. DataTable删除行Delete与Remove的问题

    DataTable删除行使用Delete后,只是该行被标记为deleted,但是还存在,用Rows.Count来获取行数时,还是删除之前的行数,需要使用datatable.AcceptChanges( ...