模仿w3c school的示例导航栏
近日学习HTML，恰巧学习过程中看见w3cschool的示例导航栏看上去很不错，适合新手练习，于是模仿着做了一个。
示例导航栏如下图所示
导航栏自然使用li标签来做，a标签控制背景颜色和鼠标放入的特效
做成后效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<style>
li {
/* 去掉标签点，左浮动 */
list-style: none;
float: left;
} a {
/* 将a标签变为块级元素，设置文字大小和背景颜色 */
display: block;
width: 150px;
font-size: 32px;
color: white;
background-color: gainsboro;
text-decoration: none;
text-align: center;
text-transform: uppercase;
border-bottom: 2px solid brown;
} a:hover {
/* 鼠标移入后特效 */
font-size: 34px;
font-weight: bold;
background-color: brown;
border-color: lightcoral;
transform: scale(1.1);
transition: all 0.1s;
box-shadow: 0 4px 4px gray;
}
</style>
</head> <body>
<nav>
<ul>
<!-- 使用li标签做导航栏 -->
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">news</a>
</li>
<li>
<a href="#">about</a>
</li>
</ul>
</nav>
</body> </html>
运用这几天的所学知识模仿做了一个，不知道以后学会了以后，标签还是不是这么做的
这个老爷机surface pro3风扇声音是真的大，坐到床上不得不带上耳机，好久不用了又觉得键盘键程真的是短的可怕，可惜没钱，不然换个
模仿w3c school的示例导航栏的更多相关文章
- sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)
基于sencha touch 2.2所写 代码: /* *模仿tabpanel导航栏 */ Ext.define('ux.TabBar', { alternateClassName: 'tabBar' ...
- sencha touch 自定义cardpanel控件 模仿改进NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮（废弃 仅参考）
最新版本我将会放在:http://www.cnblogs.com/mlzs/p/3382229.html这里的示例里面,这里不会再做更新 代码: /* *模仿且改进NavigationView *返回 ...
- sencha touch 模仿tabpanel导航栏TabBar的实现代码
这篇文章介绍了sencha touch 模仿tabpanel导航栏TabBar的实例代码,有需要的朋友可以参考一下 基于sencha touch 2.2所写 效果图: 代码: /* *模仿tabpan ...
- html 小米商城导航栏示例
1.小米导航栏示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...
- 模仿虎牙App 导航栏切换
昨天看虎牙直播,发现导航栏挺有意思,自己也做个玩玩 <view class="tab_list row"> <view class="tab_item ...
- eclipse Maven Bootstrap 导航栏
1.在pom.xml添加两个依赖 Bootstrap 依赖和jQuery依赖 代码如下 <!-- https://mvnrepository.com/artifact/org.webjars/b ...
- 自定义iOS7导航栏背景,标题和返回按钮文字颜色
在iOS7下,默认导航栏背景,颜色是这样的,接下来我们就进行自定义,如果你仅仅是更改一下背景和颜色,代码会很简单,不需要很复杂的自定义View来替代leftBarItem 更改导航栏的背景和文字Col ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- jQuery Mobile 导航栏
jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...
随机推荐
- leetcode357
public class Solution { public int CountNumbersWithUniqueDigits(int n) { ) { ; } ; ; ; && av ...
- 「小程序JAVA实战」swagger2的使用与接口测试（34）
转自:https://idig8.com/2018/08/31/xiaochengxujavashizhanswagger2deshiyongyujiekouceshi34/ 我们已经开发完了一个用户 ...
- **python中的类和他的成员
面向对象是一种编程方式,此编程方式的实现基于对 类 和 对象 的使用. Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的. 在这里,为文章中使用 ...
- 【转】正则表达式简介及在C++11中的简单使用教程
正则表达式Regex(regular expression)是一种强大的描述字符序列的工具.在许多语言中都存在着正则表达式,C++11中也将正则表达式纳入了新标准的一部分,不仅如此,它还支持了6种不同 ...
- 3.Hadoop集群搭建之Zookeeper安装
前期准备 下载Zookeeper 3.4.5 若无特殊说明,则以下操作均在master节点上进行 1. 解压Zookeeper #直接解压Zookeeper压缩包 tar -zxvf zookeepe ...
- IOS数据持久化存储之SQLite3第三方库FMDB的使用
SQLite是一种小型的轻量级的关系型数据库,在移动设备上使用是非常好的选择,无论是Android还是IOS,都内置了SQLite数据库,现在的版本都是SQLite3.在IOS中使用SQLite如果使 ...
- Android5.0新动画之VectorDrawable
SVG是前端的一套标准,Vector是在Android中使用,他只是实现了SVG语言的Path的标签 Vector的常用语法 M = moveto(M X,Y): 将画笔移动到指定的坐标位置 ...
- MySQL内置功能之视图、触发器和存储过程
主要内容: 一.视图 二.触发器 三.存储过程 1️⃣ 视图 一.关于视图的理解 1.1.何谓视图? 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名], 用户使 ...
- java核心知识点----创建线程的第三种方式 Callable 和 Future CompletionService
前面已经指出通过实现Runnable时,Thread类的作用就是将run()方法包装成线程执行体,那么是否可以直接把任意方法都包装成线程执行体呢?Java目前不行,但其模仿者C#中是可以的. Call ...
- Elasticsearch前沿：ES 5.x改进详解与ES6展望
转:http://www.dataguru.cn/article-11094-1.html 曾勇(Medcl),Elastic 工程师与布道师,2015 年加入 Elastic 公司.加入 Elast ...