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

<!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. MySQL: 打开binlog选项后无法重启MySQL

    binlog目录权限不足导致,用chown mysql:mysql <log folder>即可解决此问题.

  2. open redis port for remote connections

    edit /etc/redis.conf Add below line after bind 127.0.0.1, then try redis-cli -h xxx.xxx.xxx.xxx ping ...

  3. python集合可以进行相减

    python集合可以进行相减 student = {'tom','jim','mary','tom','jack','rose'} print(student) print('rose' in stu ...

  4. 自己定义ViewpagerIndicator （仿猫眼，加入边缘回弹滚动效果）

    一.概述 今天主要来分享个自己定义viewpagerindicator.效果主要是仿 猫眼电影 顶部的栏目切换.也就是我们常说的indicator,难度简单,为了让滑动时效果更炫酷,我在滑动到左边第一 ...

  5. 【Android 开发实例】时间管理APP开发之数据库设计

    当然也能够先写界面什么的.可是,总认为先把数据库后台写好在写界面比較放心. 对于数据库的设计,我一開始没什么概念.甚至不知道怎样下手,一開始想着设计成几个表?有哪些字段? 最后用了两天时间,还是一无所 ...

  6. 线段树专题 POJ3468 A Simple Problem with Integers

    题意:n个点.m个操作.两种操作类型.C X Y K 表示区间[x,y]上每一个点值加k.Q X Y 求区间[x,y]的和 分析:线段树区间求和,裸模板 注意:结果会超int,要用long long ...

  7. HDU 1814 Peaceful Commission（2-sat 模板题输出最小字典序解决方式）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1814 Problem Description The Public Peace Commission ...

  8. leetcode题解||Palindrome Number问题

    problem: Determine whether an integer is a palindrome. Do this without extra space. click to show sp ...

  9. checkbox是否选中判断

    三种方式: $('#checkAll').bind('click',function(){ //第一种 console.log(this.checked); //第二种 console.log($(t ...

  10. Scala 方法接受变参

    def Parametron(strings:String*): Unit ={ strings.foreach(x=>{ println(x) ") println(s"* ...