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

<!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. codevs1031 质数环

    一个大小为N(N<=17)的质数环是由1到N共N个自然数组成的一个数环,数环上每两个相邻的数字之和为质数.如下图是一个大小为6的质数环.为了方便描述,规定数环上的第一个数字总是1.如下图可用1 ...

  2. MS SQL SERVER 书BOOK

    http://www.cnblogs.com/lyhabc/p/4833248.html

  3. Oops, 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine error

    环境: Win7 64位 + VS2005 + Office2013 64位 现象:程序为一个Excel导入程序,导入时报「'Microsoft.ACE.OLEDB.12.0' provider is ...

  4. jquery 1.9以上新版本不支持toggle()的解决方法

    原文:http://blog.csdn.net/u011061889/article/details/50397462 参考: http://www.cnblogs.com/lionden/archi ...

  5. apple air装双系统（win7）

     同事买了一个apple air.用不习惯,希望再装个win7,经过多次试验,得到例如以下操作方法: 1.在MAC系统里的"有用工具"中找到"Boot Camp 助理 ...

  6. 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范

    常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...

  7. 写给小白的JVM学习指南

    Java 虚拟机是学习 Java 的基础,也是迈入高级 Java 开发工程师的必备知识点.所以今天这篇文章我们来聊聊如何从零开始学习 Java 虚拟机. 基础 对于刚刚接触 JVM 的同学来说,JVM ...

  8. scikit-learn：4.7. Pairwise metrics, Affinities and Kernels

    參考:http://scikit-learn.org/stable/modules/metrics.html The sklearn.metrics.pairwise submodule implem ...

  9. 解决 C++ 操作 MySQL 大量数据插入效率低下问题

    往 Mysql 中,插入10000条简单数据.速度很缓慢,竟然要5分钟左右, 可是打开事务的话.一秒不到就搞定了 代码: #include <iostream> #include < ...

  10. linux下的epoll怎样高效处理百万连接

    开发高性能网络程序时.windows开发人员们言必称iocp,linux开发人员们则言必称epoll.大家都明确epoll是一种IO多路复用技术,能够很高效的处理数以百万计的socket句柄,比起曾经 ...