近日学习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的示例导航栏的更多相关文章

  1. sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)

    基于sencha touch 2.2所写 代码: /* *模仿tabpanel导航栏 */ Ext.define('ux.TabBar', { alternateClassName: 'tabBar' ...

  2. sencha touch 自定义cardpanel控件 模仿改进NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮（废弃 仅参考）

    最新版本我将会放在:http://www.cnblogs.com/mlzs/p/3382229.html这里的示例里面,这里不会再做更新 代码: /* *模仿且改进NavigationView *返回 ...

  3. sencha touch 模仿tabpanel导航栏TabBar的实现代码

    这篇文章介绍了sencha touch 模仿tabpanel导航栏TabBar的实例代码,有需要的朋友可以参考一下 基于sencha touch 2.2所写 效果图: 代码: /* *模仿tabpan ...

  4. html 小米商城导航栏示例

    1.小米导航栏示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  5. 模仿虎牙App 导航栏切换

    昨天看虎牙直播,发现导航栏挺有意思,自己也做个玩玩 <view class="tab_list row"> <view class="tab_item ...

  6. eclipse Maven Bootstrap 导航栏

    1.在pom.xml添加两个依赖 Bootstrap 依赖和jQuery依赖 代码如下 <!-- https://mvnrepository.com/artifact/org.webjars/b ...

  7. 自定义iOS7导航栏背景,标题和返回按钮文字颜色

    在iOS7下,默认导航栏背景,颜色是这样的,接下来我们就进行自定义,如果你仅仅是更改一下背景和颜色,代码会很简单,不需要很复杂的自定义View来替代leftBarItem 更改导航栏的背景和文字Col ...

  8. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  9. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

随机推荐

  1. angular.module方法

    关于module的定义为:angular.module(‘com.ngbook.demo’, []).关于module函数可以传递3个参数,它们分别为: name:模块定义的名称,它应该是一个唯一的必 ...

  2. Linux ALSA声卡驱动之一：ALSA架构简介

    声明:本博内容均由http://blog.csdn.net/droidphone原创,转载请注明出处,谢谢! 一.  概述 ALSA是Advanced Linux Sound Architecture ...

  3. Spring3开发（一）

    1 Ioc是什么? Ioc:Inversion of Control,控制反转,控制权从应用程序转移到框架(如Ioc容器),是框架的共有特性. 1.1 为什么需要IoC容器?IoC容器是如何演变的? ...

  4. 手动为 Team Foundation Server 安装 SQL Server

    本主题中的步骤适用于安装 SQL Server 2012 企业版,你也可以使用安装标准版的相同步骤. 适用于 SQL 2014 的步骤与以上步骤也非常相似. 我们将在 TFS 所在的同一服务器上安装 ...

  5. Linux实战教学笔记20:初级阶段结束，中级阶段起航

    第二十节 第一阶段结束第二阶段起航 标签(空格分隔): Linux实战教学笔记-陈思齐 一,承上 Linux实战教学笔记的基础核心能力阶段也就是第一阶段到此也就告一段落了.如果同学们能基本全都掌握,再 ...

  6. IEnumerator & IEnumerable

    [IEnumerator] 用于遍历一个对象,IEnumerator在System.Collections命名空间中. public interface IEnumerator { object Cu ...

  7. word2012写论文之参考文献和图片

    每次写论文都感到word的“博大精深”啊,一个版本一个样,一些原来版本还有的功能,后来的版本就没有了,一些原来版本叫这个名字的功能,下一个版本就换了个名字,你也太考验你用户的智商和耐心了吧!即使同一份 ...

  8. 【bzoj3239】Discrete Logging

    [吐槽] 这题和[bzoj]2480一毛一样. 就是输入顺序和输出变了一下. 传送门:http://www.cnblogs.com/chty/p/6043707.html

  9. 【bzoj3667】Rabin-Miller算法

    3667: Rabin-Miller算法 Time Limit: 60 Sec  Memory Limit: 512 MBSubmit: 1200  Solved: 363[Submit][Statu ...

  10. JS的事件汇总

    一.前言 事件的绑定触发有很多种方法,我们如何选择呢? 很多时候,我们会使用鼠标事件,但是鼠标事件只能在PC设备上使用,当我们需要对不同设备兼容时怎么办呢? 二.正文 1. 事件的几个概念: 事件流: ...