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

<!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. 一些非常有用的工具类之javamail（from韩顺平）

    之前编写一个类淘宝服务器时,需要使用javamail发送邮件,搜到的一个工具类,很有用. 需要下载导入:activation.jar和mail.jar package com.cx.service; ...

  2. react实现ssr服务器端渲染总结和案例(实例)

    1.什么是 SSR SSR 是 server side render 的缩写,从字面上就可以理解 在服务器端渲染,那渲染什么呢,很显然渲染现在框架中的前后端分离所创建的虚拟 DOM 2.为什么要实现服 ...

  3. 启动第二个Activity

    启动第二个Activity activity_main.xml文件: <? xml version="1.0" encoding="utf-8"?> ...

  4. 总是有人想在android上直连mysql，是猴子请来的逗比吗?

    总是有人想在android上直连mysql,都是是猴子请来的逗比吗?

  5. IOS怎么实现一个UITableView的下拉刷新

    採用的EGORefreshTableHeaderView来实现: 在Controller上实现EGORefreshTableHeaderDelegate的delegate @property(nona ...

  6. logistic regression教程1

    实现线性拟合 我们用python2.7实现上一篇的推导结果.请先安装python matplotlib包和numpy包. 具体代码如下: #!/usr/bin/env python #! -*- co ...

  7. LeetCode 463. Island Perimeter （岛的周长）

    You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 represen ...

  8. BestCoder Round #59 (div.2) B. Reorder the Books 想法题

    Reorder the Books 问题描述 dxy家收藏了一套书,这套书叫<SDOI故事集>,<SDOI故事集>有n(n\leq 19)n(n≤19)本,每本书有一个编号,从 ...

  9. CMDBuild安装及webservice接口的获取

    近期项目组之前一直使用的OneCMDB出现了问题,在增删改数据时异常的慢.于是考虑能否够优化OneCMDB.由于本人水平有限,对OneCMDB进行代码级别的优化临时还有点难度.于是就对现有的其它开源C ...

  10. jQuery Uploadify在ASP.NET MVC3中的使用

    1.Uploadify简介 Uploadify是基于jQuery的一种上传插件,支持多文件.带进度条显示上传,在项目开发中常被使用. Uploadify官方网址:http://www.uploadif ...