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. bzoj 1003物流运输 区间dp+spfa

    基本思路: 一开始确实没什么思路,因为觉得怎么着都会超时,然后看一下数据范围,呵,怎么都不会超时. 思路: 1.看到能改变线路,想到可以用以下区间dp,区间dp的话,先枚举长度,枚举开始位置,然后枚举 ...

  2. 并行流水线--求 (B+C)*B/2

    public class Msg { public double i; public double j; public String orgStr = null; } import java.util ...

  3. oracle跟踪

    select sql_text --sql文本的前1000个字符 ,first_load_time --初次载入时间 ,last_load_time --最后载入时间 ,s.sql_fulltext ...

  4. centos在线安装mysql报错：file /etc/my.cnf conflicts between attempted installs of mysql-community-server-8.0.16-2.el7.x86_64 and MariaDB-common-10.4.6-1.el7.centos.x86_64

    错误提示:file /etc/my.cnf conflicts between attempted installs of mysql-community-server-8.0.16-2.el7.x8 ...

  5. 在Developerkit开发板上运行blink例程

    本文将介绍怎么样在VScode环境下,将AliOS Tings提供的blink例程在Developerkit开发板上运行起来. DeveloperKit开发板   在例程中分别用到两个led和一个按钮 ...

  6. && 和 || 逻辑运算符的短路运算

    &&和||的短路运算,是指如果在进行前面的表达式的运算过程,通过判断已经明确的知道整个表达式的结果,那么就不会进行后面表达式的运算判断. 表达式1 || 表达式2 || 表达式3... ...

  7. 【BZOJ3522&BZOJ4543】Hotel加强版（长链剖分，树形DP）

    题意:求一颗树上三点距离两两相等的三元组对数 n<=1e5 思路:From https://blog.bill.moe/bzoj4543-hotel/ f[i][j]表示以i为根的子树中距离i为 ...

  8. ThinkPHP整合datatables实现服务端分页

    最近做东西有一个需求,因为数据量很大,在这里我决定使用datatables的服务端分页,同时还需要传递查询条件到服务端.在网上搜索的大部分文章都感觉有些误差,于是自己封装了一下,主要配置/工具为: 服 ...

  9. sonarqube6.7.1使用

    1.插件安装 方法1.登入sonarqube-web安装 admin/admin 配置--应用市场--全部 英文片:administration--configuration--marketplace ...

  10. JS 時間戳轉日期格式

    1.日期轉換為時間戳,(如果日期格式為時間戳,將其轉為日期類型,否則輸出傳入的數據) // 如果時間格式為時間戳,將其轉為日期 function timestampToDate(timestamp) ...