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

<!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. Ubuntu 16.04下截图工具Shutter

    Ubuntu下自带截图工具Screenshot,但是有个缺点是不能对截到的图进行标注,快捷键如下: 截图的升级软件Shutter,具有标注的功能 安装: sudo apt-get install sh ...

  2. url处理函数

    function UrlOption(url) { this.url = url || ''; this.init(); this.change = function (url) { this.url ...

  3. ubuntu How do I configure proxies without GUI?

    想法:  我的想法是想是一台国内的 ubuntu 云主机可以通过另外一台在国外(新加坡)的服务器 ,来实现可以访问 google ,哈哈,比较好查资料:) 下面的做法 去修改 /etc/environ ...

  4. java的异常（Exception）信息的详细记录

    下面的三个方法都是获取异常的详细信息,或许的异常详细信息以字符串的形式返回,保持栈堆载的风格 方法一: public static String getExceptionAllinformation( ...

  5. org.apache.shiro.web.servlet.ShiroHttpServletRequest cannot be cast to org.springframwork.web.mult..

    在用dwz框架+spring MVC时上传文件报的错 详细错误例如以下: 事实上就是一个类型转换错误,但却研究了好长时间,怎么都不知道哪里错了.由于前面卸过一个文件上传的和这个差点儿相同,那个就没有问 ...

  6. jQyery 整体架构

    jQuery的模块 一.jQuery一共有13个模块: 1. 核心方法 2. 回调模块(callbacks) 3. 数据缓存 4. 异步队列(Deffered) 5. 选择器操做 6. 属性操作 7. ...

  7. 将一个对象相同的属性(不区分大小写)赋值给一个新对象 DataTable的一个简单的扩展

    将一个对象相同的属性(不区分大小写)赋值给一个新对象   1 public static T Mapper<S, T>(S source) 2 { 3 T t = Activator.Cr ...

  8. HVR数据复制软件部署之（一）--HUB端部署

    HVR数据复制软件部署之(一)--HUB端部署 本文环境: OS: RHEL5.9 x86-64bit DB: Oracle 12.1.0.2 x86-64bit HVR:highgohvr-4.7. ...

  9. UVA 11423 - Cache Simulator (树状数组)

    UVA 11423 - Cache Simulator (树状数组) option=com_onlinejudge&Itemid=8&category=523&page=sho ...

  10. js 数字格式化，只能输入正负整数，小数

    1.只能输入正整数 <input name="columnValue" class="input96 required" type="text& ...