通过行内块、伪类对导航栏进行设置

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        body{

            margin:0;

            padding:0;

        }

        div {

            width: 700px;

            height: 40px;

            margin: 0 auto;

            background-color: #E3E4E5;

            text-align: center;

        }

        a {

            color: #8DD748;

            display:inline-block;

            line-height:40px;

            text-decoration:none;

            width:70px;

            height:40px;

        }

        a:hover{

            color:red;

            text-decoration:underline;

        }

    </style>

</head>

<body>

    <div>

        <a href="#">语文</a>

        <a href="#">数学</a>

        <a href="#">化学</a>

        <a href="#">历史</a>

        <a href="#">体育</a>

        <a href="#">物理</a>

        <a href="#">生物</a>

    </div>

</body>

</html>

效果：

html——导航demo的更多相关文章

  1. 实现百度地图导航Demo的语音播报功能

    上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...

  2. Java程序员的日常 —— 响应式导航Demo

    这两天想要做响应式的页面,于是本着重复造轮子的想法,模仿Bootstrap官网,精简了一个响应式导航的Demo. 效果 代码 <!DOCTYPE html> <html> &l ...

  3. CoreLocation导航Demo

    CoreLocation实现定位和导航功能还是非常简单的,基本思路是: 1.导入<CoreLocation/CoreLocation.h>头文件 2.使用该框架内的导航管理者,创建该导航管 ...

  4. CSS——tab导航demo

    问题总结: 1.ul要比外套div宽度的值大一点 2.ul需要往左移动1px 3.外套的div设置overflow隐藏 解决抖动: 1.li宽度设置98px,padding左右值1px,hover之后 ...

  5. CSS——新浪导航demo

    主要运用的dispaly将a变成行内块,再用padding撑开宽度. <!DOCTYPE html> <html lang="en"> <head&g ...

  6. 百度地图SDK下载以及创建应用（申请Key）和本地导入Demo

    一.百度地图SDK下载 http://lbsyun.baidu.com/sdk/download?selected=location 选择全部,然后分别下载开发包.示例代码.类参考. 二.创建应用(申 ...

  7. 【iOS】7.4 定位服务->3.2 地图框架MapKit 功能2：路线规划（导航）

    本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...

  8. 3D立体菜单导航

    今天在微博里面看到别人分享的一个立体效果,我觉得挺好的,就拿下来自己存着,万一以后用到. 效果如下: index.html <!DOCTYPE html> <html > &l ...

  9. 关于百度地图导航AndroidSDK的初始化问题

    使用百度地图有一段时间了,导航是一个一直困扰我的问题.今天刚发现百度地图的导航SDK并不是对Android6.0版本不兼容.而是对某一部分手机不兼容,准确的说是对X64或X86的cpu不兼容.下载百度 ...

随机推荐

  1. rest frame work纪念版代码

    models.py from django.db import models from pygments.lexers import get_all_lexers from pygments.styl ...

  2. HDU——1267 下沙的沙子有几粒？

    下沙的沙子有几粒? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  3. Java AOP 获取HttpSevletRequest、HttpSevletResponse、HttpSession对象

    ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()) ((ServletRequestAttributes) ...

  4. DATASNAP压缩过滤器的使用

    ZLIBCOMPRESSION FILTER 作为范例,我们使用已随D2010提供的DataSnap过滤器.可用于在客户端和服务端压缩数据流.这里说的ZlibCompression过滤器可以在DbxC ...

  5. 从零单排入门机器学习：Octave/matlab的经常使用知识之矩阵和向量

    Octave/matlab的经常使用知识之矩阵和向量 之前一段时间在coursera看了Andrew ng的机器学习的课程,感觉还不错.算是入门了.这次打算以该课程的作业为主线,对机器学习基本知识做一 ...

  6. uboot arp地址解析

    common/cmd_cache.c int do_getmac(cmd_tbl_t *cmdtp, int flag, int argc, char *argv[]) {     //usend d ...

  7. J2EE基础总结（5）——EJB

    什么是EJB     JB事实上就是企业Java Beans. EJB是J2EE平台的重要组成部分. J2EE平台基于组件的企业级应用架构,提供多 层次.分布式和高事务的功能特点.     EJB提供 ...

  8. Android Studio最新配置教程2016

    http://blog.csdn.net/wen_demo 一.Android studio 基本简单介绍 1.Android studio和Eclipse的差别: 1.Studio中有Project ...

  9. intellij idea 写 Helloworld

    http://www.jetbrains.com/idea/webhelp/creating-and-running-your-first-java-application.html Creating ...

  10. ios-UI1

    // AppDelegate.h // 01-HelloWorld的实现 // /* 新建工程的时候,Use Core Data:比如本地缓存, Include Unit test:增加单元测试 In ...